重構 TypeScript

原始碼重構可以在不修改執行時行為的情況下，透過重組程式碼來提高專案的質量和可維護性。Visual Studio Code 支援提取方法和提取變數等重構操作，讓你在編輯器內改善程式碼庫。

Visual Studio Code 透過 TypeScript 語言服務內建了對 TypeScript 重構的支援。在本主題中，我們將演示 TypeScript 語言服務所支援的重構功能。

重新命名

最簡單的重構之一是重新命名方法或變數。按 F2 即可在整個 TypeScript 專案中重新命名游標下的符號。

重構

要檢視可用的 TypeScript 重構，請將游標放在原始碼的某個區域，然後右鍵單擊以開啟編輯器上下文選單並選擇重構，或者直接按 ⌃⇧R (Windows、Linux 為 Ctrl+Shift+R)。

請參閱重構以獲取有關重構的更多資訊，以及如何為單個重構配置鍵盤快捷鍵。

可用的 TypeScript 重構包括：

• 提取到方法或函式 - 將選定的語句或表示式提取到檔案中的新方法或新函式中。

  

  選擇提取到方法或提取到函式重構後，輸入提取的方法/函式的名稱。

• 提取到常量 - 將選定的表示式提取到檔案中的新常量中。

  

• 提取型別到介面或類型別名 - 將選定的複雜型別提取到介面或類型別名中。

  

• 移動到新檔案 - 將檔案頂層作用域中的一個或多個類、函式、常量或介面移動到一個新檔案中。新檔案的名稱是根據所選符號的名稱推斷出來的。

  

• 在命名匯入和名稱空間匯入之間轉換 - 在命名匯入 (import { Name } from './foo') 和名稱空間匯入 (import * as foo from './foo') 之間進行轉換。

  

• 在預設匯出和命名匯出之間轉換 - 從使用 export default 轉換為使用命名匯出 (export const Foo = ...)。

• 將引數轉換為解構物件 - 將一個接受長引數列表的函式重寫為接受單個引數物件。

• 生成 get 和 set 訪問器 - 為選定的類屬性生成 getter 和 setter，以封裝該屬性。

  

• 推斷函式返回型別 - 為函式新增顯式的返回型別註解。

  

• 為箭頭函式新增/刪除花括號 - 在單行箭頭函式和多行箭頭函式之間來回轉換。

快速修復

快速修復是針對簡單編碼錯誤的建議性編輯。快速修復的示例包括：

• 為成員訪問新增缺失的 this。
• 修復拼寫錯誤的屬性名。
• 刪除無法訪問的程式碼或未使用的匯入。
• 宣告

當您將游標移動到 TypeScript 錯誤上時，VS Code 會顯示一個燈泡，表示有可用的快速修復。單擊燈泡或按 ⌘. (Windows、Linux 為 Ctrl+.) 來顯示可用的快速修復和重構列表。

此外，程式碼操作小部件：包括附近的快速修復 (editor.codeActionWidget.includeNearbyQuickFixes) 是一個預設啟用的設定，它將透過 ⌘. (Windows、Linux 為 Ctrl+.) (命令 ID editor.action.quickFix) 啟用一行中最近的快速修復，無論您的游標在該行的哪個位置。

該命令會突出顯示將透過快速修復進行重構或修復的原始碼。普通程式碼操作和非修復重構仍可在游標位置啟用。

未使用的變數和無法訪問的程式碼

未使用的 TypeScript 程式碼，例如恆為 true 的 if 語句的 else 塊或未被引用的匯入，會在編輯器中被淡化顯示。

您可以將游標放在這些未使用的程式碼上，並觸發快速修復命令 (⌘. (Windows、Linux 為 Ctrl+.)) 或單擊燈泡來快速刪除它們。

要停用未使用程式碼的淡化顯示，請將 "editor.showUnused" 設定為 false。您也可以透過設定以下選項來僅在 TypeScript 中停用未使用程式碼的淡化顯示：

"[typescript]": {
    "editor.showUnused":  false
},
"[typescriptreact]": {
    "editor.showUnused":  false
},

組織匯入

組織匯入原始碼操作會對 TypeScript 檔案中的匯入進行排序，並刪除未使用的匯入。

您可以從原始碼操作上下文選單執行組織匯入，或使用鍵盤快捷鍵 ⇧⌥O (Windows、Linux 為 Shift+Alt+O)。

透過設定以下選項，也可以在儲存 TypeScript 檔案時自動組織匯入：

"editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
}

在檔案移動時更新匯入

當您移動或重新命名 TypeScript 專案中被其他檔案匯入的檔案時，VS Code 可以自動更新所有引用該移動檔案的匯入路徑。

typescript.updateImportsOnFileMove.enabled 設定控制此行為。有效的設定值是：

• "prompt" - 預設值。每次檔案移動時詢問是否應更新路徑。
• "always" - 總是自動更新路徑。
• "never" - 不自動更新路徑，也不提示。

儲存時程式碼操作

editor.codeActionsOnSave 設定允許您配置一組在檔案儲存時執行的程式碼操作。例如，您可以透過以下設定在儲存時啟用“組織匯入”：

// On explicit save, run fixAll source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "always",
}

截至目前，支援以下列舉值：

• explicit (預設): 在顯式儲存時觸發程式碼操作。與 true 相同。
• always：明確儲存時以及視窗或焦點更改的自動儲存時觸發程式碼操作。
• never：從不觸發儲存時的程式碼操作。與 false 相同。

您還可以將 editor.codeActionsOnSave 設定為一個程式碼運算元組，以便按順序執行。

以下是一些原始碼操作：

• "organizeImports" - 在儲存時啟用組織匯入。
• "fixAll" - “儲存時自動修復”會在一輪中計算所有可能的修復（適用於所有提供者，包括 ESLint）。
• "fixAll.eslint" - 僅針對 ESLint 的自動修復。
• "addMissingImports" - 在儲存時新增所有缺失的匯入。

請參閱 TypeScript 以獲取更多資訊。

程式碼建議

VS Code 會自動建議一些常見的程式碼簡化，例如將 promise 上的 .then 呼叫鏈轉換為使用 async 和 await。

將 "typescript.suggestionActions.enabled" 設定為 false 以停用建議。

後續步驟

繼續閱讀以瞭解：

• 編輯 TypeScript - 瞭解 VS Code 為 TypeScript 提供的編輯功能。
• 除錯 TypeScript - 為您的 TypeScript 專案配置偵錯程式。