如何輕松獲得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中的名稱空間有效