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
讓我們從一個簡單的 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
IntelliSense 為您提供智慧型程式碼完成、懸停資訊與簽章輔助，讓您能更快速且正確地撰寫程式碼。
VS Code 為個別的 TypeScript 檔案以及 TypeScript tsconfig.json 專案皆提供了 IntelliSense。
懸停資訊
將滑鼠懸停在 TypeScript 符號上，即可快速檢視其型別資訊與相關文件。
您也可以使用鍵盤快速鍵 ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) 來顯示目前游標位置的懸停資訊。
簽章輔助
當您撰寫 TypeScript 函式呼叫時，VS Code 會顯示關於函式簽章的資訊，並反白顯示您目前正在填寫的參數。
當您在函式呼叫內輸入 ( 或 , 時，系統會自動顯示簽章輔助。使用 ⇧⌘Space (Windows, Linux Ctrl+Shift+Space) 可手動觸發簽章輔助。
程式碼片段
除了智慧型程式碼完成外，VS Code 還包含基本的 TypeScript 程式碼片段 (snippets)，會在您輸入時提供建議。
您可以安裝擴充功能來取得額外的程式碼片段，或為 TypeScript 定義您自己的片段。詳細資訊請參閱使用者定義的程式碼片段。
提示：您可以透過在設定檔中將 editor.snippetSuggestions 設定為
"none"來停用程式碼片段。如果您希望看到程式碼片段，可以指定它們相對於建議的順序：置頂 ("top")、置底 ("bottom") 或內嵌並按字母順序排列 ("inline")。預設值為"inline"。
錯誤與警告
TypeScript 語言服務會分析您的程式以找出程式碼問題，並回報錯誤與警告。
- 在狀態列中，會有所有錯誤與警告數量的摘要。
- 您可以點擊摘要或按下 ⇧⌘M (Windows, Linux Ctrl+Shift+M) 來顯示問題 (PROBLEMS) 面板，其中包含所有目前錯誤的清單。
- 如果您開啟含有錯誤或警告的檔案，它們會直接顯示在文字旁以及概覽尺標中。
若要在目前檔案中循環瀏覽錯誤或警告，您可以按下 F8 或 ⇧F8 (Windows, Linux Shift+F8)，這將顯示一個內嵌區域，詳細說明問題並提供可能的程式碼動作 (若可用)。
程式碼導覽
程式碼導覽功能讓您能快速在 TypeScript 專案中瀏覽。
- 前往定義 (Go to Definition) F12 - 前往符號定義的原始程式碼。
- 預覽定義 (Peek Definition) ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - 彈出預覽視窗以顯示符號定義。
- 前往參考 (Go to References) ⇧F12 (Windows, Linux Shift+F12) - 顯示該符號的所有參考。
- 前往型別定義 (Go to Type Definition) - 前往定義符號的型別。對於類別實例，此動作將顯示該類別本身，而非定義實例的位置。
- 前往實作 (Go to Implementation) ⌘F12 (Windows, Linux Ctrl+F12) - 前往介面或抽象方法的實作。
您可以使用 命令選擇區 (Command Palette) (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中的 前往符號 (Go to Symbol) 指令，透過符號搜尋進行導覽。
- 前往檔案中的符號 (Go to Symbol in File) ⇧⌘O (Windows, Linux Ctrl+Shift+O)
- 前往工作區中的符號 (Go to Symbol in Workspace) ⌘T (Windows, Linux Ctrl+T)
格式化
VS Code 包含一個 TypeScript 格式化程式，可提供具有合理預設值的基礎程式碼格式化。
使用 js/ts.format.* 設定來配置內建的格式化程式，例如讓大括號出現在獨立的一行。或者，如果內建格式化程式造成干擾，請將 "js/ts.format.enable" 設定為 false 以停用它。
若需要更專業的程式碼格式化樣式，請嘗試從 VS Code 市集中安裝格式化擴充功能。
重構
VS Code 包含一些便利的 TypeScript 重構功能，例如擷取函式 (Extract function) 和擷取常數 (Extract constant)。只需選取您想要擷取的原始程式碼，然後點擊邊欄中的燈泡圖示，或按下 (⌘. (Windows, Linux Ctrl+.)) 即可查看可用的重構選項。
關於重構的詳細資訊以及如何為個別重構設定鍵盤快速鍵，請參閱重構 TypeScript。
重新命名
最簡單的重構之一是重新命名方法或變數。按下 F2 即可在整個 TypeScript 專案中重新命名游標所在的符號。
偵錯
VS Code 對 TypeScript 提供極佳的偵錯支援，包括對 sourcemaps 的支援。設定中斷點、檢查物件、瀏覽呼叫堆疊，並在偵錯主控台中執行程式碼。詳細資訊請參閱偵錯 TypeScript 及整體的偵錯主題。
用戶端偵錯
您可以使用瀏覽器偵錯工具來對用戶端程式碼進行偵錯，例如內建的 Edge 與 Chrome 偵錯工具，或是 Debugger for Firefox。
伺服器端偵錯
使用內建偵錯工具在 VS Code 中偵錯 Node.js。設定過程簡單，並有Node.js 偵錯教學課程為您提供協助。
檢查工具 (Linters)
Lint 工具 (Linters) 可為看起來可疑的程式碼提供警告。雖然 VS Code 沒有內建 TypeScript linter，但您可以在市集中找到 TypeScript 的 linter 擴充功能。
ESLint 是一個熱門的 linter，也支援 TypeScript。ESLint 擴充功能將 ESLint 整合進 VS Code 中，讓您可以直接在編輯器中看到 linting 錯誤，甚至透過快速修復 (Quick Fixes) 快速修正許多錯誤。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 and TypeScript Nightly 擴充功能。