Angular2 开发者的 TypeScript 配置

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

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

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

tsconfig.json

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

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

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

noImplicitAny 与 suppressImplicitAnyIndexErrors

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

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

我们在“快速起步”中把 noImplicitAny 标志初始化为 false ,这是为了让学习 TypeScript 开发更简单点。

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

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

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

"suppressImplicitAnyIndexErrors":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 的所有包都是如此。

安装类型定义文件

遗憾的是,很多库—— 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.

我们在“快速起步”中指定过三个 类型定义 文件( d.ts ):

  • core-js 是为 ES5 浏览器添加 ES2015/ES6 特性的类型定义

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

  • node 是为了在 nodejs 环境中引用对象的代码提供的类型定义。 在 webpack 页面可以看到例子。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值