React & TypeScript：onChange依赖type属性时如何给组件Props做动态类型定义？

最佳方案就是你最初使用的可辨识联合类型（Discriminated Union），这也是TS处理这种属性互相关联场景的原生最佳实践，完全不需要额外判断onChange类型，仅通过判断type这个可辨识标识就能自动收窄所有关联属性的类型。

你遇到报错的核心原因 #

你最初的Props定义没有问题，报错出在两个调用侧的类型推导缺口：

1. handleField 函数的返回值没有和入参type做类型绑定，TS无法推导出入参为text时返回TextHandler、入参为date时返回DateHandler，只会统一推导为两个函数的联合类型，和组件Props要求的关联类型不匹配。
2. 你没有定义和Props对应的Field可辨识联合类型，数组map遍历时TS无法将每一项的type和对应的onChange类型做关联。

完整修复代码 #

1. 保留可辨识联合的Props定义（完全不用修改，这个就是最优写法） #

// DynamicField.tsx
import DatePicker from "react-datepicker";

type DateHandler = (
  date: Date,
  event: React.SyntheticEvent<any, Event> | undefined
) => void;
type DateProps = {
  type: "date";
  value: string;
  onChange: DateHandler;
};

type TextHandler = React.ChangeEventHandler<HTMLInputElement>;
type TextProps = {
  type: "text";
  value: string;
  onChange: TextHandler;
};

// 可辨识联合Props，核心是用type作为区分标识
type Props = TextProps | DateProps;

const DynamicField = (props: Props) => {
  // 仅判断type即可自动收窄所有属性类型，不需要额外判断onChange
  if (props.type === "text") {
    return <input value={props.value} onChange={props.onChange} />;
  } else if (props.type === "date") {
    return <DatePicker onChange={props.onChange} selected={new Date(props.value)} />;
  }
  return null;
};

2. 修复调用侧类型定义 #

// App.tsx
// 定义和Props对应的可辨识联合Field类型
type Field = 
  | { type: "text"; initialValue: string }
  | { type: "date"; initialValue: string };

const data: Field[] = [
  { type: "text", initialValue: "" },
  { type: "date", initialValue: "2020-10-20" },
  { type: "text", initialValue: "" },
];

// 用函数重载绑定入参type和返回值的对应关系
function handleField(type: "text"): TextHandler;
function handleField(type: "date"): DateHandler;
function handleField(type: "text" | "date") {
  if (type === "text") {
    return (e: React.ChangeEvent<HTMLInputElement>) => {
      console.log(e.target.value);
    };
  } else {
    return (date: Date) => {
      console.log(date);
    };
  }
}

function App() {
  return (
    <div className="App">
      {data.map((item, index) => (
        <DynamicField
          key={index}
          type={item.type}
          value={item.initialValue}
          onChange={handleField(item.type)}
        />
      ))}
    </div>
  );
}

该方案的优势 #

• 完全类型安全：组件内部无需额外判断onChange类型，TS自动根据type收窄类型，传错参数直接报错
• 扩展性强：后续新增select/radio等类型，仅需要新增对应的Props分支到联合类型即可，无需修改现有逻辑
• 无运行时代价：所有类型校验都在编译期完成，不会增加额外运行时逻辑

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