如何在TypeScript中获取React.FC的泛型<T>类型？

可以通过TypeScript的**条件类型+类型推断（infer）**实现这个需求，先定义一个工具类型来提取React.FC的Props类型：

// 定义工具类型：提取React.FC的Props泛型
type GetFCProps<T extends React.FC> = T extends React.FC<infer P> ? P : never;

使用示例 #

假设你有一个带Props的React函数组件：

import React from 'react';

// 原始Props类型
type UserProps = {
  username: string;
  email: string;
};

// 目标组件
const UserCard: React.FC<UserProps> = ({ username, email }) => {
  return (
    <div>
      <p>用户名：{username}</p>
      <p>邮箱：{email}</p>
    </div>
  );
};

现在要生成一个Props全为可选的组件类型，直接用上面的工具类型结合Partial：

// 提取UserCard的Props并转为可选，生成新的FC类型
type PartialUserCard = React.FC<Partial<GetFCProps<typeof UserCard>>>;

原理说明 #

• infer P会让TypeScript自动推断出React.FC所使用的泛型参数（也就是Props类型）
• 条件类型T extends React.FC<infer P> ? P : never的作用是：如果传入的类型T是React.FC的子类型，就返回推断出的P（Props类型），否则返回never

这样你就可以轻松复用组件的Props类型，并将其转为可选形式，完全符合你想要的React.FC<Partial<XXXX<typeof TargetComponent>>>效果，这里的XXXX就是我们定义的GetFCProps工具类型。

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