跳至主要内容

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 并暂时忽略警告。

库维护者​

针对 React Native 0.71 以下版本的库可以使用 @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，如果您发现错误，请同时向 React Native 和 DefinitelyTyped 存储库提交 PR。如果您不知道如何修复它，请在 React Native 存储库中提交 GitHub 问题，并在问题中提及 @lunaleaps。

文档以 TypeScript 为先​

为了确保一致的 TypeScript 体验，我们对 React Native 文档进行了一些更新，以反映 TypeScript 作为新的默认语言。

代码示例现在允许内联 TypeScript，并且超过 170 个交互式代码示例已更新，以在新的模板中通过 lint 检查、格式化和类型检查。大多数示例在 TypeScript 和 JavaScript 中均有效。如果它们不兼容，您可以查看两种语言中的示例。

如果您发现错误或有改进建议，请记住该网站也是开源的，我们非常乐意看到您的 PR！

感谢 React Native TypeScript 社区！​

最后，我们要感谢社区多年来所做的所有工作，以确保 TypeScript 可供 React Native 开发人员使用。

我们要感谢所有自 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 开发人员的体验！