Typescript 无法在克隆的存储库上编译

Question

我创建了一个 Angular2 组件并想与我的同事分享代码。我已经将代码上传到 github，克隆了 repo，做了npm install 和npm run tsc，但是得到了：

error TS2318: Cannot find global type 'Promise'.
node_modules/@angular/common/src/directives/ng_class.d.ts(48,34): error TS2304: Cannot find name 'Set'.
node_modules/@angular/common/src/pipes/async_pipe.d.ts(44,38): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_init.d.ts(16,18): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(116,76): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(132,110): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(158,67): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(160,101): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(24,15): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(28,16): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/di/reflective_provider.d.ts(87,123): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/di/reflective_provider.d.ts(87,165): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/lang.d.ts(12,17): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/lang.d.ts(13,17): error TS2304: Cannot find name 'Set'.
node_modules/@angular/core/src/linker/compiler.d.ts(53,49): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/compiler.d.ts(61,65): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/ng_module_factory_loader.d.ts(14,34): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/system_js_ng_module_factory_loader.d.ts(28,25): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/util/lang.d.ts(12,53): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/testing/component_fixture.d.ts(73,19): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/testing/test_bed.d.ts(85,33): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/testing/test_bed.d.ts(134,26): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/http/src/headers.d.ts(52,59): error TS2304: Cannot find name 'Map'.
node_modules/@angular/http/src/url_search_params.d.ts(46,16): error TS2304: Cannot find name 'Map'.
node_modules/rxjs/Observable.d.ts(69,60): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(69,70): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/PromiseObservable.d.ts(40,31): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/PromiseObservable.d.ts(41,26): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(2,60): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(3,79): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(3,89): error TS2304: Cannot find name 'Promise'.
src/my.component.spec.ts(40,13): error TS2697: An async function or method must return a 'Promise'. Make sure you have a declaration for 'Promise' or include 'ES2015' in your `--lib` option.
src/my.service.ts(59,28): error TS2339: Property 'find' does not exist on type 'Cmp[]'.
src/my.service.ts(59,34): error TS7006: Parameter 't' implicitly has an 'any' type.
src/my.service.ts(71,43): error TS2339: Property 'find' does not exist on type 'PartCmp[]'.
src/my.service.ts(71,49): error TS7006: Parameter 'pt' implicitly has an 'any' type.
src/other.service.spec.ts(122,3): error TS2304: Cannot find name 'expect'.
src/other.service.spec.ts(27,1): error TS2304: Cannot find name 'describe'.
src/other.service.spec.ts(28,2): error TS2304: Cannot find name 'beforeEach'.
src/other.service.spec.ts(35,2): error TS2304: Cannot find name 'it'.

这是我的 npm 设置：

"dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "^2.0.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "angular-in-memory-web-api": "~0.2.2",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.0-beta.12",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.4"
},
"devDependencies": {
    "jasmine": "^2.5.3",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-coverage": "^1.1.1",
    "karma-html-reporter": "^0.2.7",
    "karma-jasmine": "^1.0.2",
    "lite-server": "^2.2.2",
    "systemjs": "^0.19.37",
    "typescript": "2.1.5"
}

和我的 tsc 编译器设置

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": true
    }, "exclude": ["node_modules"]
}

我已经尝试删除 node_modules/，typings/，将依赖项从 angular starter 更改为当前依赖项，但我收到了更多错误消息。

谁能帮帮我？我的最终目标是有人克隆我的存储库，运行 npm install 和 npm run tsc，并准备好开发。

更新1： 将 es5 转为 es6 消除了有关 Promise 的错误；茉莉花错误仍然存​​在：

src/other.service.spec.ts(122,3): error TS2304: Cannot find name 'expect'.
src/other.service.spec.ts(27,1): error TS2304: Cannot find name 'describe'.
src/other.service.spec.ts(28,2): error TS2304: Cannot find name 'beforeEach'.
src/other.service.spec.ts(35,2): error TS2304: Cannot find name 'it'.

更新2：

我已更新依赖项以匹配 angular-quickstart (https://github.com/angular/quickstart/blob/master/package.json)。现在可以了，感谢您的帮助！

Answer 1

您的 tsconfig.json 中缺少 Promise 和一些 Array 方法的声明。请注意下面添加的 "lib" 属性。

{
  "compilerOptions": {
    "lib": [
      "es2017",
      "dom"
    ],
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true
  }, 
  "exclude": ["node_modules"]
}

此外，正如 @rpadovani 所指出的，您缺少一些用于测试框架的 @types 包。

虽然 cmets 中的一些人建议您将 "target": "es5" 更改为 "target": "es2015"，但您必须非常谨慎地做出此选择，因为它限制了可以显着定位的浏览器集> 除非您打算引入辅助转译器。

在这种情况下，可能不需要更新 "target" 属性，因为像 find 这样的 Array 方法可以由诸如 core-js 之类的 polyfill 提供，而 Angular 2 本身会填充全局 Promise通过依赖 zone.js。所以不要过于仓促更新"target"，而是考虑配置"lib" 选项来获取针对较新的运行时/polyfills 的类型信息。

值得注意的是，更新"target" 选项是一种隐式更新"lib" 选项的方法，这就是建议的原因。但是，更新 "target" 也会改变 TypeScript 在转译您的代码时执行的语法降级程度。

考虑

源 TypeScript

class A {
    http = new Http();
    async retrieve() {
        const data = await this.http
            .get('api/settings')
            .map(r => r.json() as Settings)
            .toPromise();
        const withId = { ...data, id: 1 };
    }
}

发出的 JavaScript "target": "es5"

"use strict";
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t;
    return { next: verb(0), "throw": verb(1), "return": verb(2) };
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [0, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
var A = (function () {
    function A() {
        this.http = new Http();
    }
    A.prototype.retrieve = function () {
        return __awaiter(this, void 0, void 0, function () {
            var data, withId;
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0: return [4 /*yield*/, this.http
                            .get('api/settings')
                            .map(function (r) { return r.json(); })
                            .toPromise()];
                    case 1:
                        data = _a.sent();
                        withId = __assign({}, data, { id: 1 });
                        return [2 /*return*/];
                }
            });
        });
    };
    return A;
}());

发出的 JavaScript "target": "es2015"

"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
class A {
    constructor() {
        this.http = new Http();
    }
    retrieve() {
        return __awaiter(this, void 0, void 0, function* () {
            const data = yield this.http
                .get('api/settings')
                .map(r => r.json())
                .toPromise();
            const withId = Object.assign({}, data, { id: 1 });
        });
    }
}

发出的 JavaScript "target": "es2017"

"use strict";
class A {
    constructor() {
        this.http = new Http();
    }
    async retrieve() {
        const data = await this.http
            .get('api/settings')
            .map(r => r.json())
            .toPromise();
        const withId = Object.assign({}, data, { id: 1 });
    }
}

发出的 JavaScript "target": "esnext"

"use strict";
class A {
    constructor() {
        this.http = new Http();
    }
    async retrieve() {
        const data = await this.http
            .get('api/settings')
            .map(r => r.json())
            .toPromise();
        const withId = { ...data, id: 1 };
    }
}