RN-TypeScript组件包装器TS2604报错：如何正确添加类型注解？

问题根源 #

你遇到的TS2604错误，核心原因有两个：

1. 错误地使用了组件实例类型（TouchableOpacity | View）而非组件构造函数类型标注Wrapper；
2. 给不支持onPress属性的View组件传递了该属性，导致props类型不兼容。

正确修复方案 #

1. 导入必要类型

先从react-native导入对应的类型定义：

import type { ViewProps, TouchableOpacityProps } from 'react-native';
import { View, TouchableOpacity } from 'react-native';

2. 正确标注Wrapper类型

需要使用组件构造函数的联合类型typeof TouchableOpacity | typeof View，而非实例类型：

const Wrapper: typeof TouchableOpacity | typeof View = onPress ? TouchableOpacity : View;

3. 修复props传递兼容性

因为View不接受onPress属性，所以要条件性传递该属性，避免类型冲突：

return (
  <Wrapper style={style} {...(onPress ? { onPress } : {})}>
    {children}
  </Wrapper>
);

更严谨的类型定义（可选） #

如果你想让Wrapper的props类型更明确，可以自定义兼容两者的props类型，再用React.ComponentType标注：

// 定义兼容View和TouchableOpacity的props类型
type WrapperProps = ViewProps & Partial<Pick<TouchableOpacityProps, 'onPress'>>;

const Wrapper: React.ComponentType<WrapperProps> = onPress ? TouchableOpacity : View;

这种方式下，TS会自动提示Wrapper允许的props，同时onPress为可选属性，完全符合两个组件的要求。

为什么之前的注解无效？ #

• ReactNode是组件渲染结果（如JSX元素）的类型，不是组件本身的类型，用来标注Wrapper完全错误；
• TouchableOpacity | View是组件实例的类型，而你需要的是能用来渲染JSX的组件构造函数类型，也就是typeof TouchableOpacity和typeof View。

内容的提问来源于stack exchange，提问作者Wasteland