跳到主要內容

一流 TypeScript 支援

·5 分鐘閱讀
Luna Wei
Luna Wei
Meta 軟體工程師
Nick Gerleman
Nick Gerleman
Meta 軟體工程師

隨著 0.71 版本的發布，React Native 正在透過以下變更投資 TypeScript 體驗

在這篇文章中，我們將涵蓋這些變更對您作為 TypeScript 或 Flow 使用者的意義。

全新應用程式範本預設為 TypeScript​

從 0.71 版本開始，當您透過 React Native CLI 建立新的 React Native 應用程式時，您將預設取得 TypeScript 應用程式！

npx react-native init My71App --version 0.71.0

Screenshot of an iPhone simulator running a new app generated by React Native CLI. Alongside the simulator is a screenshot of Visual Studio Code editor opened to "App.tsx" to illustrate it is running a TypeScript file.

新產生應用程式的起點將是 App.tsx 而不是 App.js – 完全以 TypeScript 輸入。新專案已設定 tsconfig.json，因此您的 IDE 開箱即用即可協助您立即撰寫類型化程式碼！

宣告隨 React Native 一起發布​

0.71 是第一個具有內建 TypeScript (TS) 宣告的版本。

先前，React Native 的 TypeScript 宣告由 @types/react-native 提供，託管在 DefinitelyTyped 儲存庫中。將 TypeScript 類型與 React Native 原始碼共置的決定是為了提高正確性和維護性。

@types/react-native 僅提供穩定版本的類型。這表示如果您曾經想在 TypeScript 中使用 React Native 的預先發布版本進行開發，則必須使用舊版本的類型，這可能不準確。發布 @types/react-native 也容易出錯。發布版本落後於 React Native 發布版本，而且該流程涉及手動檢查對 React Native 公開 API 所做的類型變更，並更新 TS 宣告以符合。

由於 TS 類型與 React Native 原始碼共置，因此 TS 類型具有更高的可見性和所有權。我們的團隊正積極開發工具，以維持 Flow 和 TS 之間的一致性。

此變更也消除了 React Native 使用者管理的相依性。升級到 0.71 或更高版本時，您可以移除 @types/react-native 作為相依性。請參閱新應用程式範本，了解如何設定 TypeScript 支援。

我們計劃針對 0.73 及更高版本棄用 @types/react-native。具體而言，這表示

  • 將發布追蹤 React Native 0.71 和 0.72 版本的 @types/react-native。它們將與相關發布分支上 React Native 中的類型相同。
  • 對於 React Native 0.73 及更高版本，TS 類型將僅可從 React Native 取得。

如何移轉​

請盡早移轉至新的共置類型。以下是根據您的需求移轉的更多詳細資訊。

應用程式維護者​

升級到 React Native >= 0.71 後，您可以從 devDependency 中移除 @types/react-native。

注意

如果您因為您使用的函式庫將 @types/react-native 參考為 peerDependency 而收到警告，請針對該函式庫提交問題或開啟 PR 以使用選用的 peerDependencies，並暫時忽略警告。

函式庫維護者​

以低於 0.71 的 React Native 版本為目標的函式庫可能會使用 @types/react-native 的 peerDependency 來根據應用程式版本的類型定義進行類型檢查。此相依性應在 peerDependenciesMeta 中標記為選用，以便沒有 TypeScript 的使用者或 0.71 使用者不需要類型定義，因為類型定義是內建的。

依賴 @types/react-native 的 TypeScript 宣告維護者​

查看 0.71 版本導入的重大變更，以查看您是否已準備好移轉。

如果我使用 Flow 怎麼辦？​

Flow 使用者可以繼續類型檢查以 0.71+ 為目標的應用程式，但範本中不再包含其開箱即用的組態邏輯。

Flow 使用者先前已透過合併新應用程式範本中的 .flowconfig 並手動更新 flow-bin 來升級 React Native 的 Flow 類型。新應用程式範本不再具有 .flowconfig，但 React Native 儲存庫中仍然存在一個，可用作您應用程式的基礎。

如果您需要以 Flow 開始新的 React Native 應用程式，您可以參考 0.70 版本的新應用程式範本。

如果我在 TypeScript 宣告中發現錯誤怎麼辦？​

無論您是使用內建 TS 類型還是 @types/react-native，如果您發現錯誤，請提交 PR 至 React Native 和 DefinitelyTyped 儲存庫。如果您不知道如何修正，請在 React Native 儲存庫中提交 GitHub 問題，並在問題中提及 @lunaleaps。

文件以 TypeScript 為優先​

為了確保一致的 TypeScript 體驗，我們已對 React Native 文件進行多項更新，以反映 TypeScript 作為新的預設語言。

程式碼範例現在允許內嵌 TypeScript，並且已更新超過 170 個互動式程式碼範例，以在新範本中通過 linting、格式化和類型檢查。大多數範例在 TypeScript 和 JavaScript 中都有效。如果它們不相容，您可以查看任一語言的範例。

如果您發現錯誤或有改進之處，請記住，該網站也是開放原始碼，我們很樂意看到您的 PR！

感謝 React Native TypeScript 社群！​

最後，我們要感謝社群多年來為確保 React Native 開發人員可以使用 TypeScript 所做的所有工作。

我們要感謝自 2015 年以來一直維護 @types/react-native 的所有貢獻者！我們看到了大家為確保 React Native 使用者獲得最佳體驗所付出的努力和關懷。

感謝 @acoates、@eps1lon、@kelset、@tido64、@Titozzz 和 @ZihanChen-MSFT 協助諮詢、質疑、溝通和審查將 TypeScript 類型移至 React Native 的變更。

同樣地，我們要感謝 react-native-template-typescript 的維護者，感謝他們從第一天起就支援 React Native 中新應用程式開發的 TypeScript 體驗。

我們期待在 React Native 儲存庫中更直接地協作，並繼續改進 React Native 開發人員體驗！