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
另一個選項是在您的專案中本機安裝 TypeScript 編譯器 (npm install --save-dev typescript)，其優點是可以避免與您可能擁有的其他 TypeScript 專案發生互動。
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
IntelliSense 會向您顯示智慧程式碼完成、hover 資訊和簽章說明，讓您可以更快且更正確地撰寫程式碼。
VS Code 為個別 TypeScript 檔案以及 TypeScript tsconfig.json 專案提供 IntelliSense。
Hover 資訊
將滑鼠懸停在 TypeScript 符號上方，即可快速查看其類型資訊和相關文件
您也可以使用 ⌘K ⌘I (Windows、Linux Ctrl+K Ctrl+I) 鍵盤快速鍵，在目前游標位置顯示 hover 資訊。
簽章說明
當您撰寫 TypeScript 函式呼叫時，VS Code 會顯示有關函式簽章的資訊，並醒目提示您目前正在完成的參數
當您在函式呼叫中輸入 ( 或 , 時，會自動顯示簽章說明。使用 ⇧⌘Space (Windows、Linux Ctrl+Shift+Space) 手動觸發簽章說明。
程式碼片段
除了智慧程式碼完成之外，VS Code 也包含基本的 TypeScript 程式碼片段，會在您輸入時建議。
您可以安裝擴充功能以取得其他程式碼片段，或為 TypeScript 定義您自己的程式碼片段。請參閱 使用者定義程式碼片段 以取得更多資訊。
提示：您可以透過在您的 設定 檔案中將 editor.snippetSuggestions 設定為
"none"來停用程式碼片段。如果您想要查看程式碼片段，您可以指定相對於建議的順序；在頂端 ("top")、在底部 ("bottom") 或內嵌依字母順序排列 ("inline")。預設值為"inline"。
錯誤和警告
TypeScript 語言服務將分析您的程式是否有程式碼問題，並報告錯誤和警告
- 在狀態列中，會有所有錯誤和警告計數的摘要。
- 您可以按一下摘要或按下 ⇧⌘M (Windows、Linux Ctrl+Shift+M) 以顯示問題面板，其中包含所有目前錯誤的清單。
- 如果您開啟包含錯誤或警告的檔案，它們將會與文字內嵌呈現，並顯示在概觀尺規中。
若要在目前檔案中迴圈瀏覽錯誤或警告，您可以按下 F8 或 ⇧F8 (Windows、Linux Shift+F8)，這將顯示一個內嵌區域，詳細說明問題和可能的程式碼動作 (如果有的話)
程式碼導覽
程式碼導覽可讓您快速導覽 TypeScript 專案。
- 前往定義 F12 - 前往符號定義的原始碼。
- 查看定義 ⌥F12 (Windows Alt+F12、Linux Ctrl+Shift+F10) - 帶出一個「查看」視窗，顯示符號的定義。
- 前往參考 ⇧F12 (Windows、Linux Shift+F12) - 顯示符號的所有參考。
- 前往類型定義 - 前往定義符號的類型。對於類別的執行個體，這會顯示類別本身，而不是執行個體定義的位置。
- 前往實作 ⌘F12 (Windows、Linux Ctrl+F12) - 前往介面或抽象方法的實作。
您可以使用命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 中的前往符號命令透過符號搜尋進行導覽。
- 前往檔案中的符號 ⇧⌘O (Windows、Linux Ctrl+Shift+O)
- 前往工作區中的符號 ⌘T (Windows、Linux Ctrl+T)
格式化
VS Code 包含 TypeScript 格式器，可使用合理的預設值提供基本程式碼格式化。
使用 typescript.format.* 設定 來設定內建格式器，例如讓大括號出現在自己的行上。或者，如果內建格式器造成阻礙，請將 "typescript.format.enable" 設定為 false 以停用它。
如需更專業的程式碼格式化樣式，請嘗試從 VS Code Marketplace 安裝其中一個格式化擴充功能。
重構
VS Code 包含一些方便的 TypeScript 重構，例如提取函式和提取常數。只需選取您要提取的原始碼，然後按一下邊界中的燈泡或按下 (⌘. (Windows、Linux Ctrl+.)) 以查看可用的重構。
請參閱 重構 TypeScript 以取得更多有關重構的資訊，以及如何為個別重構設定鍵盤快速鍵。
重新命名
最簡單的重構之一是重新命名方法或變數。按下 F2 以跨您的 TypeScript 專案重新命名游標下的符號
偵錯
VS Code 隨附適用於 TypeScript 的絕佳偵錯支援，包括對來源對應的支援。設定中斷點、檢查物件、導覽呼叫堆疊，以及在偵錯主控台中執行程式碼。請參閱 偵錯 TypeScript 和整體 偵錯主題 以瞭解更多資訊。
偵錯用戶端
您可以使用瀏覽器偵錯工具 (例如 內建的 Edge 和 Chrome 偵錯工具) 或 Debugger for Firefox) 偵錯您的用戶端程式碼。
偵錯伺服器端
在 VS Code 中使用內建偵錯工具偵錯 Node.js。設定很容易，並且有一個 Node.js 偵錯教學課程 可協助您。
Linters
Linters 提供可疑程式碼的警告。雖然 VS Code 不包含內建 TypeScript linter，但 Marketplace 中提供了 TypeScript linter 擴充功能。
ESLint 是一個流行的 linter，也支援 TypeScript。ESLint 擴充功能將 ESLint 整合到 VS Code 中，讓您可以在編輯器中直接看到 linting 錯誤，甚至可以使用快速修正快速修正許多錯誤。ESLint 外掛程式指南詳細說明如何為您的 TypeScript 專案設定 ESLint。
TypeScript 擴充功能
VS Code 開箱即用，為 TypeScript 提供了許多功能。除了內建功能之外，您還可以安裝擴充功能以獲得更多功能。
提示：按一下上面的擴充功能圖格以閱讀說明和評論，以決定哪個擴充功能最適合您。在 Marketplace 中查看更多資訊。
後續步驟
若要瞭解更多資訊，請參閱
- TypeScript 教學課程 - 在 VS Code 中建立簡單的 Hello World TypeScript。
- 編輯 TypeScript - TypeScript 的特定編輯功能。
- 重構 TypeScript - 來自 TypeScript 語言服務的實用重構。
- 編譯 TypeScript - 將 TypeScript 編譯為 JavaScript 目標版本。
- 偵錯 TypeScript - 瞭解如何使用 VS Code 偵錯伺服器和用戶端 TypeScript。
常見問題
我可以使用 VS 2022 隨附的 TypeScript 版本嗎？
否，Visual Studio 2019 和 2022 隨附的 TypeScript 語言服務與 VS Code 不相容。您需要從 npm 安裝個別版本的 TypeScript。
我如何在 VS Code 中使用最新的 TypeScript beta 版本？
在 VS Code 中試用最新 TypeScript 功能的最簡單方法是安裝 JavaScript 和 TypeScript Nightly 擴充功能。