Angular 2 TypeScript错误

时间:2016-09-14 15:32:08

标签: angular typescript gulp asp.net-core-1.0

我跟随角2站点的快速启动。我试图获取我的gulpfile安装属性来在我的Visual Studio aspnetcore项目中转换我的打字稿。我使用的是typescript 1.8.10,而不是那些在其他地方张贴了解决方案的2.0测试版。

我在运行" ts2"时遇到了70个这样的错误。任务:

c:/path/to/my/project/Quickstart/node_modules/@angular/common/src/pipes/async_pipe.d.ts(41,38):错误TS2304:找不到姓名'承诺&# 39 ;. c:/path/to/my/project/Quickstart/node_modules/@angular/compiler/src/compile_metadata.d.ts(347,20):error 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:找不到姓名'承诺'。

我的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"
  }
}

typings directory

Transpilation似乎有效,但我不喜欢这些错误。我该如何解决这个问题?

2 个答案:

答案 0 :(得分:3)

使用Typescript 2.0以后,不推荐使用打字输入。更简单的解决方案是使用npm类型定义包。我知道你要求1.8解决方案,但我的强烈建议是立即删除打字!

  • 从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更新为&#34; typescript&#34;:&#34; ^ 2.0.2&#34;。或npm install typescript --save-dev

要更新gulpfile以使用最新版本的typescript,请将tsProject行更改为:

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

有关详细信息,请参阅gulp-typescript documentation on Github

答案 1 :(得分:0)

由于集和承诺仅在ES6中可用,因此尝试将tsconfig.json的{​​{1}} compilerOptions属性更新为“ es6”。

target