老板說，給我把這個 JS React 項目遷移到 TypeScript
Hi，我是 ssh，在我做前端的過程中，TypeScript + React 迅速的風靡起來，新項目越來越多的默認啟用 TypeScript 做類型保護，它的各種好處對于長期維護的項目已經無需多言。那么，對于一些老舊但是還需要繼續維護的 React JavaScript 項目來說，遷移到 TypeScript 就非常有價值了。下面我來給大家分享一下這篇很有參考價值的 Converting JavaScript codebase to TypeScript：
正文
在我們日益發展的網絡開發領域中，JavaScript 長期以來一直是首選的語言。它的多功能性和普及性推動了許多應用和網站取得成功。然而，隨著項目規模和復雜性的增長，維護 JavaScript 代碼庫可能變得具有挑戰性、容易出錯且難以擴展。
走出來的第一步是 TypeScript，這是 JavaScript 的一個革命性超集，提升了你的編程體驗。TypeScript 通過引入靜態類型和多種復雜功能，使程序員能夠編寫更健壯、可擴展和易維護的代碼。
在本文中，我們將重點討論將 JavaScript React 應用程序轉換為 TypeScript，并深入探討以下目標：
- 探索 TypeScript 的重要性及其對代碼安全性的影響。
- 解釋手動將 JavaScript 項目轉換為 TypeScript 的過程。
- 提供成功完成轉換過程的逐步指導和技巧。
TypeScript 簡介：
TypeScript 是 JavaScript 的靜態類型超集，通過引入額外的功能和嚴格的類型檢查，擴展了 JavaScript 的能力。以下是 TypeScript 及其與 JavaScript 的關系、其主要特點和優勢，以及它在提高代碼安全性和可維護性方面的作用的摘要：
- TypeScript 是什么以及它與 JavaScript 的關系是什么？
TypeScript 是由 Microsoft 開發的編程語言。
它是 JavaScript 的超集，這意味著任何有效的 JavaScript 代碼也是有效的 TypeScript 代碼。
TypeScript 引入了靜態類型，允許開發人員為變量、函數參數和返回值定義類型。
TypeScript 代碼會被轉譯為純 JavaScript 代碼，可以由任何現代 Web 瀏覽器或 JavaScript 運行時執行。
- TypeScript 在增強代碼安全性和可維護性方面的作用：
- 靜態類型：通過為 JavaScript 代碼添加靜態類型，TypeScript 有助于在編譯時捕獲與類型相關的錯誤，減少運行時錯誤的可能性。
- 錯誤的早期檢測：TypeScript 的類型檢查器在開發過程中識別潛在問題，使開發人員能夠在部署之前解決這些問題。
- 改善代碼可讀性和可維護性：TypeScript 中使用類型注解和清晰的接口使代碼更加自解釋，更易于理解和維護。
- 重構和工具支持：TypeScript 的強類型使得強大的重構能力和增強的工具支持成為可能，從而使代碼更可靠、更高效地進行更改。
- 團隊協作：TypeScript 通過在代碼庫的不同部分之間提供更清晰的約定，促進開發團隊之間更好的協作。
通過利用 TypeScript，開發人員可以增強代碼安全性，提前捕獲錯誤，改善代碼的可維護性，并享受更強大和可擴展的代碼庫帶來的好處。
TypeScript 的設置步驟：
- 安裝 TypeScript 及其先決條件：在計算機上全局安裝 TypeScript，打開命令行界面并運行以下命令：
npm install -g typescript- 配置開發環境中的 TypeScript：
- 創建一個新目錄用于 TypeScript 項目，并使用命令行進入該目錄。
- 運行以下命令生成一個帶有默認設置的基本tsconfig.json文件：
tsc --init- 這將在項目目錄中創建一個tsconfig.json文件。
- 使用文本編輯器打開tsconfig.json文件。
- 修改"outDir"屬性以指定所需的輸出目錄。例如，將其更改為：
"outDir": "./dist"- 保存tsconfig.json文件。
- 將 TypeScript 集成到現有的 JavaScript 項目中：
- 在"my-typescript-project"目錄中，創建一個名為app.ts的新文件。這將是你的 TypeScript 文件。
- 使用文本編輯器打開app.ts文件并編寫一些 TypeScript 代碼。例如：
function greet(name: string) {
console.log("Hello, " + name + "!");
}
greet("John");- 保存app.ts文件。
- 打開命令行界面并使用cd命令導航到"my-typescript-project"目錄。
- 使用以下命令運行 TypeScript 編譯器（tsc）：
tsc- TypeScript 編譯器將根據tsconfig.json文件中的設置，編譯目錄中的所有 TypeScript 文件（包括app.ts）。
- 編譯后的 JavaScript 文件將輸出到指定的輸出目錄（根據tsconfig.json文件的配置）。
- 現在，你可以使用 JavaScript 運行時運行生成的 JavaScript 代碼，或者打開包含編譯后 JavaScript 文件的 HTML 文件。
太棒了！你已成功設置了 TypeScript 開發環境 ??
將 JavaScript 轉換為 TypeScript：
在將 JavaScript 代碼轉換為 TypeScript 時，遵循策略和最佳實踐以確保平穩過渡非常重要。根據我在 TypeScript 上的經驗，我推薦一些最佳實踐，以有效地將 JavaScript 代碼轉換為 TypeScript，并充分利用 TypeScript 的特性，確保成功的轉換過程。
將 JavaScript 代碼轉換為 TypeScript 的策略和最佳實踐。
- 了解差異： 熟悉 JavaScript 和 TypeScript 之間的主要差異。TypeScript 引入了靜態類型、接口、類、模塊和其他高級功能。了解這些差異將幫助你有效地利用 TypeScript。
- 制定計劃： 從評估轉換的范圍開始。確定你是要轉換整個代碼庫還是特定模塊。創建一個路線圖或清單，以跟蹤進度并優先處理轉換任務。
- 逐步轉換： 考慮采用漸進式的方法，特別是對于較大的項目。從轉換小型、自包含的模塊或組件開始。這樣可以逐步熟悉 TypeScript，并逐步測試轉換后的代碼。
- 利用 TypeScript 的特性： 利用 TypeScript 的特性提高代碼質量和可維護性。使用靜態類型來盡早捕捉錯誤并提供更好的代碼文檔。探索接口、枚舉和泛型等高級特性，以強制執行更嚴格的類型檢查并改進代碼組織。
- 使用 TypeScript 編譯器： 配置 TypeScript 編譯器（tsc）以執行更嚴格的類型檢查，并及早提供與類型相關的反饋。根據項目的要求，在 tsconfig.json 文件中調整編譯器選項。
- 利用 TypeScript 工具： 使用支持 TypeScript 的編輯器和集成開發環境（IDE），提供自動完成、類型檢查和重構支持。例如，TypeScript 的語言服務等工具可以大大提升你的開發體驗。
- 全面測試： 在將 JavaScript 轉換為 TypeScript 時，請進行全面測試，以捕捉轉換過程中引入的任何問題或回歸。創建測試用例并進行單元測試，以驗證轉換后代碼的行為。
將 React JavaScript 項目轉換為 TypeScript：
將 JavaScript 項目轉換為 TypeScript 涉及對代碼庫進行更改和更新配置。下面是將 React JavaScript 項目轉換為 TypeScript 的逐步方法，包括代碼片段和項目樹結構：
- 安裝 TypeScript：
npm install --save-dev typescript打開命令行界面并導航到 React 項目的根目錄。
運行以下命令將 TypeScript 安裝為開發依賴項：
- 重命名 JavaScript 文件：
- 確定要轉換的項目中的 JavaScript 文件。
- 將文件重命名為.tsx擴展名，而不是.js。例如，將App.js重命名為App.tsx。
- 更新 tsconfig.json：
{
"compilerOptions": {
"jsx": "react-jsx", // 如果使用JSX語法
"module": "esnext",
"target": "es5",
"strict": false,
"esModuleInterop": true
}
}各種編譯器選項用于配置 TypeScript 編譯器的行為。以下是上述選項的快速回顧：
- "esModuleInterop": true：此屬性在 TypeScript 的 ES 模塊和 CommonJS 模塊之間啟用互操作性。它允許在使用 CommonJS 模塊時使用默認導入和導出。
- "jsx": "react-jsx"：此屬性指定在 TypeScript 文件中用于 JSX 的語法。在這種情況下，它表示正在使用 React JSX 語法。
- "module": "esnext"：此屬性確定模塊代碼的生成方式。在這里，它設置為"esnext"，允許使用現代 JavaScript 模塊語法，如import和export。
- "target": "es5"：此屬性設置輸出的 ECMAScript 版本。它指定編譯后的 JavaScript 代碼應與 ECMAScript 5 兼容，這是一個較舊的 JavaScript 版本，在各種瀏覽器和環境中廣泛支持。
- "strict": false：啟用嚴格模式將使 TypeScript 對代碼庫進行嚴格的類型檢查。我們將其設置為false，以減少從 JavaScript 遷移到 TypeScript 時的類型錯誤數量。
盡管確實可以在文件中將"strict": false設置為true，以減少從 JavaScript 遷移到 TypeScript 時的類型錯誤數量，但不建議在遷移到 TypeScript 后的項目中這樣做。TypeScript 中的"strict"編譯器選項啟用了一組嚴格的類型檢查規則，以確保更安全、更可靠的代碼。通過將"strict": true設置為true，TypeScript 可以執行最佳實踐，并在編譯時捕獲潛在的錯誤，使你能夠及早解決它們并改進代碼質量。
- 如果尚不存在，請在項目的根目錄中創建tsconfig.json文件。
- 打開tsconfig.json文件并更新以下選項：
這些屬性與tsconfig.json文件中提供的其他屬性一起，可以根據項目的具體要求配置 TypeScript 編譯器。
- 解決外部庫：
npm install --save-dev @types/react @types/react-dom確定項目中使用的任何沒有 TypeScript 支持的外部庫或依賴項。
使用 DefinitelyTyped（https://definitelytyped.org/[1]）或其他社區存儲庫搜索這些庫的 TypeScript 類型聲明文件（.d.ts）。
使用 npm 或 yarn 安裝類型聲明文件。例如：
- 類型注釋：
interface Props {
name: string;
age: number;
}
const MyComponent: React.FC<Props> = ({ name, age }) => {
// 組件代碼在這里
};- 開始向代碼庫添加類型注釋。
- 從 React 組件的 prop 類型開始，使用 TypeScript 接口或類型進行注釋。例如：
- 解決類型錯誤：
npx tsc- 通過使用正確的類型或解決任何不一致性來解決報告的類型錯誤。
- 運行 TypeScript 編譯器以識別代碼庫中的任何類型錯誤或警告：
- 測試和重構：
- 在轉換后，對代碼庫進行徹底測試，以確保功能和正確性。
- 考慮重構代碼，以利用 TypeScript 的功能，例如使用更具體的類型和利用接口來改善代碼組織和文檔。
項目樹結構：
- src/
- components/
- App.tsx
- ...
- index.tsx
- tsconfig.json
- package.json
- ...恭喜！你已成功將 React JavaScript 代碼庫轉換為 TypeScript??
處理轉換過程中的常見問題：
將 JavaScript 代碼轉換為 TypeScript 可能會遇到一些常見問題。以下是一些可能的挑戰以及應對方法：
- 缺少類型信息： 由于 JavaScript 是一種動態類型語言，它可能缺乏類型信息。在轉換過程中，可能需要對變量、函數參數和返回類型進行推斷或手動注釋。
- 外部庫的類型聲明缺失： 如果項目依賴于沒有類型聲明的外部庫，你可能需要查找或創建相應的類型聲明文件。
- 類型錯誤和警告： TypeScript 編譯器可能會報告一些類型錯誤或警告。這些錯誤可能涉及類型不匹配、缺少屬性或其他類型不一致性。你需要逐個解決這些錯誤，并根據需要更正代碼。
- 學習曲線： 從 JavaScript 遷移到 TypeScript 可能需要一些學習和適應時間。熟悉 TypeScript 的特性和最佳實踐，并逐步使用它們來改進代碼質量和可維護性。
在處理這些挑戰時，始終參考 TypeScript 的文檔、社區和資源。TypeScript 有一個強大的社區支持，你可以從中獲取幫助、指導和最佳實踐建議。
希望這些步驟和策略能夠幫助你順利地將 JavaScript 項目轉換為 TypeScript 項目！祝你成功。
參考：https://dev.to/documatic/converting-javascript-codebase-to-typescript-1852
