編輯 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 註釋，並使用它們在建議、懸停資訊和簽名幫助中顯示型別資訊和文件。

請注意，在使用 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 市場安裝一個格式化擴充套件。

語法和語義高亮

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

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

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

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

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

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

後續步驟

繼續閱讀以瞭解：

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