如何为 React Native Web Pressable 组件正确添加 onHoverIn TS 类型？

Question

我将 React Native Web 与 Typescript 结合使用，我想使用来自 lib 的React Native Web 可按压组件。

但是，当 VSCode 将诸如onHoverIn之类的 React Native Web 道具类型归咎于时，我遇到了一个问题。 这种情况下的主要问题是 React Native 道具类型定义不包含来自 RNWeb 的增强道具

有人可以给我一个关于如何以正确的方式解决它的提示吗？
我不想在我想使用 Pressable 的每个文件中禁用 TS 检查

这是错误消息：

type '{ 
children: Element; 
accessibilityRole: "button"; 
delayLongPress: number; 
disabled: false; 
onHoverIn: () => void; 
onHoverOut: () => void; 
onKeyDown: () => void; 
onLongPress: () => void; 
onPress: () => void; 
onPressIn: () => void; 
onPressOut: () => void; }' is not assignable to type 
  'IntrinsicAttributes & PressableProps & RefAttributes<View>'.

Property 'onHoverIn' does not exist on type
  'IntrinsicAttributes & PressableProps & RefAttributes<View>'.ts(2322)

代码示例：

import React from 'react';
import {
  Text, Button, ScrollView, StyleSheet, View, Pressable 
} from 'react-native'; // in webpack conf I have an alias that fetches data from the React Native Web

....

 <Pressable
    accessibilityRole="button"
    delayLongPress={750}
    disabled={false}
    onHoverIn={() => {
      console.log('onHoverIn');
    }}
    onHoverOut={() => {
      console.log('onHoverOut');
    }}
  >
    <Text>Pressable</Text>
  </Pressable>

谢谢你的帮助！

Answer 1

我设法以一种“不错”的方式解决了这个问题。 它只是创建重新导出原始 Pressable 但包含增强道具的组件包装器。

我不确定这是“最好的”解决方案，因为我们必须物理创建一些 React 组件作为包装器，但我们的问题仅与类型有关

工作示例：

// This file is mainly for extending the basic Pressable RN props type
// by the React Native Web-specific properties to avoid TS blaming
import * as React from 'react';
import {
  Pressable as RNWebPressable,
  PressableProps as RNWebPressableProps
} from 'react-native';

export type PressableProps = RNWebPressableProps & {
  // RNWeb properties
  onHoverIn: (e: MouseEvent) => void;
  onHoverOut: (e: MouseEvent) => void;
}

export function Pressable(props: PressableProps) {
  return (
    <RNWebPressable {...props} />
  );
}