重構 TypeScript
程式碼重構 (Code refactoring) 可以在不修改執行時期行為的前提下重新建構程式碼，進而提升專案的品質與可維護性。Visual Studio Code 支援多種重構操作（Refactorings），例如擷取方法 (Extract Method) 與 擷取變數 (Extract Variable)，讓您直接在編輯器內改善程式碼庫。
Visual Studio Code 透過 TypeScript 語言服務內建支援 TypeScript 重構，本主題將示範如何使用 TypeScript 語言服務進行重構。
重新命名
最簡單的重構之一是重新命名方法或變數。按下 F2 即可在整個 TypeScript 專案中重新命名游標所在的符號。
重構
若要查看可用的 TypeScript 重構功能，請將游標置於原始碼的特定區域，然後按一下滑鼠右鍵開啟編輯器操作選單並選擇重構 (Refactor)，或者直接按下 ⌃⇧R (Windows, Linux Ctrl+Shift+R)。
關於重構以及如何為個別重構項目設定鍵盤快速鍵的詳細資訊，請參閱重構。
可用的 TypeScript 重構功能包括：
-
擷取至方法或函式 (Extract to method or function) - 將選取的語句或運算式擷取至檔案中的新方法或新函式。
選擇擷取至方法 (Extract to method) 或 擷取至函式 (Extract to function) 重構後，輸入該擷取方法/函式的名稱。
-
擷取至常數 (Extract to constant) - 將選取的運算式擷取至檔案中的新常數。
-
擷取型別至介面或型別別名 (Extract type to interface or type alias) - 將選取的複雜型別擷取至介面或型別別名。
-
移動至新檔案 (Move to new file) - 將檔案最上層範圍中的一個或多個類別、函式、常數或介面移動至新檔案。新檔案的名稱會根據選取的符號名稱自動推斷。
-
在具名匯入與命名空間匯入之間轉換 (Convert between named imports and namespace imports) - 在具名匯入 (
import { Name } from './foo') 與命名空間匯入 (import * as foo from './foo') 之間進行轉換。
-
在預設匯出與具名匯出之間轉換 (Convert between default export and named export) - 從使用
export default轉換為具名匯出 (export const Foo = ...)，反之亦然。 -
將參數轉換為解構物件 (Convert parameters to destructured object) - 重寫一個接收長參數列表的函式，使其改為接收單一參數物件。
-
產生 getter 與 setter 存取子 (Generate get and set accessors) - 透過為選取的類別屬性產生 getter 與 setter 來進行封裝。
-
推斷函式回傳型別 (Infer function return types) - 為函式新增明確的回傳型別註解。
-
新增/移除箭頭函式的大括號 (Add/remove braces from arrow function) - 將單行箭頭函式轉換為多行，或反之亦然。
快速修復
「快速修正 (Quick Fixes)」是針對簡單程式碼錯誤的建議編輯。快速修正範例包括：
- 為成員存取新增缺失的
this。 - 修正拼寫錯誤的屬性名稱。
- 移除無法到達的程式碼或未使用的匯入。
- 宣告缺失的變數或函式。
當您將游標移至 TypeScript 錯誤上方時，VS Code 會顯示一個燈泡圖示，表示可以使用快速修正功能。按一下該燈泡或按下 ⌘. (Windows, Linux Ctrl+.)，即可顯示可用快速修正與重構的清單。
此外，程式碼動作小工具：包含附近的快速修正 (Code Action Widget: Include Nearby Quick Fixes) (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
},
整理匯入
整理匯入 (Organize Imports) 原始碼動作會自動排序 TypeScript 檔案中的匯入項目，並移除未使用的匯入。
您可以從 原始碼動作 (Source Action) 快顯功能表執行 整理匯入，或使用鍵盤快速鍵 ⇧⌥O (Windows, Linux Shift+Alt+O)。
您也可以透過設定，在儲存 TypeScript 檔案時自動執行「整理匯入」。
"editor.codeActionsOnSave": {
"source.organizeImports": "explicit"
}
移動檔案時更新匯入
當您移動或重新命名 TypeScript 專案中被其他檔案匯入的檔案時，VS Code 可以自動更新所有參考該移動檔案的匯入路徑。
js/ts.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",
}
目前支援以下枚舉 (enums)：
explicit(預設值)：明確儲存時觸發程式碼動作。與true相同。always：在明確儲存時，以及因視窗或焦點變更而觸發自動儲存時，執行程式碼動作。never：儲存時從不觸發程式碼動作。與false相同。
您也可以將 editor.codeActionsOnSave 設定為一個程式碼動作陣列，依序執行這些動作。
以下是一些原始碼動作：
"organizeImports"- 啟用儲存時整理匯入內容。"fixAll"- 「儲存時自動修正」會在單次執行中計算出所有可能的修正（適用於所有提供者，包括 ESLint）。"fixAll.eslint"- 僅針對 ESLint 進行自動修正。"addMissingImports"- 儲存時加入所有遺失的匯入內容。
請參閱 TypeScript 以獲取更多資訊。
程式碼建議
VS Code 會自動建議一些常見的程式碼簡化方式，例如將 Promise 的一連串 .then 呼叫轉換為使用 async 與 await。
將 "js/ts.suggestionActions.enabled" 設定為 false 以停用建議。
後續步驟
繼續閱讀以了解
- 編輯 TypeScript - 了解 VS Code 的 TypeScript 編輯功能。
- 對 TypeScript 進行偵錯 - 為您的 TypeScript 專案設定偵錯器。