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，您可以透過以下方式在電腦上全域安裝 TypeScript (-g)：
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 符號上，即可快速查看其類型資訊和相關文件
您也可以使用鍵盤快速鍵在目前的游標位置顯示 hover 資訊：⌘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 市集安裝其中一個格式化擴充功能。
重構
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 偵錯教學課程可協助您。
程式碼檢查器
程式碼檢查器會針對可疑的程式碼提供警告。雖然 VS Code 不包含內建的 TypeScript 程式碼檢查器，但市集中有可用的 TypeScript 程式碼檢查器擴充功能。
ESLint 是一個熱門的程式碼檢查器，也支援 TypeScript。ESLint 擴充功能將 ESLint 整合到 VS Code 中，因此您可以在編輯器中直接看到程式碼檢查錯誤，甚至可以使用快速修正快速修正其中許多錯誤。ESLint 外掛程式指南詳細說明如何為您的 TypeScript 專案設定 ESLint。
TypeScript 擴充功能
VS Code 開箱即用地為 TypeScript 提供許多功能。除了內建功能之外，您還可以安裝擴充功能以獲得更強大的功能。
提示：按一下上方的擴充功能磚以閱讀描述和評論，以決定哪個擴充功能最適合您。如需更多資訊，請參閱 市集。
後續步驟
若要深入了解，請參閱
- 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 擴充功能。