Question

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

示例

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

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

1 个答案: