如何用React.FC为常量式泛型Props函数组件指定类型？

问题原因 #

你尝试的写法export const MyComponent : React.FC<OwnProps<T>> = <T,>(props: OwnProps<T>) => {}报错，是因为React.FC<OwnProps<T>>中的T没有在当前作用域被声明——T是组件函数自身的泛型参数，不是全局或外部定义的类型，TypeScript无法识别它。

可行的常量式标注方案 #

可以用常量式写法完成标注，核心是把组件整体标注为泛型函数类型，而不是给React.FC传递未声明的泛型参数。以下是两种常用方式：

方案1：直接标注泛型函数类型（推荐） #

跳过React.FC的包裹，直接标注组件为接收泛型Props的React元素返回函数：

import React from 'react';

type Props<T> = {
  data: T;
};

// 直接标注泛型函数类型
export const MyComponent: <T>(props: Props<T>) => React.ReactElement = <T>(props) => {
  return <div>whatever</div>;
};

方案2：先定义泛型组件类型再标注 #

如果一定要结合React.FC，可以先定义一个泛型的组件类型，再标注给常量：

import React from 'react';

type Props<T> = {
  data: T;
};

// 定义泛型版本的React.FC类型
type GenericComponent<T> = React.FC<Props<T>>;

// 标注组件为接收泛型参数的函数
export const MyComponent: <T>(props: Props<T>) => ReturnType<GenericComponent<T>> = <T>(props) => {
  return <div>whatever</div>;
};

补充说明 #

React.FC本身是一个固定的函数类型（(props: P) => ReactElement | null），它的泛型参数是组件的Props类型。当你的Props本身是泛型时，不能直接把Props<T>作为React.FC的参数，因为T此时未被声明。必须把整个组件函数声明为泛型函数，让T成为函数自身的泛型参数，这样TypeScript才能正确识别。

内容的提问来源于stack exchange，提问作者Marcus Junius Brutus