Angular 2 Typescript 编译错误

Question

我正在使用 Visual Studio 2017 开发带有 Asp.Net Core WebApi 后端的 Angular 2 应用程序。我正在关注 ASP.NET Core and Angular 2 Book，作者是 Valerio De Sanctis。 在我添加 @angular/forms 包之前，一切正常。当我启动 Task Runner 有几个错误：

[00:28:42] Starting 'app_clean'...
[00:28:42] Starting 'js'...
[00:28:42] Starting 'watch'...
[00:28:42] Finished 'watch' after 27 ms
[00:28:42] Finished 'app_clean' after 77 ms
[00:28:42] Starting 'app'...
C:/Users/Phoenix/Desktop/Angular 2 курс/CollectionsWorkAngular3/src/CollectionsWorkAngular/node_modules/@angular/core/src/facade/lang.d.ts(12,17): error TS2693: 'Map' only refers to a type, but is being used as a value here.
C:/Users/Phoenix/Desktop/Angular 2 курс/CollectionsWorkAngular3/src/CollectionsWorkAngular/node_modules/@angular/core/src/facade/lang.d.ts(13,17): error TS2693: 'Set' only refers to a type, but is being used as a value here.
C:/Users/Phoenix/Desktop/Angular 2 курс/CollectionsWorkAngular3/src/CollectionsWorkAngular/node_modules/rxjs/Observable.d.ts(69,60): error TS2693: 'Promise' only refers to a type, but is being used as a value here.
C:/Users/Phoenix/Desktop/Angular 2 курс/CollectionsWorkAngular3/src/CollectionsWorkAngular/typings/globals/core-js/index.d.ts(2083,41): error TS2339: Property 'unscopables' does not exist on type 'SymbolConstructor'.
[00:28:45] TypeScript: 80 semantic errors
[00:28:45] TypeScript: emit succeeded (with errors)

还有更多错误，例如我刚刚删除的 sn-p 中的错误。 我使用 Gulp 作为任务管理器，这是我的 package.json：

{
  "version": "1.0.0",
  "name": "collectionswork",
  "private": true,
  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/upgrade": "2.4.8",
    "@angular/forms": "2.4.8",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.2.0",
    "systemjs": "^0.19.37",
    "typings": "^2.1.0",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-typescript": "^3.1.5",
    "gulp-uglify": "^2.0.0",
    "typescript": "^2.0.0"
  },
  "scripts": {
    "postinstall": "typings install dt~core-js --global"
  }
}
`
here is my tsconfig.json :`
{
  "compileOnSave": false,
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": false,
    "removeComments": false,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

Answer 1

如果你将 core-js 安装为全局 "postinstall": "typings install dt~core-js --global --save",

先卸载

> typings uninstall core-js --global

> npm cache clean

> npm i @types/core-js@0.9.36 --save-dev

请查看https://github.com/DefinitelyTyped/DefinitelyTyped/issues/15140的bramdebouvere 评论

修改 tsconfig.json（添加 typeRoots 和类型）

{
  "compileOnSave": false,
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": false,
    "removeComments": false,
    "target": "es5",
    "typeRoots": [
        "../node_modules/@types"
    ],
    "types": [
        "core-js"
    ]
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

它适用于以下版本

> node -v

v7.7.3

> npm -v

4.1.2

package.json

  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "@angular/upgrade": "^2.4.9",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.1.0",
    "systemjs": "^0.20.9",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.36",
    "@types/node": "^7.0.8",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-less": "^3.3.0",
    "gulp-sourcemaps": "^2.4.0",
    "gulp-typescript": "^3.1.5",
    "gulp-uglify": "^2.0.0",
    "typescript": "^2.2.1",
    "typings": "2.1.0"
  }

Answer 2

由于最近更新了 DefinitelyTyped 的 @types/core-js 代码（有关详细信息，请参阅 this GitHub issue）。

本书 GitHub 存储库最近更新了以下解决方法，该解决方法在 VS2015 和 VS2017 上运行良好。您可以从那里获取更新的代码，也可以手动修补本地文件。

如果您选择自己执行此操作，请打开您的 package.json 文件并替换它：

"scripts": {
    "postinstall": "typings install dt~core-js --global"
}

有了这个：

"scripts": {
    "postinstall": "typings install dt~core-js@0.9.7+20161130133742 --global"
}

这将强制 Visual Studio 为 core-js 类型检索显式（和工作）版本+构建，而不是选择最新/最近的版本。无需卸载/重新安装任何东西，因为 VS 应该通过相应地更新 /typings/ 文件来自动解决这个问题。

对于 Visual Studio 2017 用户，值得注意的是 GitHub 存储库包含一个可供 VS2017 用户使用的 VS2017 dedicated branch：在撰写本文时，那里没有代码更改，只是 @ 的单向升级987654328@ 和 .csproj 文件。说实话，由于 VS2017 附带 Typescript 2，删除类型也是一种非常可行的方法，但它需要进一步的代码更改和/或更多的第三方组件更新：上述解决方法是最方便的解决方法保留书的印刷代码时的问题。

我的博客上的this post 中也提到了这个问题，作为使用第三方库时可能发生的常见情况的一个很好的例子。