带有 TypeScript 2.x、@types 和 SystemJS 的 Angular 1.x - 使用全局类型 [英] Angular 1.x with TypeScript 2.x, @types, and SystemJS - Using global typings

问题描述

我正在尝试将 Angular 1.x 与新的 TS2 和 @types 注册表一起使用，但遇到了问题.看起来@types 没有使用打字注册表所说的全局"打字.我遇到了以下错误:

I am trying to use Angular 1.x with the new TS2 and @types registry but running into problems. It looks like @types does not use what the typings registry refered to as "global" typings. I am running into the following error:

error TS2686: 'angular' refers to a UMD global, but the current file is a module. Consider adding an import instead.

角度代码如下:

import "angular";
import "angular-route";

const app = angular.module("charter-app", ["ui.bootstrap", "ui.router", "templates", "charter-app.controllers"]);

tsconfig.json:

tsconfig.json:

{
    "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "./",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "inlineSources": true,
    "removeComments": false,
    "noImplicitAny": false,
    "typeRoots": [ "node_modules/@types/" ],
    "types": [ "angular", "angular-ui-bootstrap", "angular-ui-router" ],
    "outFile": "app.js"
    }
 }

尝试使用以下内容

"devDependencies": {
    "@types/angular": "^1.5.20",
    "@types/angular-ui-bootstrap": "^0.13.35",
    "@types/angular-ui-router": "^1.1.34",

我正在使用 gulp-typescript 进行编译.我错过了什么?我可以不为此目的使用 @types 库吗?

I'm using gulp-typescript to do the compilation. What am I missing? Can I not use the @types libraries for this purpose?

推荐答案

我可以在这里想到 2 种方法.

I can think of 2 approaches here.

1) 将 angular 标记为 全球.(更简单的迁移选项)

创建一个 d.ts 文件说 overrides.d.ts 并执行:

Create a d.ts file say overrides.d.ts and do:

declare global {
  const angular: ng.IAngularStatic;
}
export {};

或

import * as _angular_ from 'angular';

declare global {
  const angular: typeof _angular_;
}

就是这样，不需要为此单独import或管理脚本加载.

and that's it, no need to import or manage script loading separately for this.

2) 在每个受影响的文件中导入它. (对于大型现有项目可能是更乏味的迁移选项)

如果您可以继续更新所有受影响的文件(通常在一个已经有很多与此相关的错误的大型项目中采用这种方法有点困难)，无论您在何处引用 angular, 导入:

If you can go ahead update all the impacted files (Usually a bit hard to take this approach in a much big project which already has lots of error related to this) where ever you refer to angular, import it:

import * as angular from "angular";

如果您采用这种方法，打字稿将使用 angular 作为文件的依赖项进行转换，并且您的模块加载器(例如:SystemJS)需要处理导入.这可以通过让 systemJS 通过地图/路径管理导入来完成，或者如果脚本是由 script 标签加载的，那么您可以使用 angular 创建一个假模块 angularstrong>SystemJS.registerDynamic 或 SystemJS.set apis.

If you are taking this approach, typescript will transpile with angular as a dependency for the file and your module loader (eg: SystemJS) needs to handle the import. This may be done either by having systemJS manage the imports via maps/paths or if the script is loaded by script tags then you can create a fake module for angular by using SystemJS.registerDynamic or SystemJS.set apis.

这篇关于带有 TypeScript 2.x、@types 和 SystemJS 的 Angular 1.x - 使用全局类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！