將現(xiàn)有React項目遷移到TypeScript：循序漸進指南

初學TypeScript時，經(jīng)常聽到的建議是：“轉換一個現(xiàn)有的項目！這是最好的學習方法！”不久之后，一位Twitter上的朋友主動提出要幫我做這件事——向我展示如何將一個React應用遷移到TypeScript。

本文旨在成為您的這位朋友，幫助您將自己的項目遷移到TypeScript。為了說明，我將使用我個人項目中的一些片段，這些片段是我在遷移過程中自己遷移的。

關鍵要點

• 通過向項目添加TypeScript、添加tsconfig.json、從簡單開始、轉換所有文件、提高嚴格性、清理和慶祝成功遷移來開始將React應用程序遷移到TypeScript。
• 可以逐步采用TypeScript，從一個簡單的組件開始。將文件擴展名更改為.tsx并添加類型注釋。逐步轉換項目中的所有文件。
• 通過啟用更嚴格的規(guī)則來提高tsconfig.json的嚴格性。這可以逐步完成，在出現(xiàn)錯誤時修復它們。目標是快速前進，稍后再返回修復任何問題。
• 在遷移過程中，利用@ts-ignore和FixMeLater等快捷方式來減輕負擔。隨著時間的推移，優(yōu)先使用正確的類型安全來替換這些快捷方式。

計劃

為了使這個過程不那么令人望而生畏，我們將將其分解成步驟，以便您可以分塊執(zhí)行遷移。在處理大型任務時，我總是發(fā)現(xiàn)這很有幫助。以下是我們將采取的所有步驟來遷移我們的項目：

1. 添加TypeScript
2. 添加tsconfig.json
3. 從簡單開始
4. 轉換所有文件
5. 提高嚴格性
6. 清理
7. 慶祝

注意：整個過程中最重要的步驟是第7步。雖然我們只能按順序完成這些步驟才能到達那里。

1. 向項目添加TypeScript

首先，我們需要將TypeScript添加到我們的項目中。假設您的React項目是用create-react-app引導的，我們可以按照文檔運行：

<code>npm install --save typescript @types/node @types/react @types/react-dom @types/jest</code>

或者如果您使用的是yarn：

<code>yarn add typescript @types/node @types/react @types/react-dom @types/jest</code>

請注意，我們還沒有將任何內容更改為TypeScript。如果我們運行本地啟動項目的命令（在我的情況下為yarn start），則沒有任何變化。如果是這種情況，那就太好了！我們準備進入下一步。

2. 添加tsconfig.json

在我們可以利用TypeScript之前，我們需要通過tsconfig.json進行配置。我們開始的簡單方法是使用以下命令構建一個：

<code>npx tsc --init</code>

這讓我們得到了一些基礎知識。

我們尚未與TypeScript交互。我們只是采取了必要的措施來做好準備。我們的下一步是將文件遷移到TypeScript。有了這個，我們可以完成此步驟并繼續(xù)下一步。

3. 從一個簡單的組件開始

TypeScript的美妙之處在于您可以逐步采用它。我們可以從一個簡單的組件開始遷移的第一部分。對于我的項目，我將從一個看起來像這樣的Button組件開始：

<code>npm install --save typescript @types/node @types/react @types/react-dom @types/jest</code>

要正確轉換它，我們需要做兩件事：

1. 將文件擴展名更改為.tsx
2. 添加類型注釋

由于此組件采用兩個props，我們需要更改一些內容：

<code>yarn add typescript @types/node @types/react @types/react-dom @types/jest</code>

讓我們通過運行項目來仔細檢查一切是否正常運行，以確保我們沒有破壞任何東西。請注意，在這里，react-scripts會自動檢測新的更改并為我們修改tsconfig.json！瞧！這多么漂亮啊？

如果一切順利，我們的項目將保持工作狀態(tài)。給自己拍拍背！您已成功將第一個文件遷移到TypeScript。如果我們想在這里停止，我們可以，但讓我們繼續(xù)前進。

4. 轉換所有文件

下一步是對項目中的所有文件執(zhí)行步驟3的操作。如果您要遷移的項目相當大，我建議您多次迭代執(zhí)行此操作。否則，您可能會讓自己筋疲力盡。

在此步驟中，您可能需要根據(jù)使用的第三方庫添加其他包。例如，我使用的是moment，因此我必須運行yarn add -D @types/moment才能將類型添加為devDependency。

在執(zhí)行此操作時，還需要記住以下幾點：

• 通過在錯誤之前的行添加// @ts-ignore來抑制TypeScript錯誤
• 如果文件使用jsx（即），則文件擴展名必須為.tsx而不是.ts
• 本地運行項目以確保一切正常（它們應該是）

完成此步驟后，困難的工作就完成了！我們的項目將使用TypeScript，但我們需要提高嚴格性才能利用其優(yōu)勢。

5. 提高tsconfig.json的嚴格性

現(xiàn)在，我們可以通過在tsconfig.json中啟用更嚴格的規(guī)則來提高嚴格性。值得慶幸的是，react-scripts會在本地運行我們的項目時通知我們任何類型錯誤。我們將按照以下步驟進行操作：

1. 啟用規(guī)則
2. 本地啟動項目
3. 修復錯誤

我們將對以下規(guī)則重復此過程：

• "noImplicitAny": true
• "strictNullChecks": true
• "noImplicitThis": true
• "alwaysStrict": true

我想分享一個技巧。如果您發(fā)現(xiàn)某些內容隱式地具有類型any，并且您不確定此時如何修復它，請不要修復。創(chuàng)建這個并使用它來消除錯誤：

<code>npx tsc --init</code>

我們的目標是快速前進，稍后再返回修復這些問題。

這將為我們的項目帶來更大的類型安全性。如果您想閱讀更多關于編譯器選項的信息，您可以閱讀TypeScript手冊中的相關內容。

完成此操作后，我們可以替換這些：

• "noImplicitAny": true
• "strictNullChecks": true
• "noImplicitThis": true
• "alwaysStrict": true

用這個：

• "strict": true

這也啟用了這些嚴格選項：

• strictBindCallApply
• strictNullChecks
• strictFunctionTypes
• strictPropertyInitialization

此時，我們已經(jīng)達到了項目中的標準嚴格性級別。如果我們想添加其他檢查，我們可以添加這些規(guī)則：

• "noUnusedLocals": true
• "noUnusedParameters": true
• "noImplicitReturns": true
• "noFallthroughCasesInSwitch": true

一旦我們達到了我們滿意的嚴格性級別，我們就可以繼續(xù)下一步。

6. 清理快捷方式

如果您添加了@ts-ignore或使用了FixMeLater類型，現(xiàn)在是返回并修復它們的時候了。我們不必一次性完成所有這些操作，或者永遠不必完成，但這將是確保項目中最大類型安全的最后一步。

有時修復這些的努力不值得花費時間，而有時是值得的。您必須與您的團隊討論并決定什么是有意義的。

7. 慶祝

我們做到了！我們正式將項目遷移到TypeScript?；c時間慶祝您的工作。這當然不是一件微不足道的事情。特別是如果您在一個大型代碼庫中工作。

需要記住的事項

在回顧我們的工作時，以下是一些在將React項目遷移到TypeScript時需要記住的事項。

從小處著手

利用TypeScript逐步采用的能力。一次一個文件地進行，按照自己的節(jié)奏進行。做對您和您的團隊有意義的事情。不要試圖一次性解決所有問題。

隨著時間的推移提高嚴格性

無需從一開始就具有最大嚴格性。這是一個旅程。隨著時間的推移提高級別。最終，您將達到一個感覺舒適的級別。如果您沒有100%的嚴格性，不要感到難過。一些類型安全總比沒有類型安全好。

依靠快捷方式

@ts-ignore和FixMeLater的技巧可以幫助減輕遷移的負擔。并非所有內容都需要一次更改。根據(jù)需要使用快捷方式，但不要因為使用它們而感到難過。同樣，重點是遷移，但這不應該很痛苦。隨著時間的推移，您可以優(yōu)先使用正確的類型安全來替換這些內容。但請記住，這些工具可供您使用，因此請使用它們。

這并不是將React項目遷移到TypeScript的唯一方法。但是，這對我來說是有效的。我希望它能像幫助我一樣幫助您。

進一步閱讀

• 使用TypeScript的React：最佳實踐
• 提高TypeScript技能的實用方法
• TypeScript如何讓您成為更好的JavaScript開發(fā)人員
• JavaScript：從新手到忍者，第二版
• React和React Native——第二版

特別感謝Karl Horky，他通過解釋React.FC類型不推薦使用，因為它幾乎沒有好處并且有一些缺點，從而伸出援手。有關更多信息，請參閱此GitHub討論。

關于將React應用程序遷移到TypeScript的常見問題解答

什么是TypeScript，為什么我應該考慮將我的React應用程序遷移到它？TypeScript是JavaScript的靜態(tài)類型超集，它提供增強的類型檢查、代碼質量和工具支持。遷移到TypeScript可以幫助您在編譯時捕獲錯誤，提高代碼可維護性，并在處理React應用程序時增強開發(fā)人員體驗。

如何開始將我的React應用程序遷移到TypeScript？要開始，您可以使用帶有TypeScript模板的Create React App之類的工具將TypeScript添加到您的項目中，或者手動配置您的項目以支持TypeScript。您還需要將您的.js和.jsx文件分別重命名為.ts和.tsx。

將我的JavaScript代碼轉換為TypeScript的過程是什么？此過程通常包括： a. 將您的JavaScript文件重命名為帶有.ts和.tsx擴展名的TypeScript文件。 b. 向您的變量、函數(shù)和props添加類型注釋。 c. 解決類型錯誤并修復TypeScript編譯器標識的任何問題。 d. 利用TypeScript功能（如接口和枚舉）來定義數(shù)據(jù)結構和常量。

我可以逐步將我的React應用程序遷移到TypeScript嗎？是的，您可以逐步遷移您的應用程序。您可以一次轉換一個組件或模塊，同時維護現(xiàn)有的JavaScript代碼庫。這樣，您可以逐步過渡到TypeScript，而不會中斷您的開發(fā)工作流程。

使用TypeScript和React的好處是什么？一些好處包括更好的代碼質量、提高的開發(fā)人員生產(chǎn)力、增強的代碼自動完成、更強大的重構工具以及早期檢測常見錯誤。它還通過類型注釋提供更清晰、更具自文檔性的代碼。

在遷移到TypeScript時，如何處理第三方庫和依賴項？您可以在DefinitelyTyped上找到許多流行庫的TypeScript類型定義文件（通常帶有.d.ts擴展名），或者使用@types之類的工具。如果類型定義不可用，您可以創(chuàng)建自己的類型定義，或者使用TypeScript的any類型來處理未類型化的庫。

如何配置我的開發(fā)工具和IDE以在React應用程序中使用TypeScript？大多數(shù)流行的代碼編輯器和IDE（如Visual Studio Code）都對TypeScript有很好的支持。您可以為您的編輯器安裝TypeScript插件和擴展，以從增強的TypeScript集成、自動完成和錯誤檢查中受益。

在遷移到TypeScript期間，我可能會遇到哪些常見挑戰(zhàn)？常見的挑戰(zhàn)包括解決類型錯誤、處理缺少類型定義的第三方庫、理解TypeScript的類型系統(tǒng)以及適應TypeScript強制執(zhí)行的更嚴格的類型檢查。

以上是如何將React應用程序遷移到打字稿的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！