Как получить тип реквизита компонента, если компонент определен с параметрами типа

#reactjs #typescript

Вопрос:

Хотя React.ComponentProps<MyComponent> это довольно удобно, я не могу понять, как использовать его для создания типа MyComponent's реквизита, когда MyComponent содержит параметры типа, например (сокращенный тип, взятый из модуля)

 declare type TMyComponent = <T = unknown>(props: {foo: string, bar: T}) => ReactElement
 

Каким-то образом, используя TMyComponent , я хотел бы построить тип, например, {foo: string, bar: number}

Хотя следующее не достигает того, что я пытаюсь сделать, я надеюсь, что это демонстрирует, что я пытаюсь сделать,

 type MyDesiredType = React.ComponentProps<TMyComponent<number>>
 

Как я могу создать тип из реквизитов компонента, который принимает параметры типа?

Ответ №1:

Общий синтаксис должен быть близок к типу, то же самое относится и к типу по умолчанию, в вашем случае « unknown » является переменной по умолчанию в синтаксисе JS.

 type TMyComponent<T = unknown> =(props: {foo: string, bar: T}) => React.ReactElement

type MyDesiredType = React.ComponentProps<TMyComponent<number>>
// Resolves to
type MyDesiredType = {
    foo: string;
    bar: number;
}

type MyDesiredTypeUnknown = React.ComponentProps<TMyComponent>
// Resolves to
type MyDesiredTypeUnknown = {
    foo: string;
    bar: unknown;
}
 

Игровая площадка TS