如何將React應用程序遷移到打字稿

將現有React項目遷移到TypeScript：循序漸進指南

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

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

關鍵要點

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

計劃

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

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。有了這個，我們可以完成此步驟並繼續下一步。

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！瞧！這多麼漂亮啊？

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

4. 轉換所有文件

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

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

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

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

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

5. 提高tsconfig.json的嚴格性

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

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

我們將對以下規則重複此過程：

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

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

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

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

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

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

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

用這個：

• "strict": true

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

• strictBindCallApply
• strictNullChecks
• strictFunctionTypes
• strictPropertyInitialization

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

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

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

6. 清理快捷方式

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

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

7. 慶祝

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

需要記住的事項

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

從小處著手

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

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

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

依靠快捷方式

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

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

進一步閱讀

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

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

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

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

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

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

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

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

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

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

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

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