javascript - Visual Studio Typescript - 重复的全局标识符

Question

我正在尝试利用 Angular 2 设置一个 Visual Studio 解决方案。首先，我将构建本教程中介绍的简单程序: https://angular.io/docs/ts/latest/guide/setup.html

这些是创建的 3 个 TS 文件:

库存.模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule }      from '@angular/core';
import { InventoryComponent } from './inventory.component'

@NgModule({
  imports: [BrowserModule],
  declarations: [InventoryComponent],
  bootstrap: [InventoryComponent]
})


export class InventoryModule {
}

库存.组件.ts

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

@Component({
  selector: 'inventory',
  template: `<h1>Hello {{name}}</h1>`
})
export class InventoryComponent { name = 'Angular'; }

库存.boot.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { InventoryModule }              from './inventory.module';

platformBrowserDynamic().bootstrapModule(InventoryModule);

当我在 Chrome 中运行该应用程序时，出现此错误:inventory.module.js:12 未捕获的语法错误:标识符“core_1”已被声明

发生这种情况是因为 typescript 中的导入语句全部转换为如下所示的行:const core_1 = require('@angular/core');

因此，多个文件具有这些全局声明常量，所有文件均以名称 core_1 进行转译。

显然有某种解决方法可以解决这个问题，但我在寻找任何东西时遇到了很多麻烦。有人可以提出建议吗？提前致谢!

编辑根据请求，发布我的 typescript 配置:tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": true,
    "sourceMap": true,
    "experimentalDecorators": true
  }
}

此外，.csproj 文件中还有一些适用的属性:

<TypeScriptModuleKind>CommonJs</TypeScriptModuleKind>
<TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
<TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
<TypeScriptJSXEmit>None</TypeScriptJSXEmit>
<TypeScriptModuleResolution>Node</TypeScriptModuleResolution>
<TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
<TypeScriptNoImplicitAny>True</TypeScriptNoImplicitAny>
<TypeScriptRemoveComments>True</TypeScriptRemoveComments>
<TypeScriptSourceMap>True</TypeScriptSourceMap>
<TypeScriptTarget>ES6</TypeScriptTarget>

只是为了解释其中一些选择

• ES6 是目标，因为我在引用 angular2 时在 Visual Studio 中遇到编译器错误(因为它依赖于 ES6 对象，例如 Promise)
• 模块解析为 Node，因为我需要 tsc 遍历节点树以获取对 Angular 2 的引用
• Module 类型最初是 AMD，但我需要将其更改为 CommonJs，因为我在浏览器中运行时收到错误“define is not Define”。

Answer 1

您收到重复标识符错误的原因是因为浏览器将每个 CommonJS 模块视为具有相同的范围。像 Node 这样的 CommonJS 环境隐式地假设每个文件都有自己的作用域。

然后，TypeScript 发出的每个声明都是 const声明，但 JavaScript 在遇到两个 let 时会出错或const同名声明。

The Module kind was originally AMD, but I needed to change it to CommonJs because I got the error "define is not defined" at runtime in the browser.

这是因为您的页面上没有包含和配置 AMD 加载程序(如 Require.js)。

您需要使用某种模块加载器或 bundler 才能在浏览器中使用模块。

1. 如果您使用的是 systemjs，请使用 System.js。
2. 如果您的目标是 AMD，请使用 Require.js。
3. 如果您使用的是 CommonJS，请使用 Webpack 或 Browserify。

对于 System.js 和 AMD，您需要 <script>标签和页面上的初始配置，使其正常工作。

ES6 is the target because I get compiler errors in visual studio when referencing angular2 (since it relies on ES6 objects such as Promise)

您可能不想以 ES6 为目标，因为较旧的浏览器无法使用 ES6 结构，因此 ES5 是更好的选择。但是，如果您包含 Promise polyfill(例如 core-js 或 es6-shim )，则可以设置 lib (或您的 MSBuild <TypeScriptLib> )如下:

dom,es2015,es5