下載VSCode
VSCode是我使用過最棒的編輯器沒有之一。
創建項目
創建目錄
首先我們創建一個項目文件夾，比如叫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 是
這將顯示在輸出窗口中（可以使用ctrl+shift+u打開），我們為你解析這個輸出然后在任務欄中高亮顯示這個問題。
你也可以使用快捷鍵cril+shift+m打開這個列表。
小提示：任務為許多豐富的行為提供支持。有關如何配置他們的更多信息，請查看“任務”話題。
跳轉標記&展示所有標記
ctrl+shift+o：列出所有定義符號關於當前打開和允許您在其中導航。
ctrl+T：讓你搜索當前項目中或文件范圍中所有定義的標記。你需要有一個typescript文件打開在編輯器中。
格式化代碼
shift+alt+f:格式化整個文檔。ctrl+k ctrl+f：格式化當前選擇的資源代碼。
JSDoc 支持
VsCode 提供了JSDoc對typescript的支持。除了語法上色，我們也會幫助你鍵入JsDoc注釋。鍵入/**他將自動插入結束符*/在jsDoc塊中輸入回車將縮進下一行並自動插入*。
JavaScript Source Map 支持
typescript調試支持JavaScript source map.在項目運行配置文件launch.json中將sourceMaps 設為true。另外，你可以制定一個typescript文件使用program屬性。
想要生成你的typescript文件的source maps，編譯--sourcemap選項或設置tsconfig.json文件中sourcemap屬性為true。行內資源地圖也是被支持的（一個內容被存儲在url而不是一個單獨的文件的資源地圖），雖然還沒有支持行內資源。
為生成文件設置一個不同的outFiles
如果被生成的（已經折疊）的JavaScript文件沒有在它源文件旁邊，你能通過在launch配置中的outfiles屬性幫助vs代碼調試器定位他們。
無論何時你在源代碼中設置了斷點，vscode 會嘗試通過在oufiles中glob模式指定的文件查找生成的資源。
隱藏生成的Javascript文件
當你使用typescript時，你通常不想看見生成的JavaScript文件在資源管理器或者搜索結果中。vscode提供了過濾器功能，files.exclude工作區設置（文件->引用->設置）你能簡單的創建一個表達式去隱藏這些生成的文件。
"**/*.js": { "when": "$(basename).ts"}
這個模式將匹配任何JavaScript文件(**/*.js)，但僅僅是當一個同名的typescript文件存在。文件管理器將會不在展示生成的JavaScript資源如果被編輯在相同的位置。
想要排除從.ts和.tsx資源文件生成的JavaScript文件，使用下面表達式：
"**/*.js": { "when": "$(basename).ts" },
"**/**.js": { "when": "$(basename).tsx" }
這是一個小技巧，搜索glob模式被使用是關鍵，上面的設置使用兩種不同的glob模式來提供兩個唯一鍵，但搜索結果相同。
混合的typscript和JavaScript項目
現在可以有一個混淆的ts和js項目了，想要讓JavaScript在ts項目中存在，你能設置allowJs屬性為true在tsconfig.json中。
小提示：tsc編譯器不會自動檢測jsconfig.json文件的存在。使用-p參數去讓tsc使用你的jsconfig.json文件。例子，tsc -p jsconfig.json。
使用新版本的typescript
vscode 附帶了最近穩定版本的typescript語言服務，他可能與安裝在當前計算機的和工作區的typescript版本不匹配。當你瀏覽一個ts或js文件的時候，typescript 當前有效版本展示在狀態欄上。
當vscode檢測到tsc版本與活動的ts語言服務版本不同時，一個消息會展示出來“version mismatch! global tsc(2.1.5)!=vscode's language service(2.2.1).inconsistent compiler errors might occur".這個消息是友好的，目的是提醒用戶編譯器與活動的語言服務可能的差異。
你可以隱藏這個檢查使用工作區設置typescript.check.tscVersion,如果你點擊了詳細廣告條中Dont Check Again ，會設置你的用戶設置fasle。
"typescript.check.tscVersion": false
另外的選項是在你的工作區中安裝匹配的typescript版本（npm install --save-dev typscript），或者當前電腦全局安裝（npm install -g typescript）。我們建議本地安裝typescript從而避免與其他ts項目交互問題。
小提示：逍遙得到指定版本的ts，使用@version。舉個ts2.2.1的例子,你將使用npm install --save-dev typescript@2.2.1.想要預覽下一版本的ts，運行npm install --save-dev typescript@next.
當vscode在后續編譯版本中更新typescript語言服務時，你可能再次看到不匹配的消息，讓你更新你的typescript版本。
想要默認使用一個不同版本的typescript版本，在你的用戶設置中配置typescript.tsdk，指出一個包含tsserver.js文件的目錄。你能使用npm list -g typescript命令找到typescript安裝位置。tsserver.js文件通常在lib文件夾中。
舉個例子
{
"typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib"
}
如果你的工作區有一個特殊的typescrit版本，你能在工作區的ts版本和vscode默認使用的版本切換，方法是在工作區中打開typescript或js文件，然后單擊狀態欄中的typescript版本號。一個消息框將會出現，詢問你要使用那個版本的ts代碼。
切換ts版本或改變typescript.tsdk文件之后，必須重啟vscode才會生效。你能切換回vscode附帶的ts版本。
Typescript 擴展
vscode提供了許多ts開箱即用的特性。除了內置的內容外，你可以安裝擴展以實現更強大的功能
