Typescript不在克隆的存储库上编译

时间：2017-02-11 22:41:28

标签： javascript angular typescript npm

我创建了一个Angular2组件，并希望与我的同事共享代码。我已经将代码上传到github，克隆了回购邮件，做了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-compiler设置

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

我已经尝试删除node_modules /，typings /，将角度启动器中的依赖项更改为当前依赖项，但我只收到了更多错误消息。

任何人都可以帮助我吗？我的最终目标是让某人克隆我的存储库，运行npm install和npm run tsc，并准备开发。

UPDATE1： 将es5转换为es6删除了有关承诺的错误;茉莉花的错误仍然存​​在：

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'.

UPDATE2：

我已更新了依赖项以匹配angular-quickstart（https://github.com/angular/quickstart/blob/master/package.json）。现在它起作用了，谢谢你的帮助！

1 个答案:

答案 0 :(得分：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包。

虽然评论中的某些人建议您从"target": "es5"更改为"target": "es2015"，但您必须非常谨慎地选择此选项，因为它限制了可以定位 的浏览器集除非您打算引入二级转发器，否则会非常 。

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

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

考虑

来源TypeScript 

"target"

发出JavaScript 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 }; } } 

"target": "es5"

发出JavaScript "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; }()); 

"target": "es2015"

发出JavaScript "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 }); }); } } 

"target": "es2017"

发出JavaScript "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 }); } } 

"target": "esnext"
相关问题
最新问题