讓我們從零開始，使用Typescript構建一個超級簡單的 AngularJs 2應用。

先跑一個DEMO

運行這個 DEMO先來感受一下 AngularJS2 的應用。

下面是這個應用的文件結構

angular2-app|_ app| |_ app.component.ts| |_ main.ts|_ index.html|_ license.md

總結來說就是一個 index.html 文件和兩個在 app 文件下的 Typescript 文件， 我們可以hold住！

下面我們將一步一步的構建這樣的一個程序：

1. 配置我們的開發環境
2. 編寫 Angular 初始化組件
3. 引導它控制我們主要的 index.html 頁面
4. 編寫index.html 頁面

開發環境搭建

建立文件夾

mkdir angular2-appcd  angular2-app

配置TYPESCRIPT

需要通過一些特殊的設置來指導Typesript進行編譯。
新建一個 tsconfig.json 文件，放于項目根目錄下，并輸入一下配置

{ "compilerOptions": {  "target": "es5",  "module": "system",  "moduleResolution": "node",  "sourceMap": true,  "emitDecoratorMetadata": true,  "experimentalDecorators": true,  "removeComments": false,  "noImplicitAny": false }, "exclude": [  "node_modules",  "typings/main",  "typings/main.d.ts" ]}

我們稍后在附錄中會詳細講解這個 tsconfig.json

TYPESCRIPT TYPINGS

有很多Javascript的庫，繼承了一些 Javascript的環境變量以及語法， Typescript編譯器并不能原生的支持這些。 所以我們使用 Typescript 類型定義文件