如何要求泛型React组件必须指定类型参数？

下面是几种可行的实现方案：

方案1：给泛型设never默认值并通过条件类型触发错误 #

把泛型的默认类型从unknown改成never，再用条件类型让未指定类型参数的组件调用触发类型错误：

import React from 'react';

type GenericComponentProps<T = never> = T extends never 
  ? { error: "必须显式指定泛型类型参数" } 
  : { data: T };

const GenericComponent = <T = never>(props: GenericComponentProps<T>) => {
  return <div>{JSON.stringify(props.data)}</div>;
};

// ❌ 报错：类型“{}”缺少属性“error”，要求必须显式传泛型参数
<GenericComponent /> 

// ✅ 正常运行：显式指定了泛型类型
<GenericComponent<string> data="hello" /> 

原理很直接：当用户没传类型参数时，T默认是never，此时props要求必须带error属性——而这个属性是我们故意设置的、用户不可能传入的，TypeScript就会直接报错，强制你显式指定泛型。

方案2：用辅助函数强制约束调用 #

如果不想修改原组件的类型定义，可以写个辅助函数来包裹组件，强制要求调用时必须传入类型参数：

import React from 'react';

// 原泛型组件
const OriginalGenericComponent = <T>(props: { data: T }) => {
  return <div>{JSON.stringify(props.data)}</div>;
};

// 辅助函数：必须先传入类型参数才能拿到组件
const requireGeneric = <T>() => {
  return OriginalGenericComponent as <U extends T>(props: { data: U }) => JSX.Element;
};

// ❌ 报错：无法推断类型参数，必须显式传入
requireGeneric()({ data: "hello" });

// ✅ 正常运行：先指定了泛型类型
requireGeneric<string>()({ data: "hello" });

这种方式适合不能修改原组件代码的场景，但需要额外维护辅助函数。

方案3：TypeScript 5.0+用satisfies做调用侧检查 #

如果你的项目用的是TypeScript 5.0及以上版本，可以在调用组件时用satisfies运算符强制约束，但这种方式需要每个调用处都添加，适合局部场景：

// ✅ 正常运行：显式指定了泛型
const validComponent = <GenericComponent<string> data="hello" /> satisfies JSX.Element;

// ❌ 报错：无法推断泛型类型，必须显式指定
const invalidComponent = <GenericComponent data="hello" /> satisfies JSX.Element;

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