Hi，我是 ssh，在我做前端的過程中，TypeScript + React 迅速的風靡起來，新項目越來越多的默認啟用 TypeScript 做類型保護，它的各種好處對于長期維護的項目已經(jīng)無需多言。那么，對于一些老舊但是還需要繼續(xù)維護的 React JavaScript 項目來說，遷移到 TypeScript 就非常有價值了。下面我來給大家分享一下這篇很有參考價值的 Converting JavaScript codebase to TypeScript：

成都創(chuàng)新互聯(lián)長期為上千多家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為岷縣企業(yè)提供專業(yè)的做網(wǎng)站、成都做網(wǎng)站，岷縣網(wǎng)站改版等技術(shù)服務。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

正文

在我們?nèi)找姘l(fā)展的網(wǎng)絡開發(fā)領(lǐng)域中，JavaScript 長期以來一直是選擇的語言。它的多功能性和普及性推動了許多應用和網(wǎng)站取得成功。然而，隨著項目規(guī)模和復雜性的增長，維護 JavaScript 代碼庫可能變得具有挑戰(zhàn)性、容易出錯且難以擴展。

走出來的第一步是 TypeScript，這是 JavaScript 的一個革命性超集，提升了你的編程體驗。TypeScript 通過引入靜態(tài)類型和多種復雜功能，使程序員能夠編寫更健壯、可擴展和易維護的代碼。

在本文中，我們將重點討論將 JavaScript React 應用程序轉(zhuǎn)換為 TypeScript，并深入探討以下目標：

• 探索 TypeScript 的重要性及其對代碼安全性的影響。
• 解釋手動將 JavaScript 項目轉(zhuǎn)換為 TypeScript 的過程。
• 提供成功完成轉(zhuǎn)換過程的逐步指導和技巧。

TypeScript 簡介：

TypeScript 是 JavaScript 的靜態(tài)類型超集，通過引入額外的功能和嚴格的類型檢查，擴展了 JavaScript 的能力。以下是 TypeScript 及其與 JavaScript 的關(guān)系、其主要特點和優(yōu)勢，以及它在提高代碼安全性和可維護性方面的作用的摘要：

1. TypeScript 是什么以及它與 JavaScript 的關(guān)系是什么？

TypeScript 是由 Microsoft 開發(fā)的編程語言。

它是 JavaScript 的超集，這意味著任何有效的 JavaScript 代碼也是有效的 TypeScript 代碼。

TypeScript 引入了靜態(tài)類型，允許開發(fā)人員為變量、函數(shù)參數(shù)和返回值定義類型。

TypeScript 代碼會被轉(zhuǎn)譯為純 JavaScript 代碼，可以由任何現(xiàn)代 Web 瀏覽器或 JavaScript 運行時執(zhí)行。

1. TypeScript 在增強代碼安全性和可維護性方面的作用：

• 靜態(tài)類型：通過為 JavaScript 代碼添加靜態(tài)類型，TypeScript 有助于在編譯時捕獲與類型相關(guān)的錯誤，減少運行時錯誤的可能性。
• 錯誤的早期檢測：TypeScript 的類型檢查器在開發(fā)過程中識別潛在問題，使開發(fā)人員能夠在部署之前解決這些問題。
• 改善代碼可讀性和可維護性：TypeScript 中使用類型注解和清晰的接口使代碼更加自解釋，更易于理解和維護。
• 重構(gòu)和工具支持：TypeScript 的強類型使得強大的重構(gòu)能力和增強的工具支持成為可能，從而使代碼更可靠、更高效地進行更改。
• 團隊協(xié)作：TypeScript 通過在代碼庫的不同部分之間提供更清晰的約定，促進開發(fā)團隊之間更好的協(xié)作。

通過利用 TypeScript，開發(fā)人員可以增強代碼安全性，提前捕獲錯誤，改善代碼的可維護性，并享受更強大和可擴展的代碼庫帶來的好處。

TypeScript 的設置步驟：

1. 安裝 TypeScript 及其先決條件：在計算機上全局安裝 TypeScript，打開命令行界面并運行以下命令：

npm install -g typescript

1. 配置開發(fā)環(huán)境中的 TypeScript：

• 創(chuàng)建一個新目錄用于 TypeScript 項目，并使用命令行進入該目錄。
• 運行以下命令生成一個帶有默認設置的基本tsconfig.json文件：

tsc --init

• 這將在項目目錄中創(chuàng)建一個tsconfig.json文件。
• 使用文本編輯器打開tsconfig.json文件。
• 修改"outDir"屬性以指定所需的輸出目錄。例如，將其更改為：

"outDir": "./dist"

• 保存tsconfig.json文件。

1. 將 TypeScript 集成到現(xiàn)有的 JavaScript 項目中：

• 在"my-typescript-project"目錄中，創(chuàng)建一個名為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 編譯器將根據(jù)tsconfig.json文件中的設置，編譯目錄中的所有 TypeScript 文件（包括app.ts）。
• 編譯后的 JavaScript 文件將輸出到指定的輸出目錄（根據(jù)tsconfig.json文件的配置）。
• 現(xiàn)在，你可以使用 JavaScript 運行時運行生成的 JavaScript 代碼，或者打開包含編譯后 JavaScript 文件的 HTML 文件。

太棒了！你已成功設置了 TypeScript 開發(fā)環(huán)境

將 JavaScript 轉(zhuǎn)換為 TypeScript：

在將 JavaScript 代碼轉(zhuǎn)換為 TypeScript 時，遵循策略和最佳實踐以確保平穩(wěn)過渡非常重要。根據(jù)我在 TypeScript 上的經(jīng)驗，我推薦一些最佳實踐，以有效地將 JavaScript 代碼轉(zhuǎn)換為 TypeScript，并充分利用 TypeScript 的特性，確保成功的轉(zhuǎn)換過程。

將 JavaScript 代碼轉(zhuǎn)換為 TypeScript 的策略和最佳實踐。

1. 了解差異： 熟悉 JavaScript 和 TypeScript 之間的主要差異。TypeScript 引入了靜態(tài)類型、接口、類、模塊和其他高級功能。了解這些差異將幫助你有效地利用 TypeScript。
2. 制定計劃： 從評估轉(zhuǎn)換的范圍開始。確定你是要轉(zhuǎn)換整個代碼庫還是特定模塊。創(chuàng)建一個路線圖或清單，以跟蹤進度并優(yōu)先處理轉(zhuǎn)換任務。
3. 逐步轉(zhuǎn)換： 考慮采用漸進式的方法，特別是對于較大的項目。從轉(zhuǎn)換小型、自包含的模塊或組件開始。這樣可以逐步熟悉 TypeScript，并逐步測試轉(zhuǎn)換后的代碼。
4. 利用 TypeScript 的特性： 利用 TypeScript 的特性提高代碼質(zhì)量和可維護性。使用靜態(tài)類型來盡早捕捉錯誤并提供更好的代碼文檔。探索接口、枚舉和泛型等高級特性，以強制執(zhí)行更嚴格的類型檢查并改進代碼組織。
5. 使用 TypeScript 編譯器： 配置 TypeScript 編譯器（tsc）以執(zhí)行更嚴格的類型檢查，并及早提供與類型相關(guān)的反饋。根據(jù)項目的要求，在 tsconfig.json 文件中調(diào)整編譯器選項。
6. 利用 TypeScript 工具： 使用支持 TypeScript 的編輯器和集成開發(fā)環(huán)境（IDE），提供自動完成、類型檢查和重構(gòu)支持。例如，TypeScript 的語言服務等工具可以大大提升你的開發(fā)體驗。
7. 全面測試： 在將 JavaScript 轉(zhuǎn)換為 TypeScript 時，請進行全面測試，以捕捉轉(zhuǎn)換過程中引入的任何問題或回歸。創(chuàng)建測試用例并進行單元測試，以驗證轉(zhuǎn)換后代碼的行為。

將 React JavaScript 項目轉(zhuǎn)換為 TypeScript：

將 JavaScript 項目轉(zhuǎn)換為 TypeScript 涉及對代碼庫進行更改和更新配置。下面是將 React JavaScript 項目轉(zhuǎn)換為 TypeScript 的逐步方法，包括代碼片段和項目樹結(jié)構(gòu)：

1. 安裝 TypeScript：

npm install --save-dev typescript

打開命令行界面并導航到 React 項目的根目錄。

運行以下命令將 TypeScript 安裝為開發(fā)依賴項：

1. 重命名 JavaScript 文件：

• 確定要轉(zhuǎn)換的項目中的 JavaScript 文件。
• 將文件重命名為.tsx擴展名，而不是.js。例如，將App.js重命名為App.tsx。

1. 更新 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"，允許使用現(xiàn)代 JavaScript 模塊語法，如import和export。
• "target": "es5"：此屬性設置輸出的 ECMAScript 版本。它指定編譯后的 JavaScript 代碼應與 ECMAScript 5 兼容，這是一個較舊的 JavaScript 版本，在各種瀏覽器和環(huán)境中廣泛支持。
• "strict": false：啟用嚴格模式將使 TypeScript 對代碼庫進行嚴格的類型檢查。我們將其設置為false，以減少從 JavaScript 遷移到 TypeScript 時的類型錯誤數(shù)量。

盡管確實可以在文件中將"strict": false設置為true，以減少從 JavaScript 遷移到 TypeScript 時的類型錯誤數(shù)量，但不建議在遷移到 TypeScript 后的項目中這樣做。TypeScript 中的"strict"編譯器選項啟用了一組嚴格的類型檢查規(guī)則，以確保更安全、更可靠的代碼。通過將"strict": true設置為true，TypeScript 可以執(zhí)行最佳實踐，并在編譯時捕獲潛在的錯誤，使你能夠及早解決它們并改進代碼質(zhì)量。

• 如果尚不存在，請在項目的根目錄中創(chuàng)建tsconfig.json文件。
• 打開tsconfig.json文件并更新以下選項：

這些屬性與tsconfig.json文件中提供的其他屬性一起，可以根據(jù)項目的具體要求配置 TypeScript 編譯器。

1. 解決外部庫：

npm install --save-dev @types/react @types/react-dom

確定項目中使用的任何沒有 TypeScript 支持的外部庫或依賴項。

使用 DefinitelyTyped（https://definitelytyped.org/[1]）或其他社區(qū)存儲庫搜索這些庫的 TypeScript 類型聲明文件（.d.ts）。

使用 npm 或 yarn 安裝類型聲明文件。例如：

1. 類型注釋：

interface Props {
   name: string;
   age: number;
 }

 const MyComponent: React.FC = ({ name, age }) => {
   // 組件代碼在這里
 };

• 開始向代碼庫添加類型注釋。
• 從 React 組件的 prop 類型開始，使用 TypeScript 接口或類型進行注釋。例如：

1. 解決類型錯誤：

npx tsc

• 通過使用正確的類型或解決任何不一致性來解決報告的類型錯誤。
• 運行 TypeScript 編譯器以識別代碼庫中的任何類型錯誤或警告：

1. 測試和重構(gòu)：

• 在轉(zhuǎn)換后，對代碼庫進行徹底測試，以確保功能和正確性。
• 考慮重構(gòu)代碼，以利用 TypeScript 的功能，例如使用更具體的類型和利用接口來改善代碼組織和文檔。

項目樹結(jié)構(gòu)：

- src/
  - components/
    - App.tsx
    - ...
  - index.tsx
- tsconfig.json
- package.json
- ...

恭喜！你已成功將 React JavaScript 代碼庫轉(zhuǎn)換為 TypeScript

處理轉(zhuǎn)換過程中的常見問題：

將 JavaScript 代碼轉(zhuǎn)換為 TypeScript 可能會遇到一些常見問題。以下是一些可能的挑戰(zhàn)以及應對方法：

1. 缺少類型信息： 由于 JavaScript 是一種動態(tài)類型語言，它可能缺乏類型信息。在轉(zhuǎn)換過程中，可能需要對變量、函數(shù)參數(shù)和返回類型進行推斷或手動注釋。
2. 外部庫的類型聲明缺失： 如果項目依賴于沒有類型聲明的外部庫，你可能需要查找或創(chuàng)建相應的類型聲明文件。
3. 類型錯誤和警告： TypeScript 編譯器可能會報告一些類型錯誤或警告。這些錯誤可能涉及類型不匹配、缺少屬性或其他類型不一致性。你需要逐個解決這些錯誤，并根據(jù)需要更正代碼。
4. 學習曲線： 從 JavaScript 遷移到 TypeScript 可能需要一些學習和適應時間。熟悉 TypeScript 的特性和最佳實踐，并逐步使用它們來改進代碼質(zhì)量和可維護性。

在處理這些挑戰(zhàn)時，始終參考 TypeScript 的文檔、社區(qū)和資源。TypeScript 有一個強大的社區(qū)支持，你可以從中獲取幫助、指導和最佳實踐建議。

希望這些步驟和策略能夠幫助你順利地將 JavaScript 項目轉(zhuǎn)換為 TypeScript 項目！祝你成功。

參考：https://dev.to/documatic/converting-javascript-codebase-to-typescript-1852

分享標題：老板說，給我把這個JSReact項目遷移到TypeScript
文章地址：http://uogjgqi.cn/article/djeocig.html