編輯 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 程式碼片段，它們會在您鍵入時建議；

您可以安裝擴充套件以獲取更多程式碼片段，或者為 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 註釋，並使用它們在建議、懸停資訊和簽名幫助中顯示型別資訊和文件。

請記住，在 TypeScript 程式碼中使用 JSDoc 時，不應包含型別註釋。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 市場安裝其中一個格式化擴充套件。

語法高亮和語義高亮

除了語法高亮，TypeScript 和 JavaScript 還提供語義高亮。

語法高亮根據詞法規則對文字進行著色。語義高亮根據語言服務解析的符號資訊豐富語法著色。

語義高亮是否可見取決於當前的顏色主題。每個主題都可以配置是否顯示語義高亮以及如何設定語義標記的樣式。

如果啟用了語義高亮並且顏色主題定義了相應的樣式規則，則可以看到不同的顏色和樣式。

語義高亮可以根據以下內容更改顏色

• 符號的解析型別：名稱空間、變數、屬性、變數、類、介面、型別引數。
• 變數/屬性是隻讀 (const) 還是可修改。
• 變數/屬性型別是否可呼叫（函式型別）或不可呼叫。

後續步驟

繼續閱讀以瞭解：

• 重構 TypeScript - 瞭解 TypeScript 中可用的有用重構。
• 除錯 TypeScript - 為您的 TypeScript 專案配置偵錯程式。