Syncfusion日程组件TypeScript类型错误排查求助

完整修正代码 #

import { ScheduleComponent, ViewsDirective, ViewDirective, Inject, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop, View } from '@syncfusion/ej2-react-schedule';
import { useState } from 'react';

const Scheduler: React.FC = () => {
  // 明确指定ref状态的类型
  const [scheduleObj, setScheduleObj] = useState<ScheduleComponent | null>(null);

  const change = (args: { value: Date; }) => {
    // 先判断实例存在，再执行操作
    if (scheduleObj) {
      scheduleObj.selectedDate = args.value;
      scheduleObj.dataBind();
    }
  };

  return (
    <div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">
      <Header category="App" title="Calendar" />
      <ScheduleComponent
        height="650px"
        ref={(schedule) => setScheduleObj(schedule)}
        selectedDate={new Date(2021, 0, 10)}
        eventSettings={{ dataSource: scheduleData }}
        dragStart={onDragStart}
      >
        <ViewsDirective>
          {/* 使用Syncfusion官方提供的View枚举，替代字符串 */}
          { [View.Day, View.Week, View.WorkWeek, View.Month, View.Agenda].map((item) => (
            <ViewDirective key={item} option={item} />
          ))}
        </ViewsDirective>
        <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
      </ScheduleComponent>
    </div>
  );
};

逐个错误解决说明 #

• 错误1&2：Object is possibly 'undefined'
  原因：scheduleObj初始值为null，组件挂载完成前无法确保实例存在，TypeScript会做严格的空值检查。
  解决：操作scheduleObj的属性和方法前，添加if (scheduleObj)的存在性判断，确保实例已初始化。

• 错误3：Argument of type 'ScheduleComponent | null' is not assignable...
  原因：未指定useState的类型，初始值默认是undefined，但ref回调返回的是ScheduleComponent | null，类型不匹配。
  解决：显式指定useState的类型为ScheduleComponent | null，初始值设为null，与ref的返回类型对齐。

• 错误4：Type 'string' is not assignable to type 'View | undefined'
  原因：ViewDirective的option属性要求传入Syncfusion定义的View枚举类型，直接传字符串不仅类型不兼容，还会引发视图重复渲染的问题。
  解决：从@syncfusion/ej2-react-schedule导入View枚举，使用枚举值View.Day、View.Week等替代字符串。

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