在 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
讓我們從一個簡單的 Node.js "Hello World" 範例開始。建立一個新資料夾 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 (Transpiling TypeScript) 以了解 TypeScript 語言服務的其他功能，以及如何使用工作 (tasks) 直接從 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+.) 會彈出「快速修復」選單，您可以在其中選取移除無法存取的程式碼修復選項。
此外，程式碼動作小工具：包含附近的快速修復 (editor.codeActionWidget.includeNearbyQuickFixes) 是一項預設啟用的設定，這讓您無論游標在哪一行，只要按下 ⌘. (Windows, Linux Ctrl+.) (指令 ID editor.action.quickFix)，即可啟動該行中最靠近的快速修復。
此指令會反白顯示將透過快速修復進行重構或修復的原始碼。一般的程式碼動作與非修復性的重構仍然可以在游標位置啟動。
偵錯
VS Code 內建 TypeScript 偵錯支援。為了支援結合執行中的 JavaScript 程式碼來對 TypeScript 進行偵錯，VS Code 依賴 來源對應表 (source maps)，讓偵錯器能在原始 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 進行偵錯 (Debugging 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。請開啟來源對應表並重新建置您的專案。