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