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

这是一个非常简单的条件类型及其推理行为的应用（使用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关键字）

{{1}}

Answer 2

有一个内置的帮助程序

type ViewProps = React.ComponentProps<typeof View>

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

Answer 3

我建议使用React.ComponentType，因为它还将包含功能组件：

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

TypeScript条件类型：从反应组件中提取组件道具类型

3 个答案: