編輯 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 設定為 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) - 顯示 Peek 視窗，其中顯示符號的定義。
• 前往參考 ⇧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 專案設定偵錯工具。