利用TypeScript条件类型提取React组件的Props类型

当然可以！TypeScript 2.8引入的条件泛型配合infer关键字，刚好能完美解决这个需求——既能从React组件类型中提取出它的Props类型，也能直接接收Props类型本身并原样返回。

核心实现代码 #

我们可以定义一个名为ExtractProps的条件类型，利用TypeScript的类型推断能力来处理两种输入场景：

import React from 'react';

type ExtractProps<T> = T extends React.ComponentType<infer P> 
  ? P 
  : T;

代码解释 #

• 当传入的T是React.ComponentType<P>（这是React内置的类型，包含类组件ComponentClass<P>和函数组件FunctionComponent<P>）时，infer P会自动推断出该组件对应的Props类型P，然后返回这个P。
• 如果传入的T本身就是一个Props类型（比如你定义的TestProps），那么它不会匹配ComponentType<infer P>的分支，直接返回T本身。

示例验证 #

用你给出的例子来测试这个类型：

interface TestProps { foo: string; }

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

// 从组件中提取Props类型
type ExtractedFromComponent = ExtractProps<typeof TestComponent>;
// 类型为 TestProps，等价于 { foo: string }

// 直接传入Props类型，原样返回
type ExtractedFromProps = ExtractProps<TestProps>;
// 类型仍为 TestProps

这样不管开发者传入的是组件类型还是Props类型，ExtractProps都能返回正确的Props类型，完全满足你的需求。

内容的提问来源于stack exchange，提问作者Dynalon