跳到主要内容

对 TypeScript 的一流支持

· 阅读需 6 分钟
Luna Wei
Luna Wei
Software Engineer @ Meta
Nick Gerleman
Nick Gerleman
Software Engineer @ Meta

随着 0.71 版本的发布,React Native 致力于提升 TypeScript 体验,做出了以下改进:

本文将介绍这些变化对你作为 TypeScript 或 Flow 用户意味着什么。

新应用模板默认使用 TypeScript

从 0.71 版本开始,通过 React Native CLI 创建的新应用默认将是一个 TypeScript 应用!

npx react-native init My71App --version 0.71.0

iPhone 模拟器中运行由 React Native CLI 生成的新应用截图。旁边是 Visual Studio Code 编辑器打开的 "App.tsx" 文件截图,说明正在运行 TypeScript 文件。

新生成的应用起点将是 App.tsx,而非 App.js —— 完全使用 TypeScript 类型定义。新项目已经配置好了 tsconfig.json,这样你的 IDE 可以开箱即用,协助你立刻编写有类型的代码!

React Native 自带的声明文件

0.71 是第一个内置 TypeScript(TS)声明文件的版本。

此前,React Native 的 TypeScript 声明文件由托管在 DefinitelyTyped 仓库中的 @types/react-native 提供。将 TypeScript 类型和 React Native 源码共置的决策旨在提升准确性和维护性。

@types/react-native 只提供稳定版本的类型定义。这意味着如果你想用 TypeScript 开发预发布版本的 React Native,你只能使用旧版本的类型定义,可能存在不准确之处。发布 @types/react-native 过程也容易出错。其版本发布时间滞后于 React Native,且需要手动检查 React Native 公共 API 的类型变更并更新 TS 声明。

将 TS 类型与 React Native 源码共置后,可见性和所有权提升。我们的团队正积极开发工具,保证 Flow 与 TS 之间的类型同步。

此变化也删除了 React Native 用户需管理的一个依赖。升级到 0.71 或更高版本时,可以删除 @types/react-native 依赖。请参阅新应用模板,了解如何设置 TypeScript 支持。

我们计划在 0.73 及以后版本弃用 @types/react-native。具体来说:

  • 会发布跟踪 React Native 0.71 和 0.72 版本的 @types/react-native,它们将与对应发布分支中的类型保持一致。
  • 0.73 及以后版本的 React Native,TS 类型将仅由 React Native 自带提供。

如何迁移

请尽快迁移到新的共置类型。以下是根据你的情况提供的迁移详情。

应用维护者

升级到 React Native >= 0.71 后,可以从 devDependency 中移除 @types/react-native

备注

如果你看到某个你用的库引用 @types/react-native 作为 peerDependency 导致警告,请向那个库提交 issue 或 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,如果发现错误,请提交 PR 至 React NativeDefinitelyTyped 仓库。如果不知道如何修复,请在 React Native 仓库开启 issue,并在 issue 中提及 @lunaleaps

文档以 TypeScript 优先

为了确保一致的 TypeScript 体验,我们对 React Native 文档进行了多项更新,将 TypeScript 作为默认语言。

代码示例现支持内联 TypeScript,且超过 170 个交互式示例已更新,可通过新模板完成代码格式、lint 和类型检查。大多数示例同时符合 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 开发者的体验!