編輯 TypeScript

Visual Studio Code 對 TypeScript 提供絕佳的編輯支援。本文深入探討 VS Code 內建的編輯和程式語言功能。如果您想進一步了解 VS Code 中的一般編輯功能，例如鍵盤快速鍵、多重游標、搜尋以及尋找和取代，您可以閱讀「基本編輯」。

IntelliSense

IntelliSense 會向您顯示智慧程式碼完成、hover 資訊和簽名說明，讓您能夠更快速且更正確地撰寫程式碼。

VS Code 為個別 TypeScript 檔案以及 TypeScript tsconfig.json 專案提供 IntelliSense。

Hover 資訊

將滑鼠游標停留在 TypeScript 符號上方，即可快速查看其類型資訊和相關文件

您也可以使用 ⌘K ⌘I (Windows、Linux Ctrl+K Ctrl+I) 鍵盤快速鍵在目前的游標位置顯示 hover 資訊。

簽名說明

當您撰寫 TypeScript 函式呼叫時，VS Code 會顯示函式簽名的相關資訊，並醒目提示您目前正在完成的參數

當您在函式呼叫中輸入 ( 或 , 時，會自動顯示簽名說明。使用 ⇧⌘Space (Windows、Linux Ctrl+Shift+Space) 以手動觸發簽名說明。

程式碼片段

VS Code 包含基本 TypeScript 程式碼片段，會在您輸入時建議；

您可以安裝擴充功能以取得其他程式碼片段，或為 TypeScript 定義您自己的程式碼片段。如需詳細資訊，請參閱「使用者定義程式碼片段」。

內嵌提示

內嵌提示會在原始碼中新增額外的行內資訊，以協助您了解程式碼的作用。

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

這可協助您一目瞭然地了解每個引數的意義，對於採用布林值旗標或具有容易混淆之參數的函式特別有幫助。

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

• none — 停用參數內嵌提示。
• literals — 僅針對常值 (字串、數字、布林值) 顯示內嵌提示。
• all — 針對所有引數顯示內嵌提示。

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

設定：typescript.inlayHints.variableTypes.enabled

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

設定：typescript.inlayHints.propertyDeclarationTypes.enabled

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

設定：typescript.inlayHints.parameterTypes.enabled

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

設定：typescript.inlayHints.functionLikeReturnTypes.enabled

參考 CodeLens

TypeScript 參考 CodeLens 會針對類別、介面、方法、屬性和匯出的物件顯示參考的行內計數

您可以透過在使用者設定檔中設定 "typescript.referencesCodeLens.enabled": true 來啟用此功能。

按一下參考計數即可快速瀏覽參考清單

實作 CodeLens

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

您可以透過設定 "typescript.implementationsCodeLens.enabled": true 來啟用此功能。

與參考 CodeLens 相同，您可以按一下實作計數以快速瀏覽所有實作的清單。

自動匯入

自動匯入可協助您尋找可用的符號，並自動為其新增匯入，藉此加速程式碼撰寫。

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

如果您從另一個檔案或模組中選擇其中一個建議，VS Code 會自動為其新增匯入。在此範例中，VS Code 會在檔案頂端新增 Hercules 的匯入

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

貼上時新增匯入

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

此功能預設為啟用，但您可以切換 typescript.updateImportsOnPaste.enabled 設定來停用它。

您可以設定 editor.pasteAs.preferences 設定，讓貼上時新增匯入成為預設行為，而不會顯示貼上控制項。包含 text.updateImports.jsts 或 text.updateImports，即可在貼上時一律新增匯入。

JSX 與自動關閉標籤

VS Code 的 TypeScript 功能也適用於 JSX。若要在您的 TypeScript 中使用 JSX，請使用 *.tsx 檔案副檔名，而不是一般的 *.ts

VS Code 也包含 JSX 特定的功能，例如在 TypeScript 中自動關閉 JSX 標籤

將 "typescript.autoClosingTags" 設定為 false 即可停用 JSX 標籤關閉。

JSDoc 支援

VS Code 的 TypeScript IntelliSense 了解許多標準 JSDoc 註解，並使用它們在 建議、hover 資訊 和 簽名說明 中顯示類型資訊和文件。

請記住，當您將 JSDoc 用於 TypeScript 程式碼時，不應包含類型註解。TypeScript 編譯器只會使用 TypeScript 類型註解，而忽略來自 JSDoc 的註解。

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

程式碼導覽

程式碼導覽可讓您快速導覽 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 安裝其中一個格式設定擴充功能。

語法醒目提示和語意醒目提示

除了語法醒目提示之外，TypeScript 和 JavaScript 也提供語意醒目提示。

語法醒目提示會根據詞法規則為文字著色。語意醒目提示會根據語言服務中已解析的符號資訊來豐富語法色彩。

語意醒目提示是否可見取決於目前的色彩佈景主題。每個佈景主題都可以 設定 是否要顯示語意醒目提示，以及如何設定語意權杖的樣式。

如果已啟用語意醒目提示，且色彩佈景主題已定義對應的樣式規則，則可以看到不同的色彩和樣式。

語意醒目提示可以根據下列項目變更色彩

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

後續步驟

繼續閱讀以深入了解

• 重構 TypeScript - 了解適用於 TypeScript 的實用重構。
• 偵錯 TypeScript - 設定 TypeScript 專案的偵錯工具。