編輯 TypeScript

Visual Studio Code 對 TypeScript 擁有極佳的編輯支援。本文深入探討 VS Code 內建的編輯與程式語言功能。如果您想了解 VS Code 的一般編輯功能（如鍵盤快速鍵、多重游標、搜尋以及尋找與取代），請參閱基本編輯。

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 定義您自己的程式碼片段。如需詳細資訊，請參閱使用者定義的程式碼片段。

內嵌提示 (Inlay hints)

內嵌提示 (Inlay hints) 在原始程式碼中加入額外的內嵌資訊，以協助您理解程式碼的功能。

參數名稱內嵌提示會在函式呼叫中顯示參數名稱。

這能協助您一眼看懂每個引數的含義，對於接收布林值標記或容易混淆的參數的函式特別有用。

若要啟用參數名稱提示，請設定 js/ts.inlayHints.parameterNames.enabled。共有三個可能的值：

• none — 停用參數內嵌提示。
• literals — 僅對字面值（字串、數字、布林值）顯示內嵌提示。
• all — 對所有引數顯示內嵌提示。

變數型別內嵌提示會顯示沒有明確型別註解的變數型別。

設定：js/ts.inlayHints.variableTypes.enabled

屬性型別內嵌提示會顯示沒有明確型別註解的類別屬性型別。

設定：js/ts.inlayHints.propertyDeclarationTypes.enabled

參數型別提示會顯示隱含型別參數的型別。

設定：js/ts.inlayHints.parameterTypes.enabled

回傳型別內嵌提示會顯示沒有明確型別註解的函式回傳型別。

設定：js/ts.inlayHints.functionLikeReturnTypes.enabled

參考 CodeLens

TypeScript 參考 CodeLens 會以內嵌方式顯示類別、介面、方法、屬性與匯出物件的參考計數。

您可以在使用者設定檔案中設定 "js/ts.referencesCodeLens.enabled": true 來啟用此功能。

點擊參考計數即可快速瀏覽參考清單。

實作 CodeLens

TypeScript 實作 CodeLens 會顯示介面的實作者數量。

您可以在設定中將 "js/ts.implementationsCodeLens.enabled": true 來啟用此功能。

如同參考 CodeLens，您可以點擊實作計數來快速瀏覽所有實作的清單。

自動匯入

自動匯入功能透過協助您尋找可用符號並自動為其新增匯入敘述，來加速程式設計。

只要開始輸入，即可看到目前專案中所有可用 TypeScript 符號的建議。

如果您選擇了來自其他檔案或模組的建議，VS Code 將自動為其新增匯入。在此範例中，VS Code 在檔案頂端為 Hercules 新增了匯入。

您可以透過設定 "js/ts.suggest.autoImports": false 來停用自動匯入。

貼上時加入匯入內容

當您在編輯器之間複製並貼上程式碼時，VS Code 可在貼上時自動加入匯入內容。當您貼上包含未定義符號的程式碼時，會顯示一個貼上控制項，讓您選擇以純文字貼上或加入匯入內容。

此功能預設為啟用，您可以透過切換 setting(js/ts.updateImportsOnPaste.enabled) 設定來停用它。

您可以透過設定 editor.pasteAs.preferences 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定，將「貼上時自動匯入」設為預設行為，而不顯示貼上控制項。將 text.updateImports.jsts 或 text.updateImports 加入其中，即可在貼上時一律新增匯入。

JSX 與自動關閉標籤

VS Code 的 TypeScript 功能也適用於 JSX。若要在 TypeScript 中使用 JSX，請將副檔名由一般的 *.ts 改為 *.tsx。

VS Code 也包含 JSX 專屬功能，例如在 TypeScript 中自動關閉 JSX 標籤。

將 "js/ts.autoClosingTags.enabled" 設為 false 即可停用 JSX 標籤自動關閉功能。

JSDoc 支援

VS Code 的 TypeScript IntelliSense 可理解許多標準的 JSDoc 註解，並利用它們在建議、懸停資訊及簽章說明中顯示型別資訊與文件。

請記住，在 TypeScript 程式碼中使用 JSDoc 時，不應包含型別註解。TypeScript 編譯器僅會使用 TypeScript 的型別註解，並忽略 JSDoc 中的型別註解。

若要停用 TypeScript 中的 JSDoc 註解建議，請設定 "js/ts.suggest.completeJSDocs": false。

程式碼導覽

程式碼巡覽功能讓您能快速在 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 Marketplace 中的格式化擴充功能。

語法突顯與語意突顯

除了語法突顯外，TypeScript 與 JavaScript 也提供語意突顯。

語法突顯根據詞法規則為文字上色。語意突顯則基於語言服務解析出的符號資訊，進一步豐富語法顏色。

語意突顯是否可見，取決於目前的色彩佈景主題。每個佈景主題皆可配置是否顯示語意突顯，以及如何設定語意標記的樣式。

如果啟用語意突顯且色彩佈景主題定義了對應的樣式規則，便能看見不同的顏色與樣式。

語意突顯可根據下列項目變更顏色：

• 符號的解析型別：命名空間 (namespace)、變數 (variable)、屬性 (property)、類別 (class)、介面 (interface)、型別參數 (typeParameter)。
• 變數/屬性是否為唯讀 (const) 或可修改。
• 變數/屬性的型別是否可呼叫（函式型別）。

後續步驟

繼續閱讀以了解

• 重構 TypeScript - 了解可用於 TypeScript 的實用重構功能。
• 對 TypeScript 進行偵錯 - 為您的 TypeScript 專案設定偵錯器。