TypeScript 中如何向 React 组件的 Props 传递泛型类型参数

1. 自动类型推断（常用） #

TypeScript 可以根据你传入组件的属性值自动推导泛型类型，绝大多数场景下不需要手动指定泛型。你给出的示例中，传入的value是数值123，TS 会自动将MyReactComponent的泛型T推导为number类型，直接写即可：

<MyReactComponent value={123}/>

2. 显式传入泛型参数 #

如果需要手动约束泛型类型，或者 TS 无法准确推断类型时，可以直接在组件名后通过尖括号传入泛型参数：

// 显式指定泛型 T 为 number 类型
<MyReactComponent<number> value={123}/>

注意：你的示例中AnotherComponent接收的Props本身是带泛型的定义，也需要指定泛型参数，否则会报错。

修正后的完整代码示例 #

interface Props<T> {
  value: T;
}

function MyReactComponent<T> (
  props: Props<T>
): JSX.Element {
    return <div> xyz </div>;
}

// 调用示例
function AnotherComponent(props: Props<number>): JSX.Element {
  return (
    <div>
      {/* 自动推断泛型为number */}
      <MyReactComponent value={123}/>
      {/* 显式指定泛型为number */}
      <MyReactComponent<number> value={456}/>
    </div>
  );
}

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