TypeScript 配置

TypeScript is a primary language for Angular application development. It is a dialect of JavaScript with design-time support for type-safety and tooling.

TypeScript是Angular应用开发中使用的主语言。 它是JavaScript的“方言”之一,为类型安全和工具化而做了设计期支持。

Browsers can't execute TypeScript directly. Typescript must be "transpiled" into JavaScript using the tsc compiler which requires some configuration.


This page covers some aspects of TypeScript configuration and the TypeScript environment that are important to Angular developers, including details about the following files:



Typically, you add a TypeScript configuration file (tsconfig.json) to your project to guide the compiler as it generates JavaScript files.


For details about tsconfig.json, see the official TypeScript wiki.

要了解关于tsconfig.json的详情,请参阅官方提供的 TypeScript wiki

We created the following tsconfig.json during Setup:



{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": ["es2015", "dom"], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, "typeRoots": [ "../../node_modules/@types/" ] }, "compileOnSave": true, "exclude": [ "node_modules/*", "**/*-aot.ts" ] }

This file contains options and flags that are essential for Angular applications.


noImplicitAny and suppressImplicitAnyIndexErrors


TypeScript developers disagree about whether the noImplicitAny flag should be true or false. There is no correct answer and you can change the flag later. But your choice now can make a difference in larger projects, so it merits discussion.

TypeScript开发者们在noImplicitAny标志应该是true还是false上存在分歧。 这没有标准答案,我们以后还可以修改这个标志。 但是我们的选择会在大项目中产生显著差异,所以它值得讨论一番。

When the noImplicitAny flag is false (the default), and if the compiler cannot infer the variable type based on how it's used, the compiler silently defaults the type to any. That's what is meant by implicit any.

noImplicitAny标志是false(默认值)时, 如果编译器无法根据变量的用途推断出变量的类型,它就会悄悄的把变量类型默认为any。这就是隐式any的含义。

The documentation setup sets the noImplicitAny flag to true.


When the noImplicitAny flag is true and the TypeScript compiler cannot infer the type, it still generates the JavaScript files, but it also reports an error. Many seasoned developers prefer this stricter setting because type checking catches more unintentional errors at compile time.

noImplicitAny标志是true并且TypeScript编译器无法推断出类型时,它仍然会生成JavaScript文件。 但是它也会报告一个错误。 很多饱经沧桑的程序员更喜欢这种严格的设置,因为类型检查能在编译期间捕获更多意外错误。

You can set a variable's type to any even when the noImplicitAny flag is true.


When the noImplicitAny flag is `true, you may get implicit index errors as well. Most developers feel that this particular error is more annoying than helpful. You can suppress them with the following additional flag:

如果我们把noImplicitAny标志设置为了true,我们可能会得到隐式索引错。 大多数程序员可能觉得这种错误是个烦恼而不是助力。 我们可以使用另一个标志来禁止它们。


The documentation setup sets this flag to true as well.

TypeScript Typings


Many JavaScript libraries, such as jQuery, the Jasmine testing library, and Angular, extend the JavaScript environment with features and syntax that the TypeScript compiler doesn't recognize natively. When the compiler doesn't recognize something, it throws an error.

很多JavaScript库,比如jQuery、Jasmine测试库和Angular,会通过新的特性和语法来扩展JavaScript环境。 而TypeScript编译器并不能原生的识别它们。 当编译器不能识别时,它就会抛出一个错误。

Use TypeScript type definition filesd.ts files—to tell the compiler about the libraries you load.

我们可以使用TypeScript类型定义文件 —— .d.ts文件 —— 来告诉编译器要加载的库的类型定义。

TypeScript-aware editors leverage these same definition files to display type information about library features.


Many libraries include definition files in their npm packages where both the TypeScript compiler and editors can find them. Angular is one such library. The node_modules/@angular/core/ folder of any Angular application contains several d.ts files that describe parts of Angular.

很多库在自己的npm包中都包含了它们的类型定义文件,TypeScript编译器和编辑器都能找到它们。Angular库也是这样的。 任何Angular应用程序的node_modules/@angular/core/目录下,都包含几个d.ts文件,它们描述了Angular的各个部分。

You need do nothing to get typings files for library packages that include d.ts files—as all Angular packages do.

我们不需要为那些包含了d.ts文件的库获取类型定义文件 —— Angular的所有包都是如此。



TypeScript includes a special declaration file called lib.d.ts. This file contains the ambient declarations for various common JavaScript constructs present in JavaScript runtimes and the DOM.


Based on the --target, TypeScript adds additional ambient declarations like Promise if our target is es6.


Since the QuickStart is targeting es5, we can override the list of declaration files to be included:


"lib": ["es2015", "dom"]

Thanks to that, we have all the es6 typings even when targeting es5.

Installable typings files


Many libraries—jQuery, Jasmine, and Lodash among them—do not include d.ts files in their npm packages. Fortunately, either their authors or community contributors have created separate d.ts files for these libraries and published them in well-known locations.

遗憾的是,很多库 —— jQuery、Jasmine和Lodash等库 —— 都没有在它们自己的npm包中包含d.ts文件。 幸运的是,它们的作者或社区中的贡献者已经为这些库创建了独立的d.ts文件,并且把它们发布到了一个众所周知的位置。

We can install these typings via npm using the @types/* scoped package and Typescript (starting at 2.0) will automatically recognize them.

For instance, to install typings for jasmine we could do npm install @types/jasmine --save-dev.

QuickStart identified two typings (d.ts) files:


QuickStart doesn't require these typings but many of the samples do.