Условные типы TypeScript: извлечение типа реквизита компонента из реагирующего компонента

Question

Используя новую особенность условного универсального типа TypeScript 2.8, возможно ли извлечь TProps компонента React.ComponentType<TProps>? Мне нужен тип, который может или работать на ComponentType или на TProps, так что вы, как разработчик, можете передать оба варианта:

Например:

interface TestProps {
    foo: string;
}

const TestComponent extends React.Component<TestProps, {}> {
    render() { return null; }
}

// now I need to create a type using conditional types so that
// I can pass either the component or the props and always get the 
// TProps type back
type ExtractProps<TComponentOrTProps> = /* ?? how to do it? */

type a = ExtractProps<TestComponent> // type a should be TestProps
type b = ExtractProps<TestProps>     // type b should also be TestProps

Возможно ли это, и кто-нибудь может предложить решение?

Answer 1

Я бы предложил использовать React.ComponentType, потому что он также будет включать в себя функциональные компоненты:

type ElementProps<TComponentOrTProps> =
  Component extends React.ComponentType<infer TProps>
    ? TProps
    : TComponentOrTProps;

Answer 2

Для этого есть встроенный помощник

type ViewProps = React.ComponentProps<typeof View>

https://stackoverflow.com/a/55005902/82609

Answer 3

Это довольно прямолинейное применение условных типов и их логического поведения (с использованием ключевого слова infer)

interface TestProps {
    foo: string;
}

class TestComponent extends React.Component<TestProps, {}> {
    render() { return null; }
}

type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends React.Component<infer TProps, any> ? TProps : TComponentOrTProps;

type a = ExtractProps<TestComponent> // type a is TestProps
type b = ExtractProps<TestProps>     // type b is TestProps