严格的 TypeScript API(可选)
本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →
严格的 TypeScript API 是我们为 React Native 未来稳定的 JavaScript API 提供的预览版本。
具体来说,这是一套为 react-native npm 包设计的新 TypeScript 类型定义,从 0.80 版本开始提供。这些类型提供了更强大、更具未来性的类型准确性,使我们能够自信地将 React Native 的 API 演变为稳定形态。启用严格的 TypeScript API 会带来一些结构上的类型差异,因此是一次性的破坏性变更。
新类型具有以下特性:
-
直接从源代码生成 —— 提升覆盖率和正确性,提供更强的兼容性保证。
-
严格限定于
react-native的索引文件 —— 精准定义公共 API 边界,确保内部文件变更不会破坏 API 兼容性。
当社区准备好后,严格的 TypeScript API 将成为未来的默认 API — 并与移除深层导入的变更同步实施。
如何启用
我们将这些新类型与现有类型同时发布,您可以在准备好时选择迁移。我们鼓励早期采用者和新创建的应用程序通过修改 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 的整体暴露范围。
迁移指南
Codegen 类型现在应从 react-native 包导入
用于代码生成的类型(如 Int32、Double、WithDefault 等)现在统一归入 CodegenTypes 命名空间。同样,codegenNativeComponent 和 codegenNativeCommands 现在也应从 react-native 包导入,而非深层导入。
命名空间的 CodegenTypes 以及 codegenNativeCommands 和 codegenNativeComponent 在未启用严格 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 类型、类型为 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
由于此变更,访问这些视图的引用类型需要使用 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)。