如何轻松获得ts类型的反应本征道具？

Question

我发现自己最近做了很多事情

// MyButton.tsx
import { TouchableWithoutFeedback } from "react-native"

interface Props {
 onPress: () => void
}

//...

<TouchableWithoutFeedback onPress={this.props.onPress} />

本质上，我是在反应本机组件周围制作自己的“包装”组件，而这些包装机组件通常采用类似的道具作为它们包装的本机组件。 我必须总是重新键入这些道具。

我不想扩展本机组件的所有支持，而是公开一些非常具体的支持。 做这样的事情真棒

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中的名称空间有效