对 TypeScript 的一流支持
随着 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
新生成应用的起点将是 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
引用而导致警告,请为该库提交一个 Issue 或开启一个 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 声明中有 bug 怎么办?
无论您是使用内置的 TS 类型还是 @types/react-native
,如果您发现 bug,请同时向 React Native 和 DefinitelyTyped 仓库提交 PR。如果您不知道如何修复,请在 React Native 仓库中提交一个 GitHub issue 并提及 @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 的开发者体验!