如何从React组件Props推断函数返回类型并实现类型匹配？

一、让onChange的value参数与传入组件的value类型严格一致 #

可以通过泛型约束组件的Props类型，让onChange的value参数类型自动跟随传入的value类型，替代原有的联合类型写法：

import React from 'react';

// 用泛型T约束value类型，限定为number或string的子类型
function MyCheckbox<T extends number | string>({ value }: { value: T }): React.ReactElement {
  // onChange的value参数类型与泛型T绑定，和传入组件的value类型完全一致
  const onChange = (event: React.ChangeEvent<HTMLInputElement>, value: T) => {
    // 此处value类型严格匹配传入的参数类型
  };

  // 注意：原生input的value属性仅支持string类型，需将value转为字符串
  return (
    <input type="checkbox" value={String(value)} onChange={(e) => onChange(e, value)} />
  );
}

// 使用示例：
// 传入number类型，onChange的value自动为number
<MyCheckbox value={123} />
// 传入string类型，onChange的value自动为string
<MyCheckbox value="abc" />

二、让getValue函数返回与传入value一致的类型 #

同样基于泛型约束，组件内部定义的getValue函数返回类型直接绑定泛型T，即可实现传入不同类型value时，返回对应类型的值：

import React from 'react';

function MyCheckbox<T extends number | string>({ value }: { value: T }): React.ReactElement {
  const onChange = (event: React.ChangeEvent<HTMLInputElement>, value: T) => {
    // 逻辑处理
  };

  // getValue的返回类型与泛型T绑定，和传入的value类型一致
  const getValue = (): T => {
    return value;
  };

  // 内部调用示例：传入number时返回number，传入string时返回string
  console.log(getValue());

  return (
    <input type="checkbox" value={String(value)} onChange={(e) => onChange(e, value)} />
  );
}

// 使用示例：
const numCheckbox = <MyCheckbox value={456} />;
// 若通过ref暴露getValue，调用后返回number类型
const strCheckbox = <MyCheckbox value="xyz" />;
// 调用getValue返回string类型

核心思路是利用TypeScript的泛型特性，将组件的value类型抽象为泛型参数T，让组件内部的回调参数、函数返回值都与T绑定，从而实现类型的严格一致性，避免联合类型导致的类型模糊问题。

内容的提问来源于stack exchange，提问作者Tyler V.