TypeScript泛型结合React函数组件使用报错TS2558排查

我定义了如下带泛型的React函数组件结构：

export interface SearchFilterJobsProps<J = JobPosting> {
  unwrap?: boolean;
  jobs?: {
    data: J[];
    component?: React.ComponentType | React.ElementType;
  };
  searchMatchProps?: (keyof J)[];
}

export type SearchFilterJobsType<T = JobPosting> = React.FC<SearchFilterJobsProps<T>>;

export const SearchFilterJobs: SearchFilterJobsType = <Z extends JobPosting>(
  {
    jobs,
    searchMatchProps,
    className,
    children,
    ...rest
  }: SearchFilterJobsProps<Z> & React.HTMLAttributes<HTMLDivElement>) => { ... };

希望该组件能适配多种数据结构，但使用时：

<SearchFilterJobs<SpecificJobProps> jobs={{data: specificJobs}} />

TypeScript报错：TS2558: Expected 0 type arguments, but got 1.，请问哪里出错了？

错误原因 #

你定义的SearchFilterJobsType是基于React.FC的类型别名，而React.FC本身是不支持显式传入泛型参数的函数类型。虽然你在组件实现时写了<Z extends JobPosting>的泛型签名，但类型注解SearchFilterJobsType并没有保留这个泛型能力，导致TypeScript推断该组件不需要泛型参数，因此传入SpecificJobProps时会报错。

修复方案 #

有两种方式可以解决这个问题：

方案1：移除类型别名，直接给组件指定泛型签名

直接去掉冗余的SearchFilterJobsType类型别名，让组件的泛型签名直接对外暴露：

export interface SearchFilterJobsProps<J = JobPosting> {
  unwrap?: boolean;
  jobs?: {
    data: J[];
    component?: React.ComponentType | React.ElementType;
  };
  searchMatchProps?: (keyof J)[];
}

// 直接定义泛型组件，无需额外类型别名
export const SearchFilterJobs = <Z extends JobPosting>(
  {
    jobs,
    searchMatchProps,
    className,
    children,
    ...rest
  }: SearchFilterJobsProps<Z> & React.HTMLAttributes<HTMLDivElement>) => { 
  // 你的组件逻辑代码
};

方案2：调整类型别名，使其支持泛型函数

如果需要保留SearchFilterJobsType类型别名，需要将它定义为泛型函数类型，而不是基于React.FC：

export interface SearchFilterJobsProps<J = JobPosting> {
  unwrap?: boolean;
  jobs?: {
    data: J[];
    component?: React.ComponentType | React.ElementType;
  };
  searchMatchProps?: (keyof J)[];
}

// 将类型别名定义为泛型函数
export type SearchFilterJobsType = <Z extends JobPosting>(
  props: SearchFilterJobsProps<Z> & React.HTMLAttributes<HTMLDivElement>
) => React.ReactElement;

// 组件实现时直接使用该类型
export const SearchFilterJobs: SearchFilterJobsType = (props) => { 
  // 你的组件逻辑代码
};

修复后使用 #

两种方案修复后，你原本的使用方式就能正常工作了：

<SearchFilterJobs<SpecificJobProps> jobs={{data: specificJobs}} />

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