使用打字稿 dnd 构造函数的 react-big-calendar 显示错误
react-big-calendar with typescript dnd constructor shows error
我正在尝试使用 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
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
);
参考文献:
我正在尝试使用 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
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
);
参考文献: