非常教程

AngularJS参考手册

环境准备与部署

TypeScript 配置

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

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

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

  • tsconfig.json - TypeScript 编译器配置。
  • typings - TypesScript 类型声明文件。

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 应用程序的基础。

noImplicitAnysuppressImplicitAnyIndexErrors

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 for code that references objects in the Node.js®environment;

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

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

编译目标(target)

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

AngularJS

Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身,为你解决开发方面的各种挑战。

AngularJS目录

1.快速上手 | quick start
2.语言服务
3.安全
4.环境准备与部署
5.Service Worker
6.保持最新
7.从 AngularJS 升级
8.服务端渲染
9.Visual Studio 2015 快速上手
10.风格指南
11.国际化
12.测试
13.路由与导航
14. 教程 | Tutorial
15.架构
16.组件与模板
17.表单
18.可观察对象与RxJS
19.引导启动
20.Angular 模块
21.依赖注入
22.HttpClient
23.词汇表
24.AngularJS 应用
25.AngularJS 模块
26.AngularJS 事件
27.AngularJS HTML DOM
28.AngularJS 过滤器
29.AngularJS 控制器
30.AngularJS 指令
31.AngularJS 表达式
32.AngularJS 简介
33.AngularJS 参考手册
34.AngularJS 实例
35.AngularJS 输入验证
36.AngularJS 表单
37.AngularJS SQL
38.AngularJS 表格
39.AngularJS Http
40.AngularJS 包含
41.AngularJS Bootstrap
42.AngularJS API
43.AngularJS ng-checked 指令
44.AngularJS ng-change 指令
45.AngularJS ng-blur 指令
46.AngularJS ng-bind-template 指令
47.AngularJS ng-bind-html 指令
48.AngularJS ng-bind 指令
49.AngularJS ng-app 指令
50.AngularJS Scope(作用域)
51.AngularJS ng-model 指令
52.AngularJS ng-dblclick 指令
53.AngularJS ng-cut 指令
54.AngularJS ng-csp 指令
55.AngularJS ng-copy 指令
56.AngularJS ng-controller 指令
57.AngularJS ng-cloak 指令
58.AngularJS ng-click 指令
59.AngularJS ng-class-odd 指令
60.AngularJS ng-class-even 指令
61.AngularJS ng-class 指令
62.AngularJS ng-keyup 指令
63.AngularJS ng-keypress 指令
64.AngularJS ng-keydown 指令
65.AngularJS ng-init 指令
66.AngularJS ng-include 指令
67.AngularJS ng-if 指令
68.AngularJS ng-href 指令
69.AngularJS ng-hide 指令
70.AngularJS ng-focus 指令
71.AngularJS ng-disabled 指令
72.AngularJS ng-non-bindable 指令
73.AngularJS ng-mouseup 指令
74.AngularJS ng-mouseover 指令
75.AngularJS ng-mousemove 指令
76.AngularJS ng-mouseleave 指令
77.AngularJS ng-mouseenter 指令
78.AngularJS ng-mousedown 指令
79.AngularJS ng-model-options 指令
80.AngularJS ng-model 指令
81.AngularJS ng-list 指令
82.AngularJS ng-style 指令
83.AngularJS ng-srcset 指令
84.AngularJS ng-src 指令
85.AngularJS ng-show 指令
86.AngularJS ng-selected 指令
87.AngularJS ng-repeat 指令
88.AngularJS ng-readonly 指令
89.AngularJS ng-paste 指令
90.AngularJS ng-options 指令
91.AngularJS ng-open 指令
92.AngularJS ng-value 指令
93.AngularJS ng-switch 指令
94.AngularJS ng-submit 指令
95.AngularJS 服务(Service)
96.AngularJS Select(选择框)
97.AngularJS 动画
98.AngularJS 依赖注入