Angular 2 TypeScript 错误

Question

我已经按照 angular 2 网站上的快速入门进行了操作。我试图让我的 gulpfile 设置属性在我的 Visual Studio aspnetcore 项目中转换我的打字稿。我使用的是 typescript 1.8.10，而不是 2.0 beta，它在 SO 的其他地方发布了解决方案。

我在运行“ts2”任务时遇到了 70 个这样的错误：

c:/path/to/my/project/Quickstart/node_modules/@angular/common/src/pipes/async_pipe.d.ts(41,38)：错误 TS2304：找不到名称“Promise”。 c:/path/to/my/project/Quickstart/node_modules/@angular/compiler/src/compile_metadata.d.ts(347,20)：错误 TS2304：找不到名称“Set”。 c:/path/to/my/project/Quickstart/node_modules/@angular/compiler/src/compile_metadata.d.ts(348,15)：错误 TS2304：找不到名称“Set”。 c:/path/to/my/project/Quickstart/node_modules/@angular/compiler/src/directive_normalizer.d.ts(19,100)：错误 TS2304：找不到名称“Promise”。

我的 Gulpfile.js：

var ts = require("gulp-typescript");
var gulp = require('gulp');
var clean = require("gulp-clean");

// Delete the dist directory
gulp.task("clean", function () {
    return gulp.src(destPath)
        .pipe(clean());
});

gulp.task("scriptsNStyles", () => {
    gulp.src([
            "core-js/client/**",
            "systemjs/dist/system.src.js",
            "reflect-metadata/**",
            "rxjs/**",
            "zone.js/dist/**",
            "@angular/**",
            "jquery/dist/jquery.*js"
    ], {
        cwd: "node_modules/**"
    })
        .pipe(gulp.dest("./wwwroot/lib"));
});

var tsProject = ts.createProject("./tsconfig.json");
gulp.task("ts", function (done) {
    //var tsResult = tsProject.src()
    var paths = {
        scripts: ['./wwwroot/app/*.ts']
    };

    gulp.src(paths.scripts).pipe(gulp.dest('wwwroot/app'));
});

gulp.task('ts2', function (done) {
    var tsResult = gulp.src([
            "wwwroot/app/*.ts"
    ])
        .pipe(ts(tsProject), undefined, ts.reporter.fullReporter());
    return tsResult.js.pipe(gulp.dest('./wwwroot/app'));
});


gulp.task("watch", ["watch.ts"]);

gulp.task("watch.ts", ["ts"], function () {
    return gulp.watch("./wwwroot/app/*.ts", ["ts"]);
});

gulp.task("default", ["scriptsNStyles", "watch"]);

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/index",
    "typings/index.d.ts",
    "wwwroot/lib"
  ],
  "compileOnSave": true
}

package.json:

{
  "version": "1.0.0",
  "name": "asp.net",
  "scripts": {
    "postinstall": "typings install",
    "typings": "typings"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.7",
    "@angular/compiler": "2.0.0-rc.7",
    "@angular/compiler-cli": "0.6.1",
    "@angular/core": "2.0.0-rc.7",
    "@angular/forms": "2.0.0-rc.7",
    "@angular/http": "2.0.0-rc.7",
    "@angular/platform-browser": "2.0.0-rc.7",
    "@angular/platform-browser-dynamic": "2.0.0-rc.7",
    "@angular/router": "3.0.0-rc.3",
    "@angular/upgrade": "2.0.0-rc.7",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.21",
    "angular2-in-memory-web-api": "0.0.19",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "typescript": "^1.8.10",
    "gulp": "^3.9.1",
    "path": "^0.12.7",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-typescript": "^2.13.6",
    "typings": "^1.3.1",
    "gulp-tsc": "^1.2.0"
  }
}

Typings.json：

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

转译似乎有效，但我不喜欢这些错误。我该如何解决这个问题？

Answer 1

Typescript 2.0 及以后版本将弃用打字。一个更简单的解决方案是使用 npm 类型定义包。我知道您要求 1.8 解决方案，但我强烈建议现在删除 Typings！

• 从 Microsoft 下载 Typescript 2.0.2 或更高版本。 https://www.microsoft.com/en-us/download/details.aspx?id=48593 或从 npm 安装：npm install -g typescript

• 将以下行添加到您的 package.json 文件 "@types/core-js": "^0.9.32", "@types/jasmine": "^2.2.33", 和 "@types/node": "^6.0.38", 或使用命令行：npm install @types/core-js @types/jasmin @types/node --save-dev

• 在您的 tsconfig.json 文件中添加以下内容：

tsconfig.json

"typeRoots": [
  "node_modules/@types"
 ],
 "types": [
   "core-js",
   "jasmine",
   "node"
 ]

core-js 类型定义将消除您的 Promise 和 Set 定义错误。

在 typescript 2.0 中，类型定义更容易使用。您通过相同的过程来提取 lodash、d3 或您想要使用的任何其他 js 库的定义。您可以使用Microsoft's TypeSearch website 查找类型。在微软的博客上阅读更多信息：https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files/

您需要将您的 devDependencies 更新为“typescript”：“^2.0.2”。或npm install typescript --save-dev

要更新您的 gulpfile 以使用最新版本的 typescript，请将您的 tsProject 行更改为：

var tsProject = ts.createProject('tsconfig.json', {
  typescript: require('typescript')
});

请参阅gulp-typescript documentation on Github 了解更多信息。

Answer 2

尝试将 tsconfig.json 的 compilerOptions target 属性更新为“es6”，因为 Set 和 Promises 仅在 ES6 中可用。

{
  "compilerOptions": {
    "target": "es6",
...
}