React Date Range Picker中newStartDate等变量TS7031错误如何解决

语法说明：startDate: newStartDate的含义 #

这是ES6对象解构的重命名语法。函数入参是一个包含startDate、endDate属性的对象，这里是把对象里的startDate属性值取出来，重命名为newStartDate在当前函数作用域内使用，通常是为了避免和外层已经声明的同名变量（比如组件内的状态startDate）产生命名冲突。

报错原因 #

当前环境为TypeScript，TS要求所有参数必须有明确的类型定义。你给两个函数传入的解构参数对象没有声明类型，导致TS无法推导newStartDate、newEndDate的类型，判定为隐式any类型，触发了ts(7031)规则报错。

解决方法 #

不需要单独声明newStartDate/newEndDate变量，只需要给函数的入参对象补充类型定义即可，有两种常用方案：

• 方案1：提前定义通用类型（复用性更高）
  根据项目里日期用的类型（比如原生Date、Dayjs对象等）调整类型定义：

// 放在当前组件文件顶部、导入语句之后即可
type DateChangeParams = {
  startDate?: Date | null; // 如果用Dayjs就把Date替换成Dayjs
  endDate?: Date | null;
}

然后给两个函数的入参加上类型标注：

const handleInputValuesChange = ({
    startDate: newStartDate,
    endDate: newEndDate
  }: DateChangeParams) => {
    setStartInputValue(newStartDate || '')
    setEndInputValue(newEndDate || '')
  }

  const handleDatesChange = ({
    startDate: newStartDate,
    endDate: newEndDate
  }: DateChangeParams) => {
    setStartDate(newStartDate)
    setEndDate(newEndDate)
  }

• 方案2：直接在入参处声明类型（适合只使用一次的场景）

const handleDatesChange = ({
    startDate: newStartDate,
    endDate: newEndDate
  }: {startDate?: Dayjs | null, endDate?: Dayjs | null}) => {
    setStartDate(newStartDate)
    setEndDate(newEndDate)
  }

如果你的DatePicker是从组件库引入的（比如AntD、Arco Design等），可以直接用组件内置的回调参数类型，不用自己手动定义，以AntD RangePicker为例：

import type { RangePickerProps } from 'antd/es/date-picker';

const handleDatesChange: RangePickerProps['onChange'] = (dates) => {
  const [newStartDate, newEndDate] = dates || [];
  setStartDate(newStartDate)
  setEndDate(newEndDate)
}

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