React组件Props类型不兼容：onChange参数类型匹配报错

问题场景 #

开发接收value和onChange两个Props的React组件时，组件定义直接将泛型T指定为DateRange | Date | undefined，但实际使用时，当value为DateRange类型，希望onChange也仅接收该类型参数，却触发了类型不兼容报错。

组件定义 #

type Props<T> = {
  value: T,
  onChange: (date: T) => void
}

const DateRangeInput: React.FC<Props<DateRange | Date | undefined>> = ({
  // Component code here
})

组件使用示例 #

import { DateRange } from "../Common/DateRangeInputV2";
const Loading = lazy(() => import("../Common/Loading"));

export type DateRange = {
  start: Date | undefined;
  end: Date | undefined;
};

export const InsuranceDetails = () => {
  const [date, setDate] = useState<DateRange>({
    start: undefined,
    end: undefined,
  });

  const handleDateChange = (date: DateRange) => {
    console.log("date in insurance", date);
    setDate(date);
  };

  return (
    <div>
      <DateRangeInput
        name="range_date"
        value={date}
        onChange={handleDateChange}
      />
    </div>
  );
};

报错信息 #

Type '(date: DateRange) => void' is not assignable to type '(date: DateRange | Date | undefined) => void'.
Types of parameters 'date' and 'date' are incompatible.
Type 'DateRange | Date | undefined' is not assignable to type 'DateRange'.
Type 'undefined' is not assignable to type 'DateRange'.ts(2322)
DateRangeInputVivek.tsx(41, 3): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & Props<DateRange | Date | undefined>'
(property) onChange: (date: DateRange | Date | undefined) => void

解决方案 #

核心问题是组件定义时提前固定了泛型T为联合类型，导致onChange必须接收所有联合类型的参数。正确的做法是让组件成为泛型组件，让TypeScript根据传入的value自动推导T的类型：

基础方案：泛型组件自动推导 #

修改组件定义，不指定具体的T类型，让TypeScript自动推导：

type Props<T> = {
  value: T,
  onChange: (date: T) => void
}

// React.FC不支持泛型，直接用函数形式定义泛型组件
const DateRangeInput = <T,>(props: Props<T>): React.ReactElement => {
  // 组件逻辑代码
  return <div>{/* 组件内容 */}</div>;
};

此时使用组件时，传入value={date}（date为DateRange类型），TypeScript会自动将T推导为DateRange，onChange的参数类型就会和value完全匹配，与handleDateChange兼容。

进阶方案：限制可传入类型范围 #

如果需要限制T只能是DateRange | Date | undefined中的一种，可以给泛型添加约束：

// 定义允许的类型集合
type AllowedDateValue = DateRange | Date | undefined;

type Props<T extends AllowedDateValue> = {
  value: T,
  onChange: (date: T) => void
}

// 给泛型组件添加类型约束
const DateRangeInput = <T extends AllowedDateValue,>(props: Props<T>): React.ReactElement => {
  // 组件逻辑代码
  return <div>{/* 组件内容 */}</div>;
};

这样既保证了onChange与value的类型一致性，又限制了可传入的value类型范围，避免非法类型传入。

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