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）為你提供智慧程式碼補全、懸停資訊和簽名幫助，讓你能夠更快速、更準確地編寫程式碼。
VS Code 為單個 TypeScript 檔案以及 TypeScript tsconfig.json 專案提供智慧感知。
懸停資訊
將滑鼠懸停在 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) 來顯示包含所有當前錯誤列表的問題面板。
- 如果你開啟一個有錯誤或警告的檔案，它們將以內聯方式顯示在文字中和概覽標尺中。
要遍歷當前檔案中的錯誤或警告，你可以按 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 提供了強大的除錯支援，包括對 sourcemap 的支援。可以設定斷點、檢查物件、瀏覽呼叫堆疊並在除錯控制檯中執行程式碼。請參閱除錯 TypeScript和除錯總主題以瞭解更多資訊。
除錯客戶端
你可以使用瀏覽器偵錯程式來除錯你的客戶端程式碼，例如內建的 Edge 和 Chrome 偵錯程式，或者 Debugger for Firefox。
除錯伺服器端
使用內建偵錯程式在 VS Code 中除錯 Node.js。設定很簡單，並且有一篇Node.js 除錯教程可以幫助你。
Linter
Linter 會對可疑程式碼提供警告。雖然 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 and TypeScript Nightly 擴充套件。