如何在TypeScript中正确使用react-big-calendar的View类型？

你遇到的两个错误本质都是TypeScript的类型匹配问题，对应解决方案如下：

错误1：'Views' only refers to a type, but is being used as a value here #

react-big-calendar导出的Views只是类型定义，不是可运行的常量对象，所以不能直接用Views.WEEK作为状态初始值。你可以自己定义对应View类型的常量集合，或者直接使用字面量值。

错误2：Type 'string' is not assignable to type 'View | undefined' #

直接写useState('week')时，TypeScript会把状态view的类型推断为宽泛的string，但Calendar组件的view属性要求的是View类型（即'month' | 'week' | 'work_week' | 'day' | 'agenda'这个字面量联合类型），所以类型不匹配。

最终可行的代码写法 #

import { Calendar, View, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import { useState, useCallback } from 'react';

const localizer = momentLocalizer(moment);

type CourseBookProps = {
  loginStatus?: string;
};

// 可选：自己定义常量集合，避免硬编码字面量
const VIEW_OPTIONS = {
  MONTH: 'month' as const,
  WEEK: 'week' as const,
  WORK_WEEK: 'work_week' as const,
  DAY: 'day' as const,
  AGENDA: 'agenda' as const,
};

const KinderCalendar: React.FC<CourseBookProps> = ({ loginStatus }) => {
  const [date, setDate] = useState(new Date(2015, 3, 1));
  
  // 方案1：指定useState的泛型为View，直接用字面量初始化
  const [view, setView] = useState<View>('week');

  // 方案2：使用自己定义的常量集合
  // const [view, setView] = useState<View>(VIEW_OPTIONS.WEEK);

  const onNavigate = useCallback((newDate) => setDate(newDate), [setDate]);
  const onView = useCallback((newView: View) => setView(newView), [setView]);

  return (
    <Calendar
      date={date}
      events={[]}
      localizer={localizer}
      onNavigate={onNavigate}
      onView={onView}
      view={view}
    />
  );
};

关键说明 #

• 给useState添加泛型<View>，明确状态的类型是react-big-calendar定义的View联合类型，这样TypeScript就不会把初始值'week'推断为普通string。
• 如果不想重复写字面量，可以自己定义带as const的常量集合，确保每个值的类型是字面量类型，符合View的要求。
• 注意onView回调的参数也要指定为View类型，保证类型一致性。

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