React迁移TS时ReactDatePicker类型不匹配TS2769报错如何解决？

现有代码的问题 #

你的类型注解和传值逻辑都存在错误：

• 接口定义中institutional_relation_approval字段同时声明了Date | string | any，any类型会覆盖前面所有明确类型约束，完全失去TypeScript的类型校验意义。
• 给ReactDatePicker的selected属性传值的三元表达式，真值分支返回Date.parse()的结果（数字类型的时间戳），空值分支返回空字符串，和组件要求的入参类型完全不匹配，这是报错的直接原因。

TS2769报错的含义 #

该报错是TypeScript的重载匹配失败提示：ReactDatePicker组件的类型定义提供了两种入参重载规则，两种规则都要求selected属性只能接收Date类型对象、null或者undefined三种值，但你传入的值属于number | string类型，没有符合的重载规则，因此TypeScript抛出错误阻止编译。

修复方案 #

1. 修正类型定义 #

移除无意义的any，明确字段类型，建议区分接口返回类型和表单专用类型：

// 后端接口返回的类型定义
export interface BaseRelationType extends BaseEntity {
  institutional_relation_approval: Date | string,
}

// Formik表单专用类型，统一为Date类型避免组件中反复转换
export interface RelationFormType {
  institutional_relation_approval: Date | null,
  // 其余字段省略
}

2. 修正selected属性传值逻辑 #

将传入值转为Date对象，空值时返回null符合组件要求：

<DatePicker
  selected={values.institutional_relation_approval ? new Date(values.institutional_relation_approval) : null}
  placeholderText="DD/MM/YYYY"
  dateFormat="dd/MM/yyyy"
  name="institutional_relation_approval"
  disabled={isView} // 注意：你当前代码中未定义isView变量，需补充定义
  onChange={(date) => {
    setFieldValue('institutional_relation_approval', date);
    console.log(date);
  }}
/>

可选优化：提交时统一转换格式 #

如果后端要求传入字符串格式的日期，可在表单提交时统一处理，无需在组件层来回转换：

const onSubmit = (values: RelationFormType) => {
  const submitData = {
    ...values,
    // 按后端要求格式化日期，示例为yyyy-MM-dd格式
    institutional_relation_approval: values.institutional_relation_approval ? values.institutional_relation_approval.toISOString().slice(0, 10) : null
  };
  // 调用提交接口
};

内容的提问来源于stack exchange，提问作者Matheus Salles Blanco