TypeScript 配置

TypeScript 配置

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

浏览器不能直接执行 TypeScript。它得先用 tsc 编译器转译(transpile)成 JavaScript,而且编译器需要进行一些配置。

本页面会涵盖 TypeScript 配置与环境的某些方面,这些对 Angular 开发者是很重要的。具体来说包括下列文件:

tsconfig.json 文件

你通常会往项目中加入一个 TypeScript 配置文件(tsconfig.json),来指导编译器如何生成 JavaScript 文件。

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

在搭建本地开发环境中创建过如下的 tsconfig.json

tsconfig.json

content_copy{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "es2015", "dom" ], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true } }

该文件中的选项和标志是写 Angular 应用程序的基础。

noImplicitAny 与 suppressImplicitAnyIndexErrors

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

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

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

即使 noImplicitAny 标志被设置成了 true,你也可以把变量的类型设置为 any

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

content_copy"suppressImplicitAnyIndexErrors":true

本文档在环境搭建时将 noImplicitAny 标志设置为 true

TypeScript 类型定义(typings)

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

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

TypeScript 敏感的编辑器借助这些定义文件来显示这些库中各个特性的类型定义。

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

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

lib.d.ts 文件

TypeScript 带有一个特殊的声明文件,名为 lib.d.ts。该文件包含了 JavaScript 运行库和 DOM 的各种常用 JavaScript 环境声明。

基于 --target,TypeScript 添加额外的环境声明,例如如果目标为 es6时将添加 Promise

因为《快速上手》的目标为 es5,所以你可以重写声明文件列表来包含:

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

得益于这项设置,即使编译目标设置为 es5,你也能获得所有的 es6 类型信息。

安装类型定义文件

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

你还可以通过 npm 来使用@types/* 范围化包来安装这些类型信息, 而 TypeScript 自从 2.0 开始,可以自动识别它们。

比如,要安装 jasmine 的类型信息,你可以执行 npm install @types/jasmine --save-dev

在“快速上手”中曾指定过两个类型定义文件(d.ts):

  • jasmine是 Jasmine 测试框架的类型定义

node是为了在 Node.js® 环境中引用对象的代码提供的类型定义。

“快速上手”本身不需要这些类型定义,但是文档中的很多例子都需要。

编译目标(target)

默认情况下,编译目标是 es5,如果你只想发布到兼容 es6 的浏览器中,也可以把它配置为 es6。 不过,如果配置为 es6,那么一些老的浏览器(如 IE )中就会抛出 Syntax Error 错误。