TypeScript如何从泛型中提取第一个传入的类型参数

你可以通过 TypeScript 的条件类型搭配 infer 关键字实现泛型参数提取，针对你给出的 React 函数组件场景，有两种常用实现方式：

方式1：直接用内置工具类（最简便） #

FC 泛型的首个参数就是组件的 props 类型，也就是函数的第一个入参类型，直接用内置 Parameters 提取即可：

import type { FC } from 'react';

const App: FC<number> = () => { return null; }

type FirstTypeFromApp = Parameters<typeof App>[0] // 推导结果为 number

方式2：自定义通用提取工具类 #

如果需要复用提取 FC 泛型参数的逻辑，可以自定义工具类型：

import type { FC } from 'react';

// 通用提取FC泛型参数的工具类型
type ExtractFCProps<T> = T extends FC<infer P> ? P : never;

const App: FC<number> = () => { return null; }

type FirstTypeFromApp = ExtractFCProps<typeof App>; // 推导结果为 number

内容的提问来源于stack exchange，提问作者Иван Вольнов