跳到主要内容

严格 TypeScript API（选择加入）

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

具体来说，这是从 0.80 版本开始可用的一组新的 react-native npm 包 TypeScript 类型。这些类型提供了更强、更面向未来的类型准确性，并将使我们能够自信地将 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 遵循我们的 RFC 以从 React Native 中移除深层导入。因此，某些 API 不再在根目录导出。这是故意的，目的是减少 React Native API 的整体表面面积。

API 反馈

发送反馈：我们将与社区合作，在接下来的（至少）两个 React Native 版本中最终确定我们导出哪些 API。请在我们的 反馈线程 中分享您的反馈。

另请参阅我们的 公告博客文章 以了解有关我们的动机和时间表的更多信息。

迁移指南​

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

用于代码生成的类型，如 Int32、Double、WithDefault 等，现在可在单个 CodegenTypes 命名空间下使用。同样，codegenNativeComponent 和 codegenNativeCommands 现在可以从 react-native 包导入，而无需使用深层导入。

即使未启用严格 API，命名空间 CodegenTypes 以及 codegenNativeCommands 和 codegenNativeComponent 也可从 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 类型，类型为 AlertStatic 的 Alert 变量，以及作为 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

由于此更改，访问这些视图的 ref 类型需要使用 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 上的 lineBreakMode，ScrollView 上的 scrollWithoutAnimationTo，在 transform 数组之外定义的 transform 样式）。

以前可访问的私有类型帮助器现在可能被移除​

由于以前类型定义的配置，每个定义的类型都可以从 react-native 包访问。这包括未明确导出的类型和仅应在内部使用的帮助器类型。

这方面的显著示例是与 StyleSheet 相关的类型（如 RecursiveArray、RegisteredStyle 和 Falsy）和 Animated（如 WithAnimatedArray 和 WithAnimatedObject）。