跳至主内容

严格的 TypeScript API(可选)

非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

严格的 TypeScript API 是我们为 React Native 未来稳定的 JavaScript API 提供的预览版本。

具体来说,这是一套为 react-native npm 包设计的新 TypeScript 类型定义,从 0.80 版本开始提供。这些类型提供了更强大、更具未来性的类型准确性,使我们能够自信地将 React Native 的 API 演变为稳定形态。启用严格的 TypeScript API 会带来一些结构上的类型差异,因此是一次性的破坏性变更。

新类型具有以下特性:

  1. 直接从源代码生成 —— 提升覆盖率和正确性,提供更强的兼容性保证。

  2. 严格限定于 react-native 的索引文件 —— 精准定义公共 API 边界,确保内部文件变更不会破坏 API 兼容性。

当社区准备好后,严格的 TypeScript API 将成为未来的默认 API — 并与移除深层导入的变更同步实施。

如何启用

我们将这些新类型与现有类型同时发布,您可以在准备好时选择迁移。我们鼓励早期采用者和新创建的应用程序通过修改 tsconfig.json 文件来启用。

启用新类型是破坏性变更,因为部分新类型更新了名称和结构(尽管许多应用不会受影响)。您可以在下一节了解具体的破坏性变更。

tsconfig.json
{
"extends": "@react-native/typescript-config",
"compilerOptions": {
...
"customConditions": ["react-native-strict-api"]
}
}
实现原理

这将指示 TypeScript 从新的 types_generated/ 目录解析 react-native 类型,而非此前手动维护的 types/ 目录。无需重启 TypeScript 或编辑器。

严格的 TypeScript API 遵循我们移除 React Native 深层导入的 RFC。因此部分 API 不再从根目录导出,这是为了减少 React Native API 的整体暴露范围。

API 反馈

提交反馈:我们将与社区合作,在至少未来两个 React Native 版本中确定最终导出的 API。请在反馈讨论串分享您的意见。

另请参阅我们的公告博客文章了解动机和时间表。

迁移指南

Codegen 类型现在应从 react-native 包导入

用于代码生成的类型(如 Int32DoubleWithDefault 等)现在统一归入 CodegenTypes 命名空间。同样,codegenNativeComponentcodegenNativeCommands 现在也应从 react-native 包导入,而非深层导入。

命名空间的 CodegenTypes 以及 codegenNativeCommandscodegenNativeComponent 在未启用严格 API 时也可从 react-native 包获取,以方便第三方库过渡。

之前

import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type {
Int32,
WithDefault,
} from 'react-native/Libraries/Types/CodegenTypes';

interface NativeProps extends ViewProps {
enabled?: WithDefault<boolean, true>;
size?: Int32;
}

export default codegenNativeComponent<NativeProps>(
'RNCustomComponent',
);

之后

import {CodegenTypes, codegenNativeComponent} from 'react-native';

interface NativeProps extends ViewProps {
enabled?: CodegenTypes.WithDefault<boolean, true>;
size?: CodegenTypes.Int32;
}

export default codegenNativeComponent<NativeProps>(
'RNCustomComponent',
);

移除 *Static 类型

之前

import {Linking, LinkingStatic} from 'react-native';

function foo(linking: LinkingStatic) {}
foo(Linking);

之后

import {Linking} from 'react-native';

function foo(linking: Linking) {}
foo(Linking);

以下 API 先前以 *Static 命名并附带对应类型的变量声明。多数情况下存在别名使值和类型使用相同标识符导出,但部分存在缺失。

(例如,之前存在 AlertStatic 类型、类型为 AlertStaticAlert 变量,以及作为 AlertStatic 别名的 Alert 类型。但在 PixelRatio 的情况下,存在 PixelRatioStatic 类型和该类型的 PixelRatio 变量,没有额外的类型别名。)

受影响的 API

  • AlertStatic

  • ActionSheetIOSStatic

  • ToastAndroidStatic

  • InteractionManagerStatic(此情况没有相关的 InteractionManager 类型别名)

  • UIManagerStatic

  • PlatformStatic

  • SectionListStatic

  • PixelRatioStatic(此情况没有相关的 PixelRatio 类型别名)

  • AppStateStatic

  • AccessibilityInfoStatic

  • ImageResizeModeStatic

  • BackHandlerStatic

  • DevMenuStatic(此情况没有相关的 DevMenu 类型别名)

  • ClipboardStatic

  • PermissionsAndroidStatic

  • ShareStatic

  • DeviceEventEmitterStatic

  • LayoutAnimationStatic

  • KeyboardStatic(此情况没有相关的 Keyboard 类型别名)

  • DevSettingsStatic(此情况没有相关的 DevSettings 类型别名)

  • I18nManagerStatic

  • EasingStatic

  • PanResponderStatic

  • NativeModulesStatic(此情况没有相关的 NativeModules 类型别名)

  • LogBoxStatic

  • PushNotificationIOSStatic

  • SettingsStatic

  • VibrationStatic

部分核心组件现在改为函数组件而非类组件

  • View

  • Image

  • TextInput

  • Modal

  • Text

  • TouchableWithoutFeedback

  • Switch

  • ActivityIndicator

  • ProgressBarAndroid

  • InputAccessoryView

  • Button

  • SafeAreaView

由于此变更,访问这些视图的引用类型需要使用 React.ComponentRef<typeof View> 模式,该模式对类组件和函数组件均适用,例如:

const ref = useRef<React.ComponentRef<typeof View>>(null);

其他破坏性变更

Animated 类型变更

Animated 节点原先是根据插值输出定义的泛型类型。现在改为非泛型类型,其 interpolate 方法为泛型方法。

Animated.LegacyRef 不再可用。

统一可选属性的类型

在新类型中,每个可选属性都将被类型化为 type | undefined

移除部分已弃用类型

All types listed in DeprecatedPropertiesAlias.d.ts are inaccessible under the Strict API.

移除遗留的组件属性

在类型定义中存在但未被组件使用或缺少定义的一些属性已被移除(例如:Text 上的 lineBreakModeScrollView 上的 scrollWithoutAnimationTo,以及在 transform 数组外部定义的 transform 样式)。

之前可访问的私有类型辅助工具现可能被移除

由于先前类型定义的配置,每个定义的类型都可以从 react-native 包中访问。这包括未显式导出的类型以及仅供内部使用的辅助类型。

值得注意的例子包括与 StyleSheet 相关的类型(例如 RecursiveArrayRegisteredStyleFalsy)以及 Animated 相关的类型(例如 WithAnimatedArrayWithAnimatedObject)。