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 編譯器會報錯 'error TS2322: Type '2' is not assignable to type 'string'。您可以在 VS Code 中看到型別檢查錯誤，包括編輯器中（帶有懸停資訊的紅色波浪線）和“問題”面板中 (⇧⌘M (Windows, Linux Ctrl+Shift+M))。[ts] 字首表明此錯誤來自 TypeScript 語言服務。
快速修復
TypeScript 語言服務擁有一套強大的診斷功能，用於查詢常見的編碼問題。例如，它可以分析您的原始碼並檢測不可達程式碼，這些程式碼在編輯器中會顯示為灰色。如果您將滑鼠懸停在原始碼行上，您會看到一個解釋性的懸停提示，如果您將游標放在該行上，您會看到一個快速修復燈泡。
單擊燈泡或按 ⌘. (Windows, Linux Ctrl+.) 會調出快速修復選單，您可以在其中選擇 Remove unreachable code 修復。
此外，Code Action Widget: Include Nearby Quick Fixes (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。
偵錯程式將啟動一個會話，執行您的程式碼，並在 Debug 控制檯面板中顯示“Hello World”訊息。
在 helloworld.ts 中，透過單擊編輯器的左側裝訂線來設定一個斷點。如果設定了斷點，您將看到一個紅點。再次按 F5。執行將在命中斷點時停止，您將在 **Run and Debug** 檢視中看到除錯資訊，如變數值和呼叫堆疊 (⇧⌘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。請啟用源對映並重新構建您的專案。