如何获取反应组件的一个特定道具的类型？

Question

假设您从任何库（例如从 node_modules）导入一个 React.Component（我们称之为 Foo）。现在您想从 Foo 中提取道具的类型（我们称它为 complexProp），以便您可以在其他地方使用它。

例子

Foo.tsx:

interface FooProps <P /*some generic stuff here*/> {
    complexProp: /*some super weird type you can not simply copy*/;
}

export class Foo extends React.Component<FooProps> {
    //...
    public render(){
        //...
        lookAtComplexProp(this.props.complexProp)
        //...
    }
}

function lookAtComplexProp(complexProp: /* I need the type of Foo.props.complexProp here*/) {
    //...
}

这有可能吗？
特别是，如果没有知道 Foo 背后的代码吗？换句话说，是一个像 type complexPropType = Foo.complexProp.getType(); 这样的语法可能吗？

Answer 1

您可以使用类型查询来获取任何属性接口的类型。简单类型查询的形式为 Type['PropName']。除了 'PropName' 之外，您还可以使用任何字符串文字类型或它们的联合来表示目标类型的键。在您的情况下，它可能看起来像这样：

function lookAtComplexProp<P /*copy constraint here*/>(complexProp: FooProps<P>['complexProp']){
    //...
}

或者如果您已经知道 P 想要什么 complexProp:

function lookAtComplexProp(complexProp: FooProps<number /* or other type */ >['complexProp']){
    //...
}

或者如果你的界面有一个默认的泛型参数，你可以省略类型参数：

interface FooProps <P = number> {
    complexProp: { complexStuff: P};
}

function lookAtComplexProp(complexProp: FooProps['complexProp']){
    //...
}

您还可以像为任何类型定义类型别名一样为其定义类型别名。但同样取决于你想做什么，有选项：

type myComplexType<P /*copy constraint here*/> = FooProps<P>['complexProp'] // you want the type alias to be generic so can get the type for any P.
type myComplexType = FooProps<number>['complexProp'] // you want complexProp type for a specific type argument
type myComplexType = FooProps['complexProp'] // FooProps has a default type argument

如何获取反应组件的一个特定道具的类型？

How to get type of one specific prop of a react component?

typescript

reactjs