Visual Studio Code 中的 TypeScript 教程
TypeScript 是 JavaScript 的一個型別化超集，可以編譯成純 JavaScript。它提供了類、模組和介面，以幫助你構建健壯的元件。
安裝 TypeScript 編譯器
Visual Studio Code 包含 TypeScript 語言支援，但不包含 TypeScript 編譯器 tsc。你需要全域性或在工作區中安裝 TypeScript 編譯器，以便將 TypeScript 原始碼轉譯為 JavaScript (tsc HelloWorld.ts)。
安裝 TypeScript 最簡單的方法是透過 npm，即 Node.js 包管理器。如果你已安裝 npm，可以透過以下方式在你的計算機上全域性安裝 (-g) TypeScript
npm install -g typescript
你可以透過檢查版本來測試安裝。
tsc --version
Hello World
我們從一個簡單的 Hello World Node.js 示例開始。建立一個新資料夾 HelloWorld 並啟動 VS Code。
mkdir HelloWorld
cd HelloWorld
code .
在檔案資源管理器中，建立一個名為 helloworld.ts 的新檔案。
現在新增以下 TypeScript 程式碼。你會注意到 TypeScript 的關鍵字 let 和 string 型別宣告。
let message: string = 'Hello World';
console.log(message);
要編譯你的 TypeScript 程式碼，你可以開啟整合終端（⌃`（Windows、Linux Ctrl+`））並輸入 tsc helloworld.ts。這將會編譯並建立一個新的 helloworld.js JavaScript 檔案。
如果你安裝了 Node.js，可以執行 node helloworld.js。
如果你開啟 helloworld.js，你會發現它與 helloworld.ts 並沒有太大區別。型別資訊已被移除，let 變成了 var。
var message = 'Hello World';
console.log(message);
IntelliSense
在 VS Code 中，你可以看到語法高亮和括號匹配等語言特性。當你在編輯器中輸入時，你可能已經注意到了 IntelliSense，這是由 VS Code 和 TypeScript 語言服務提供的智慧程式碼補全和建議功能。下面你可以看到 console 的方法。
當你選擇一個方法時，你會得到引數幫助，並且可以隨時透過懸停獲取資訊。
tsconfig.json
在本教程中，到目前為止你一直依賴 TypeScript 編譯器的預設行為來編譯 TypeScript 原始碼。你可以透過新增一個 tsconfig.json 檔案來修改 TypeScript 編譯器的選項，該檔案定義了 TypeScript 的專案設定，例如編譯器選項和應包含的檔案。
重要提示：要在本教程的其餘部分使用 tsconfig.json，請在不帶輸入檔案的情況下呼叫 tsc。TypeScript 編譯器知道查詢你的 tsconfig.json 檔案以獲取專案設定和編譯器選項。
新增一個簡單的 tsconfig.json，將選項設定為編譯到 ES5 並使用 CommonJS 模組。
{
"compilerOptions": {
"target": "ES5",
"module": "CommonJS"
}
}
在編輯 tsconfig.json 時，IntelliSense (⌃Space (Windows, Linux Ctrl+Space)) 會一路為你提供幫助。
預設情況下，如果未包含 files 屬性，TypeScript 會包含當前資料夾及其子資料夾中的所有 .ts 檔案，因此我們不需要明確列出 helloworld.ts。
更改構建輸出
在較大的專案中，將生成的 JavaScript 檔案與 TypeScript 原始檔放在同一個資料夾中會很快變得混亂，因此你可以使用 outDir 屬性為編譯器指定輸出目錄。
{
"compilerOptions": {
"target": "ES5",
"module": "CommonJS",
"outDir": "out"
}
}
刪除 helloworld.js 並執行不帶任何選項的命令 tsc。你會看到 helloworld.js 現在被放置在了 out 目錄中。
請參閱編譯 TypeScript，瞭解有關 TypeScript 語言服務的其他功能，以及如何使用任務直接從 VS Code 執行構建。
錯誤檢查
TypeScript 透過強型別檢查幫助你避免常見的程式設計錯誤。例如，如果你將一個數字賦給 message，TypeScript 編譯器會抱怨“錯誤 TS2322：型別 '2' 不能分配給型別 'string'”。你可以在 VS Code 的編輯器（帶有懸停資訊的紅色波浪線）和問題面板（⇧⌘M（Windows、Linux Ctrl+Shift+M））中看到型別檢查錯誤。[ts] 字首讓你知道此錯誤來自 TypeScript 語言服務。
快速修復
TypeScript 語言服務擁有一套強大的診斷功能，可以發現常見的編碼問題。例如，它可以分析你的原始碼並檢測無法訪問的程式碼，這些程式碼在編輯器中會顯示為灰色。如果你將滑鼠懸停在該行原始碼上，你會看到一個解釋性的懸停提示；如果你將游標放在該行上，你會得到一個快速修復燈泡圖示。
點選燈泡或按 ⌘. (Windows、Linux Ctrl+.) 會彈出快速修復選單，你可以在其中選擇移除無法訪問的程式碼修復。
此外，程式碼操作小部件：包括附近的快速修復 (editor.codeActionWidget.includeNearbyQuickFixes) 是一個預設啟用的設定，它將從 ⌘. (Windows, Linux Ctrl+.)（命令 ID editor.action.quickFix）啟用一行中最近的快速修復，無論你的游標在該行的哪個位置。
該命令會突出顯示將透過快速修復進行重構或修復的原始碼。普通程式碼操作和非修復重構仍可在游標位置啟用。
除錯
VS Code 內建了對 TypeScript 除錯的支援。為了支援除錯 TypeScript 並結合執行 JavaScript 程式碼，VS Code 依賴源對映，以便偵錯程式在原始 TypeScript 原始碼和執行中的 JavaScript 之間進行對映。你可以在 tsconfig.json 中設定 "sourceMap": true，在構建過程中建立源對映。
{
"compilerOptions": {
"target": "ES5",
"module": "CommonJS",
"outDir": "out",
"sourceMap": true
}
}
透過執行 tsc 重新構建，你現在應該會在 out 目錄中的 helloworld.js 旁邊看到一個 helloworld.js.map 檔案。
在編輯器中開啟 helloworld.ts，按 F5。如果你安裝了其他偵錯程式擴充套件，你需要從下拉選單中選擇 Node.js。
偵錯程式將啟動一個會話，執行你的程式碼，並在除錯控制檯面板中顯示“Hello World”訊息。
在 helloworld.ts 中，透過點選編輯器左側的邊欄來設定一個斷點。如果斷點設定成功，你會看到一個紅色的圓圈。再次按 F5。當執行到斷點時會暫停，你將能夠在執行和除錯檢視（⇧⌘D（Windows、Linux Ctrl+Shift+D））中看到變數值和呼叫堆疊等除錯資訊。
請參閱除錯 TypeScript，瞭解更多關於 VS Code 內建的 TypeScript 除錯支援，以及如何為你的專案場景配置偵錯程式。
後續步驟
本教程是對使用 VS Code 進行 TypeScript 開發的快速介紹。請繼續閱讀，以瞭解更多關於使用 VS Code 編譯和除錯 TypeScript 的支援。
- 編譯 TypeScript - 使用 VS Code 強大的任務系統來編譯 TypeScript。
- 編輯 TypeScript - TypeScript 的特定編輯功能。
- 重構 TypeScript - TypeScript 語言服務提供的有用重構。
- 除錯 TypeScript - 為您的 TypeScript 專案配置偵錯程式。
常見問題
無法啟動程式，因為找不到對應的 JavaScript
你可能沒有在你的 tsconfig.json 中設定 "sourceMap": true，導致 VS Code Node.js 偵錯程式無法將你的 TypeScript 原始碼對映到正在執行的 JavaScript。請開啟源對映並重新構建你的專案。