Angular VS 2012 中的语法错误

Question

我是 Angular 2 的新手，但对 Angular 1 和 TypeScript 有一些了解（广泛使用 JavaScript/JQuery 但不是 TypeScript 或 Angular 1）。

在探索 Angular 2 时，我关注了几篇文章并尝试阅读和关注 Visual Studio 2012 年与 Web 应用程序相关的 Angular 2 示例。不知何故，VS 无法识别 Angular 语法并在 .ts 文件中抛出多个错误。下面的示例代码会引发错误。但是 VS 确实识别 HTML 中的 TypeScript 和 Angular 1 语法。我试图自己寻找解决方案但失败了。

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: '< h1 > Hello {{name}}< / h1>'
})
export class AppComponent { name = 'Angular'; }

任何帮助都将有助于我进一步探索它。

Error   1   Unexpected token; 'module, class, interface, enum, import or statement' expected.   D:\TypeScriptHTMLApp\TypeScriptHTMLApp\Component.ts 1   1   TypeScriptHTMLApp
Error   2   ';' expected.   D:\TypeScriptHTMLApp\TypeScriptHTMLApp\Component.ts 1   27  TypeScriptHTMLApp
Error   3   Unexpected character "@".   D:\TypeScriptHTMLApp\TypeScriptHTMLApp\Component.ts 3   1   TypeScriptHTMLApp
Error   4   Unexpected token; 'module, class, interface, enum, import or statement' expected.   D:\TypeScriptHTMLApp\TypeScriptHTMLApp\Component.ts 3   1   TypeScriptHTMLApp
Error   5   Could not find symbol 'Component'.  D:\TypeScriptHTMLApp\TypeScriptHTMLApp\Component.ts 1   10  TypeScriptHTMLApp
Error   6   Could not find symbol 'from'.   D:\TypeScriptHTMLApp\TypeScriptHTMLApp\Component.ts 1   22  TypeScriptHTMLApp
Error   7   Could not find symbol 'Component'.  D:\TypeScriptHTMLApp\TypeScriptHTMLApp\Component.ts 3   2   TypeScriptHTMLApp
Error   8   Build: Unexpected token; 'module, class, interface, enum, import or statement' expected.    D:\TypeScriptHTMLApp\TypeScriptHTMLApp\Component.ts 1   1   TypeScriptHTMLApp
Error   9   Build: ';' expected.    D:\TypeScriptHTMLApp\TypeScriptHTMLApp\Component.ts 1   27  TypeScriptHTMLApp
Error   10  Build: Unexpected character "@".    D:\TypeScriptHTMLApp\TypeScriptHTMLApp\Component.ts 3   1   TypeScriptHTMLApp
Error   11  Build: Unexpected token; 'module, class, interface, enum, import or statement' expected.    D:\TypeScriptHTMLApp\TypeScriptHTMLApp\Component.ts 3   1   TypeScriptHTMLApp

谢谢

Answer 1

装饰器已在 TypeScript 1.5 版中引入 ES7/ES2016，如 TypeScript 官方文档的新增功能 here.

中所述

根据 this 文档，在 TypeScript 1.7 版中也引入了对 ES3 的装饰器支持。

确保您按照 TypeScript 与 ES 的正确组合来构建您的解决方案。

注意：您可以在工具 -> 选项... -> 文本编辑器 -> JavaScript/TypeScript -> 项目中验证您的 ES 版本。

Answer 2

VS2012 太旧，它可能只支持不支持装饰器的 TypeScript 1.0（注意 @...）。

勾选this issue。 VS 2012 TS 版本已停止在 TypeScript 1.0.1。

使用较新的版本，VS2015 或 VS2017 甚至 VSCode。此外，您不必只使用 Visual Studio。您可以使用任何您想要的 - WebStorm、IntelliJ、Sublime、Atom，...。

关于VS，一般安装对应版本的TypeScript SDK即可。

WebStorm 和 IntelliJ 等其他 IDE 有自己的插件来为编辑 TypeScript 提供设计时支持。

我建议您停止寻找 Angular2，转而学习最新的 Angular 版本（撰写本文时为 v4）。这个框架发展迅速并且发生了巨大变化。不要指望 2016 年年中左右的任何早期材料会帮助您满足当前要求。

Angular VS 2012 中的语法错误

Angular syntax error in VS 2012

visual-studio-2012

angular