下載TypeScript
在CMD（Windows系統）或者終端（macOS系統）中輸入一下命令：
npm install -g typescript
下載VSCode
VSCode是我使用過最棒的編輯器沒有之一，比Sublime Text還有優秀。
創建項目
創建目錄
首先我們創建一個項目文件夾，比如叫ts_vscode，然后創建一些主要目錄，在VSCode中打開項目
目錄結構：
ts_vscode/
└─src/
├─ css/
├─ fonts/
└─ images/
在ts_vscode 中 按shift 右鍵 命令行中打開。 輸入 code . 打開項目
創建package.json
使用命令npm init來創建package.json文件，一般默認就可以，具體詳情可以看這里。
目錄結構：
ts_vscode/
├─ src/
│ ├─ css/
│ ├─ fonts/
│ └─ images/
└─ package.json
創建tsconfig.json
使用tsc --init命令就可以快速創建一個tsconfig.json文件，關於tsconfig.json的屬性描述請訪問這里。
目錄結構：
ts_vscode/
├─ src/
│ ├─ css/
│ ├─ fonts/
│ └─ images/
├─ package.json └─ tsconfig.json安裝項目依賴和開發依賴
我們的這個項目使用jQuery和Bootstrap來做，因此我們使用npm來安裝：
npm install jquery bootstrap --save 我們的項目使用了TypeScript來開發，因此我們需要下載相對應的聲明文件，關於聲明文件請訪問這里。安裝聲明文件命令：
npm install @types/jquery @types/bootstrap -save-dev
創建index.html
在ts_vscode目錄下創建index.html，index.html文件中放入下面的代碼：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TypeScript with VSCode</title> <!-- Bootstrap --> <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <link rel="stylesheet" href="./src/css/index.css"> </head> <body> <h1 class="text-center"></h1> <div class="container"> <div class="row show-grid"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row show-grid"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row show-grid"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row show-grid"> <div class="col-md-6"> <button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> </button> </div> <div class="col-md-6"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button> </div> </div> </div> <!-- /.modal --> <!-- js --> <script src="./node_modules/jquery/dist/jquery.min.js"></script> <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="./src/index.js"></script> </body> </html>
目錄結構：
ts_vscode/
├─ src/
│ ├─ css/
│ ├─ fonts/
│ └─ images/
├─ index.html
├─ package.json └─ tsconfig.json 創建index.ts文件並編寫TS代碼
在src目錄下創建index.ts文件。我們使用TS編寫一個類，並使用這個類的方法向index.html的h1標簽中插入一句話，代碼如下：
class Main { constructor() { } name: string; show(text: string): void { let $ele: JQuery = $("h1"); $ele.text(text); } } let main = new Main(); main.name = "Hello TypeScript"; main.show(main.name);
目錄結構：
ts_vscode/
├─ src/
│ ├─ css/
│ ├─ fonts/
│ ├─ images/
│ └─ index.ts
├─ index.html
├─ package.json └─ tsconfig.json 編譯和啟動項目
我們使用package.json中的scripts來編譯和啟動項目。
編譯比較簡單，tsc命令就可以編譯項目，tsc -w命令監控並自動編譯，編譯會使用tsconfig.json中的配置項。
啟動項目我們安裝live-server，來幫助我們啟動一個服務器環境，live-server非常輕便且帶有自動刷新功能，我們使用npm全局安裝即可：
npm install -g live-server 安裝完畢后，我們修改package.json中的scripts如下：
"scripts": { "test": "tsc -w & live-server" } 最終目錄結構：
最后我們在終端中輸入npm t就可以啟動項目了.
npm t 是
