TypeScript泛型函数声明报错：VS Code导出行异常求助

错误原因 #

1. JSX语法混淆：在TSX文件里，直接写<T>会被编译器当成JSX标签解析，而非TypeScript泛型，导致语法报错。
2. renderValue类型定义错误：你把renderValue定义成了接收T类型的空数组，实际场景中它应该接收单个T类型的数据项来渲染。

修正后的代码 #

import { ReactNode, JSX } from 'react';

export interface OverviewCardProps<T> {
  actions?: ReactNode
  contentPerPage: number
  data: T[]
  heading?: ReactNode | string
  limit: number
  // 修正为接收单个T类型参数
  renderValue: (item: T) => JSX.Element
  subheading?: ReactNode | string
}

// 泛型后加逗号，明确告诉TS这是TypeScript泛型而非JSX标签
export const OverviewCard = <T,>({
  actions,
  data,
  contentPerPage,
  heading,
  limit,
  renderValue,
  subheading,
}: OverviewCardProps<T>) => {
  // 组件逻辑写在这里
  return null;
};

替代方案 #

如果不想加逗号，也可以给泛型添加基础约束，同样能避免语法混淆：

export const OverviewCard = <T extends unknown>({
  // 解构参数保持不变
}: OverviewCardProps<T>) => {
  // 组件逻辑写在这里
  return null;
};

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