TypeScript项目中react-big-calendar用withDragAndDrop初始化报错如何解决

这个类型报错的核心是withDragAndDrop高阶组件默认使用的CalendarProps<object, object>泛型，和Calendar组件自带的泛型约束不匹配，导致titleAccessor等属性的类型校验失败。

方案1：传入自定义泛型（推荐，类型安全） #

首先根据你的业务场景定义日历对应的事件类型、资源类型，再将类型传入高阶组件即可：

// 定义你的日历事件实际字段类型
interface CalendarEvent {
  id: number;
  title: string;
  start: Date;
  end: Date;
  // 可扩展其他自定义字段
}

// 如果使用资源分组，可定义资源类型，不使用可直接写object
interface CalendarResource {
  id: number;
  name: string;
}

// 给withDragAndDrop传入对应的泛型参数
const DragAndDropCalendar = withDragAndDrop<CalendarProps<CalendarEvent, CalendarResource>>(Calendar)

用这个方案之后，你后续给日历组件传titleAccessor、startAccessor等属性时，TS会自动提示你定义的CalendarEvent里的字段，类型安全度更高。

方案2：临时兼容写法 #

如果你暂时不想定义完整类型，也可以通过显式指定any泛型快速解决报错：

const DragAndDropCalendar = withDragAndDrop<CalendarProps<any, any>>(Calendar)

这个写法比直接用// @ts-ignore更规范，不会忽略其他潜在的类型错误。

内容的提问来源于stack exchange，提问作者Maifee Ul Asad