我目前正在使用 TypeScript 运行 Angular 2 演示。有两个文件:作为模板导入的 index.html 文件和 TypeScript 文件。 TypeScript 文件编译成 pomodoro-timer.js，对于这个演示，所有类都包含在一个文件中:
pomodoro-timer.ts
import {
Component,
Input,
Pipe,
PipeTransform,
Directive,
OnInit,
HostListener
} from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
/// Model interface
interface Task {
name: string;
deadline: Date;
queued: boolean;
pomodorosRequired: number;
}
/// Local Data Service
class TaskService {
public taskStore: Array<Task> = [];
constructor() {
const tasks = [
{
name: "Code an HTML Table",
deadline: "Jun 23 2015",
pomodorosRequired: 1
},
{
name: "Sketch a wireframe for the new homepage",
deadline: "Jun 24 2016",
pomodorosRequired: 2
},
{
name: "Style table with Bootstrap styles",
deadline: "Jun 25 2016",
pomodorosRequired: 1
},
{
name: "Reinforce SEO with custom sitemap.xml",
deadline: "Jun 26 2016",
pomodorosRequired: 3
}
];
this.taskStore = tasks.map(task => {
return {
name: task.name,
deadline: new Date(task.deadline),
queued: false,
pomodorosRequired: task.pomodorosRequired
};
});
}
/// Component classes
/// - Main Parent Component
@Component({
selector: 'pomodoro-tasks',
styleUrls: ['pomodoro-tasks.css'],
templateUrl: 'pomodoro-tasks.html'
})
class TasksComponent {
today: Date;
tasks: Task[];
constructor() {
const TasksService: TasksService = new TasksService();
this.tasks = taskService.taskStore;
this.today = new Date();
}
};
bootstrap(TasksComponent);
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Angular 2!</title>
<!-- required stylesheets -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<!-- required javascripts -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="systemjs.config.js"></script>
<script>
// importation of component module
// with no file extension
System.import('built/pomodoro-tasks').then(null, console.error.bind(console));
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<strong class="navbar-brand">My Pomodoro Tasks</strong>
</div>
</div>
</nav>
<pomodoro-tasks></pomodoro-tasks>
</body>
</html>
一切似乎都运行良好，但是，pomodoro-timer.ts 文件的这一部分似乎会引发错误:
class TasksComponent {
today: Date;
tasks: Task[];
constructor() {
// (Cannot find name 'TasksService'.at line 91 col 29, BELOW)
// (Block-scoped variable 'TasksService' used before its declaration.at line 91 col 48, BELOW)
const TasksService: TasksService = new TasksService();
// (Cannot find name 'taskService'.at line 92 col 22, BELOW)
this.tasks = taskService.taskStore;
this.today = new Date();
}
};
bootstrap(TasksComponent);
任何熟悉 TypeScript 的人都知道为什么我会收到这些错误？我正在使用带有 TypeScript 插件的 Atom IDE。
最佳答案
如果你像这样初始化对象
const TasksService: TasksService = new TasksService();
您将收到以下错误，
Blocked-scoped variable 'TasksService' used before its declaration.
要解决此问题，请将变量名称更改为其他名称
const TaskServ: TasksService = new TasksService();
NOTE: This error usually comes when you declare a variable with the same name as of class(Object).
关于Angular 2 block 范围变量问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38987032/