TypeScript 5 分钟快速入门
翻译：Angular 2 - TypeScript 5 分钟快速入门
原文地址：https://angular.io/docs/ts/latest/quickstart.html
Angular 2 终于发布了 beta 版。这意味着正式版应该很快就要发布了。
让我们使用 TypeScript 语言从头创建一个超级简单的 Angular 2 应用。
如果不喜欢 Typescript，你也可以使用 JavaScript 来完成这个演练。
See It Run!
官方提供了一个在线的演示，地址在这里：live example，不过你可能不能正常访问。还是让我们自己来实践一下算了。不过，可以先看一下运行的结果。
你很快就可以自己完成它。
这是最终的文件结构：
app
+app.component.ts
+boot.ts
index.html
也就是说，根目录下有一个 index.html 文件，在 app 目录下，有两个 Typescript 文件。
我们需要如下的 4 个步骤来完成它。
- 创建开发环境
- 为我们的应用编写 root component
- 启动 root component 控制主页面
- 编写主页面 (
index.html)
如果我们忽略掉那些旁支末节的说明，按照这些步骤，我们真的可以在 5 分钟之内就完成这个演练的。当然了，多数人对 why 和 how 一样感兴趣，所以，时间可能会长一点。
创建开发环境
首先，我们需要一个地方来作为项目文件夹，保存一些库文件，一些 TypeScript 配置，以及一个你喜欢的 TypeScript 编辑器。如果没有的话，其实文本编辑器就可以了。
创建项目文件夹
mkdir angular2-quickstart cd angular2-quickstart
添加需要的库
推荐使用 npm 来获取和管理我们开发所使用的库。
还没有安装 npm? 现在就安装它，我们马上就会使用，而且在这个文档中会不断使用它。这里有安装 NPM 的介绍。
添加名为 package.json 的文件，将下面的内容粘贴到文件中。:
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent "npm run tsc:w" "npm run lite" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}
想知道为什么这个写吗? 在这里有详细的说明： appendix below
使用下面的命令来安装这些 packages. 打开一个终端窗口，在 Windows 中使用 command window 就可以，然后执行下面的 npm 命令。
npm install
在安装过程中，会看到一些吓人的红色错误信息，无视它们就可以，安装将会成功，在 appendix below 有详细的说明。
配置 TypeScript
TypeScript 并不能直接在浏览器中执行，所以我们需要使用 TypeScript 编译器进行处理，我们必须对 TypeScript 编译器进行一些特殊的配置。
添加名为 tsconfig.Json 的文件到项目文件夹中，将下面的内容粘贴到文件中。
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
还是在 appendix below 中有详细的说明。
我们已经准备好了，现在开始编写一些代码。
第一个 Angular Component
Component 是 Angular 中的基础概念，一个 Component 管理一个视图 View， View 是页面中的一个片段，我们用来显示信息给用户并且响应用户的反馈。
从技术上说，Component 是一个用来控制 View 模板的类。在创建 Angular App 的时候，我们会编写大量的 Component。这是我们的第一次尝试，所以，我们会保持这个组件惊人的简单。
创建保存应用源码子文件夹
我们会将应用代码保存在名为 app 的子文件夹中，在控制台窗口中执行下面的命令创建文件夹。
mkdir app
cd app添加 Component 文件
现在，我们创建名为 app.component.ts 的文件，将下面的代码粘贴进来。
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
我们把上面的代码详细分析一下。先从最后一行的定义类开始。
The Component class
在代码的最后一行，是名为 AppComponent 的什么都没有做的类，在我们开始创建一个应用的时候，我们可以扩展这个类的属性和业务逻辑。由于我们还不需要在这个 QuickStart 中做什么，我们的 AppComponent 类目前还是空的。
Modules
Angular 应用是模块化的，其中包含一系列各有用途的独立文件。
多数应用文件导出一些东西，类似 Component，我们的 app.component 导出 AppComponent.
export class AppComponent { }
这个导出的行为将这个文件转化为了一个模块 module，文件的名称（不包含扩展名）通常作为模块的名称，根据这个规则，'app.component' 就是我们第一个模块的名称。
一个精巧的应用将会在一个组件构成的虚拟树中包含一些子组件，更加复杂的应用将会包含更多的文件和模块。
Quickstart 不复杂，我们只需要一个组件，在我们这个小应用中，组件还扮演着组织应用的角色。
模块依赖其它的模块。在 TypeScript 版本的 Angular 应用中，当我们需要其他模块提供服务的时候，我们将需要的模块导入到当前模块中。当其它的模块需要使用 AppComponent 的时候，可以使用下面的语法导入 AppComponent ，如下所示：
import {AppComponent} from './app.component'
Angular 也是模块化的，它本身是一系列库模块的集合，每个库就是一个提供服务的模块，被未来的模块所使用。
当我们需要 Angular 中提供的服务的时候，我们就从 Angular 的库模块中导入。现在我们就需要 Angular 帮助我们，以便定义我们 Component 中的元数据。
Component Metadata
在我们为 Class 提供元数据之后，它才会成为 Angular Component. Angular 需要元数据来理解如何构造视图，以及这个组件如何同应用中的其他部分进行互动。
我们使用 Angular 提供的 Component 函数来定义 Component 的元数据，通过导入 Angular 的基础库 angular2/core， 我们可以访问这个函数。
import {Component} from 'angular2/core';
在 TypeScript 中，我们将这个函数应用到类的前缀来装饰这个类，使用 @ 符号，在组件类的上方调用这个函数。
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
@Component 告诉 Angular 这个类是一个组件 Componet，配置对象传递给了 @Compoent 函数，包含两个字段，selector 和 template.
selector 指定了一个简单的 CSS 选择器，选择名为 my-app 的 HTML 元素。在 Angular 遇到页面中的 my-app 元素的时候， Angular 将会创建我们的 AppComponent 实例并显示它。
记住这个 my-app 选择器，在我们编写 index.html 的时候，我们需要这些信息。
template 属性保存伴随的模板，模板来自 HTML, 告诉 Angular 如何渲染视图，我们的视图只有一行 "My First Angular App"
现在我们需要告诉 Angular 如何加载组件。
Give it the boot
在 app 文件夹中，添加一个新文件 boot.rs，如下所示。
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
我们需要两件事情来启动应用：
- Angular 的浏览器函数 bootstrap
- 我们刚刚编写的根组件
我们把它们导入进来，然后调用 bootatrap，将 AppComponent 组件作为参数传递给 bootstrap.
可以在 appendix below 中学习为什么我们从 angular2/platform/browser 导入 bootstrap ，以及为什么要创建独立的 boot.ts 文件。
Add the index.html
Angular 在我们 index.html 中特定的位置显示我们的应用，现在是创建这个文件的时候了。
我们不会将 index.html 保存在 app/ 文件夹中，我们将它保存在上一级文件夹中，就在项目的根目录中。
cd ..
现在创建 index.html 文件，将下面的内容粘贴到文件中。
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
这个文件由三个主要的部分组成:
-
加载我们需要的脚本文件，. Angular 2 需要
angular2-polyfills.js和Rx.js. -
我们配置了 System, 然后通过它来导入和加载我们刚刚编写的启动文件。.
-
在 <body> 标记中添加了
<my-app>. 这就是我们应用执行的位置!
需要一些东西来定位和加载我们的应用模块，我们这里使用 SystemJS 做这件事。还有没有提到的方式也可以，但是 SystemJS 是最好的选择。我们喜欢使用它，它也能正常工作。
关于 SystemJS 配置的说明已经超出了今天的内容范围，我们将在 appendix below 中进行简单的介绍。
当 Angular 在 boot.ts 中调用 bootstrap 函数的时候，它将会读取 AppComponent 的元数据，发现 my-app 选择器，定位名为 my-app 的元素，然后在这个元素的标记之间加载我们的应用。
Compile and run!
打开一个终端窗口，输入下面的命令：
npm start
这个命令执行两个并行的 node 进程。
- TypeScript 编译器运行在监控模式。
- 称为 lite-server 的静态文件服务器，它会将 index.html 加载到浏览器中，当应用文件刷新的时候自动重新刷新浏览器。
稍等一下，一个浏览器的 Tab 页会被打开，然后显示出：
祝贺你！我们上路了。
如果你看到 Loading... ，而不是上述内容，查看：Browser ES6 support appendix.
Make some changes
将显示的信息修改为、 "My SECOND Angular 2 app".
TypeScript 编译器和 Lite-server 将会监控文件，它们将会检测到这些变化，自动重新编译 TypeScript 到 JavaScript ，刷新浏览器，显示修改之后的信息。
这是开发应用极好的方式。
Final structure
最终的项目结构看起来如下所示：
下面是文件的内容：
app/app.component.ts
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
app/boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent "npm run tsc:w" "npm run lite" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
Wrap Up
我们的第一个应用没有做多少事，就是一个基本 Angular 2 版本的 "Hello, World"
我们保持第一个应用足够简单：我们编写了一点 Angular 组件，添加在一些 JavaScript 库到 index.html 中，并且使用一个静态文件服务器启动了应用。这就是我们期望 “Hello,World " 所做的事情。
我们有更大的目标
好消息是更大的目标在等着我们，我们将只需要更新 package.json 来更新库。只在需要的时候，我们打开 index.html 文件来添加库或者是 css 样式表。
Appendices
最后是一系列我们涵盖内容中涉及的知识点的速览。
Appendix: Browser ES6 support
<script src="node_modules/es6-shim/es6-shim.js"></script>
Appendix: package.json
npm 是流行的包管理程序，Angular 应用开发者依赖它来获取和管理应用所使用的库。
我们在 npm 的 package.json 文件中，指定我们需要使用的包。
Angular 团队建议使用的包列在 dependencies 和 devDependencies 配置节中。
{
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}
还有一些其它的包选择，我们建议使用这些包，因为它们在一起工作的很好。现在使用它们，以后可以根据你的爱好和习惯使用其它的包。
在 package.json 中，包含一个可选的 scripts 配置节，我们可以定义一些有用的命令来执行开发和构建任务。我们已经在建议的 package.json 中包含了一些命令。
{
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent "npm run tsc:w" "npm run lite" "
}
}
我们已经看到了如何同时执行编译器和服务器的监控任务。
npm start我们可以使用下面的方式来执行 npm 脚本： npm run + script-name. 下面是三个脚本的目的:
-
npm run tsc- 执行一次 TypeScript 编译器 -
npm run tsc:w- 在监控模式执行 TypeScript 编译器; 进程保持执行。等到 TypeScript 文件变化之后，重新编译它。 -
npm run lite- 执行 lite-server, 一个轻量级的，静态文件服务器。, 由 John Papa 编写和维护，对 Angular 使用路由的应用有着杰出的支持.
Appendix: Npm errors and warnings
当执行 npm install 没有错误的时候一切都好， 会有一些 npm 警告信息，一切完全没有问题。
Appendix: TypeScript configuration
我们添加了一个 TypgeScript 配置文件 tscofnig.json 到我们的项目，在编译生成 JavaScript 的时候来指导编译器。可以从 TypeScript 官方的 TypeScript wiki 来获取关于 tsconfig.json 的详细说明。
我们使用的选项和标志都是基本的。
我们花一点时间来讨论 noImplicitAny 标志。TypeScript 开发者不同意它到底应该是 true 还是 false。这里没有正确的答案，我们以后也可以修改它。但是我们现在的选择会在大的项目中造成很大的不同，所以，它值得讨论一下。
当 noImplicitAny 标志为 false 的时候，如果编译器不能根据变量的使用来推断变量的类型，直接默认为 any 类型。这就是为什么称为 "implicitly any "，
当 noImplicitAny 标志为 true 的时候，TypeScript 编译器不能推断类型，它仍然生成 JavaScript 文件，但是报告一个错误。
在这个 QuickStart 和其它的开发示例手册中，我们将 noImplicitAny 标志设置为 false.
希望强制类型检查的开发者可能会设置 noImplicitAny 标志为 true。我们仍然可以将变量的类型设置为 any，如果这是更好的选择的话。
如果我们将 noImplicitAny 标志设置为 true，我们会得到一个显式的索引错误。如果我们觉得没有用，而是被困扰了，可以使用下面的标志来抑制它们。
"suppressImplicitAnyIndexErrors":true
Appendix: SystemJS Configuration
QuickStart 使用 SystemJS 加载应用和库模块。还有一些替代库页可以做的很好比如著名的 webpack 。SystemJS 在需要简单清楚的时候是一个好的选择。
各种模块加载器都需要进行配置，一旦文件变多，我们开始考虑生产力和性能的时候，所有的配置都变得复杂。
我们建议你精通所选择的加载器。
更多关于 SystemJS 的配置信息参考这里 here
由于以上的考虑，我们这里作了什么呢？
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
package 节点告诉 SystemJS 当遇到一个来自 app 文件中的模块请求的时候如何去做。
当应用中的一个 TypeScript 文件有类似下面的导入语句时，我们的 QuickStart 会发出一些请求。
import {AppComponent} from './app.component'
注意，from 后面的模块名称没有包含扩展名，package 的配置告诉 SystemJS 默认的扩展名是 ‘js'，JavaScript 文件。
这是说的通的，因为我们会在编译 TypeScript 到 JavaScript 之后运行应用。
在 plunker 网站上的动态演示中，我们在浏览器中即时编译，演示没有问题，但是对于开发或者生产环境就不适合。
有许多因素我们建议在运行应用之前的 build 阶段编译成 JavaScript 代码:
-
在浏览器中，我们可以看到隐藏在后面的编译警告和错误信息。We see compiler warnings and errors that are hidden from us in the browser.
-
预编译简化了模块加载过程，而且当它是一个独立的外部步骤的时候更容易检测问题.
-
由于浏览器不用浪费时间进行编译，预编译意味着更快的用户体验.
-
迭代开发过程会更快，因为我们只需要编译变化的文件。一旦应用超过一定的量，我们就会注意到区别。
-
预编译适应持续集成，测试，发布。
System.import 调用告诉 SystemJS 导入 boot 文件（boot.js ... 等到编译之后，记得吗？）boot 是我们告诉 Angular 启动应用的地方，我们同时也捕获和记录启动中的错误信息到控制台中。
其它的模块或者由 Angular 自身或者由前面的模块加载。
Appendix: boot.ts
Bootstrapping is platform-specific
我们从 angular2/platform/browser 中导入 bootstrap 函数，而不是 angular2/core, 有一些原因。
我们只在希望跨所有平台目标的时候调用 "core" ，是的，多数 Angular 应用仅仅运行在浏览器中，多数情况下我们调用这个库的函数，如果我们总是为浏览器的话，这是一个很好的选择。
但是，有可能在不同的环境下加载组件，我们可能在移动设备中使用 Apache Cordova ,我们希望在服务器渲染首页，以便提高加载性能或者便于 SEO。
这些目标需要我们从其它库中导入不同的函数。
为什么创建独立的 boot.ts 文件?
boot.ts 文件很小，仅仅是一个 QuickStart，我们可以将仅有的几行合并到 app.component 文件中，减少一些复杂度。
下面的原因使我们没有这样做：
- 很容易写好。
- 可测试
- 可重用
- 关注点分离
- 可以学到更多的导入和导出
容易
确实是额外的步骤和额外的文件，有多难呢？
我们会在更多的应用中看到独立的 boot.ts 的优点，让我们用很低的代价学到更多好的习惯。
Testability
即使我们知道我们永远不会测试这个 QuckStart ，我们也应该从一开始考虑到可测试性。
如果同一个组件文件中包含了 bootstrap 调用的话，它是很难测试的。一旦我们加载这个组件文件进行测试，bootstrap 函数就会试图加载应用到浏览器中。由于我们并不希望运行整个应用，它会报错，
将 bootstrap 功能移到独立的 boot.ts 文件中，可以避免这个错误，保持组件文件的清晰。
Reusability
在应用开发过程中，我们重构，重命名文件，如果文件中调用了 bootstrap，我们不能就不能做这些事情。我们不能移动，不能在其它应用中重用组件，不能为了更好的性能在服务区端预先渲染。
Separation of concerns
组件的职责是呈现和管理视图。
启动应用对视图来说完全无关。
Import/Export
在分离的 boot.ts 文件中，我们学到了 Angular 的基本技能：如何从模块导出，如何导入到其它模块。在学习 Angular 的过程中，我们会做大量的此类工作。