重構 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 = ...）。 -
將引數轉換為解構物件 - 重寫一個接受長引數列表的函式，使其接受一個單獨的引數物件。
-
生成 getter 和 setter 訪問器 - 透過為選定的類屬性生成 getter 和 setter 來封裝它。
-
推斷函式返回型別 - 為函式新增顯式的返回型別註解。
-
為箭頭函式新增/刪除大括號 - 將單行箭頭函式轉換為多行，反之亦然。
快速修復
快速修復是針對簡單編碼錯誤的建議性編輯。示例文字包括：
- 為成員訪問新增丟失的 `this`。
- 修復拼寫錯誤的屬性名稱。
- 刪除不可達程式碼或未使用的匯入。
- 宣告
當您將游標移到 TypeScript 錯誤上時，VS Code 會顯示一個燈泡，表示存在可用的快速修復。單擊燈泡或按 ⌘. (Windows、Linux Ctrl+.) 顯示可用快速修復和重構的列表。
此外，**程式碼操作小元件：包含附近的快速修復** (`editor.codeActionWidget.includeNearbyQuickFixes`) 是一個預設啟用的設定，它將從 ⌘. (Windows、Linux Ctrl+.)（命令 ID `editor.action.quickFix`）啟用同一行中最近的快速修復，無論您的游標在該行中的哪個位置。
該命令會突出顯示將透過快速修復進行重構或修復的原始碼。普通程式碼操作和非修復重構仍可在游標位置啟用。
未使用的變數和不可達程式碼
未使用的 TypeScript 程式碼，例如一個條件始終為真的 `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 專案配置偵錯程式。