使用打字稿 dnd 构造函数的 react-big-calendar 显示错误

Question

我正在尝试使用 react-big-calendar。而这个项目是基于打字稿的。

当我尝试用它初始化拖放时，它给了我一个特定的错误：

const DragAndDropCalendar = withDragAndDrop(Calendar)

我不知道该怎么做，因为他们的官方文档给了我们这个例子，here

错误消息说：

/home/maifee/Desktop/e/rbc_test/src/components/containers/task-organizer/TaskOrganizer.tsx
TypeScript error in /home/maifee/Desktop/e/rbc_test/src/components/containers/task-organizer/TaskOrganizer.tsx(26,45):
Argument of type 'typeof Calendar' is not assignable to parameter of type 'ComponentType<CalendarProps<object, object>>'.
  Type 'typeof Calendar' is not assignable to type 'ComponentClass<CalendarProps<object, object>, any>'.
    Construct signature return types 'Calendar<any, any>' and 'Component<CalendarProps<object, object>, any, any>' are incompatible.
      The types of 'props' are incompatible between these types.
        Type 'Readonly<CalendarProps<any, any>> & Readonly<{ children?: ReactNode; }>' is not assignable to type 'Readonly<CalendarProps<object, object>> & Readonly<{ children?: ReactNode; }>'.
          Type 'Readonly<CalendarProps<any, any>> & Readonly<{ children?: ReactNode; }>' is not assignable to type 'Readonly<CalendarProps<object, object>>'.
            Types of property 'titleAccessor' are incompatible.
              Type 'string | number | symbol | ((event: any) => string) | undefined' is not assignable to type '((event: object) => string) | undefined'.
                Type 'string' is not assignable to type '((event: object) => string) | undefined'.  TS2345

    24 | 
    25 | const { Text } = Typography;
  > 26 | const DragAndDropCalendar = withDragAndDrop(Calendar)
       |                                             ^
    27 |

目前，我用 // @ts-ignore 忽略它。但是如何真正解决这个问题？

这里是link到codesandbox.io

Answer 1

const DragAndDropCalendar = withDragAndDrop(Calendar)

当我将其更改为以下内容时，codesandbox 上的错误消失了。可以自己自定义定义的class

    class CalendarEvent {
      title: string;
      allDay: boolean;
      start: Date;
      endDate: Date;
      desc: string;
      resourceId?: string | undefined;
      tooltip?: string | undefined;
    
      constructor(
        _title: string,
        _start: Date,
        _endDate: Date,
        _allDay?: boolean,
        _desc?: string,
        _resourceId?: string
      ) {
        this.title = _title;
        this.allDay = _allDay || false;
        this.start = _start;
        this.endDate = _endDate;
        this.desc = _desc || "";
        this.resourceId = _resourceId;
      }
    }
    
    class CalendarResource {
      title: string;
      id: string;
    
      constructor(id: string, title: string) {
        this.id = id;
        this.title = title;
      }
    }
    
    class MyCalendar extends Calendar<CalendarEvent, CalendarResource> {}
    
    const DragAndDropCalendar = withDragAndDrop<CalendarEvent, CalendarResource>(
      MyCalendar
    );

参考文献：

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-big-calendar/react-big-calendar-tests.tsx#L143

使用打字稿 dnd 构造函数的 react-big-calendar 显示错误

react-big-calendar with typescript dnd constructor shows error

reactjs

typescript

react-big-calendar