如何轻松获得ts类型的react原生元素道具

Question

我发现自己最近关注了很多

// MyButton.tsx
import { TouchableWithoutFeedback } from "react-native"
interface Props {
onPress: () => void
}
//...
<TouchableWithoutFeedback onPress={this.props.onPress} />

从本质上讲，我正在围绕react原生组件制作自己的"包装器"组件，这些包装器组件通常采用与它们包装的react原生部件类似的道具。我必须经常重新打这些道具。

我不想扩展本机组件的所有道具，而是公开一些非常具体的道具。能做这样的真是太棒了

interface Props = {
onPress: TouchableWithoutFeedback.onPress
}

不幸的是，这不起作用，但这样的东西会对道具安全有很大帮助，因为我没有定义自己的类型。

这能以某种方式实现吗？

Answer 1

您需要使用类型定义，而不是类本身。假设您已安装@types/react-native:

import { TouchableWithoutFeedbackProps } from 'react-native'
interface Props {
onPress: TouchableWithoutFeedbackProps["onPress"] // <-- must be bracket notation
}

我认为他们所有的组件道具定义都遵循相同的命名模式，所以View将是ViewProps，Text将是TextProps等等

括号表示法是因为点表示法仅在ts 中的命名空间上有效