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 程式碼片段，這些程式碼片段會在您鍵入時顯示。
您可以安裝擴充套件以獲取其他程式碼片段，或為 TypeScript 定義自己的程式碼片段。有關更多資訊，請參閱 使用者定義的程式碼片段。
提示：您可以透過在 設定 檔案中將 editor.snippetSuggestions 設定為
"none"來停用程式碼片段。如果您想看到程式碼片段，可以指定它們在建議中的順序；放在最前面（"top"）、放在最後面（"bottom"），或者按字母順序內聯顯示（"inline"）。預設值為"inline"。
錯誤和警告
TypeScript 語言服務將分析您的程式是否存在編碼問題，並報告錯誤和警告。
- 在狀態列中，有一個所有錯誤和警告計數摘要。
- 您可以單擊摘要或按 ⇧⌘M (Windows、Linux Ctrl+Shift+M) 來顯示 **PROBLEMS** 面板，其中列出了所有當前錯誤。
- 如果您開啟一個有錯誤或警告的檔案，它們將顯示在文字內的行內和概覽標尺中。
要遍歷當前檔案中的錯誤或警告，您可以按 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 偵錯程式，或者 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 擴充套件。