如何使用Temporal API遍历日历月份天数并解决相关TS报错

问题场景 #

使用Temporal API开发简易日历组件，遍历1月份所有日期时触发2个TypeScript报错，开发目标为通过循环逻辑，实时生成数量与当前日历月份实际天数匹配的div元素。

注：变量daysinJanuary上的蓝色下划线为词典扩展插件导致，与本次问题无关。
问题代码截图

具体报错 #

• 报错1（ts2365）：Operator '<=' cannot be applied to types 'PlainDate' and 'number'
• 报错2（ts2356）：An arithmetic operand must be of type 'any', 'number', 'bigint' or an enum type

报错根因 #

循环逻辑中直接将Temporal.PlainDate类型的实例对象，与数字类型值做大小比较、算术自增运算，TypeScript不允许跨非兼容类型执行这类操作。本质是错误地将日期对象作为循环计数变量使用。

修复方案 #

方案1：数字计数循环（最适合日历渲染场景） #

直接用数字作为循环变量，从1遍历到当月总天数即可，逻辑最简单性能最好：

// 初始化目标月份第一天，可替换为你需要渲染的动态年月
const firstDayOfMonth = Temporal.PlainDate.from({ year: 2024, month: 1, day: 1 });
// Temporal原生提供daysInMonth属性，直接返回数字类型的当月总天数
const totalDays = firstDayOfMonth.daysInMonth;
const calendarCells = [];

for (let dayNum = 1; dayNum <= totalDays; dayNum++) {
  // 需要完整日期对象时再生成对应PlainDate实例
  const currentDate = firstDayOfMonth.with({ day: dayNum });
  // 替换为你的div生成逻辑
  calendarCells.push(
    <div className="calendar-cell" key={currentDate.toString()}>
      {dayNum}
    </div>
  );
}

方案2：日期对象迭代（需要连续操作日期对象时使用） #

如果需要每次循环直接拿到PlainDate实例，使用Temporal官方提供的日期运算、比较方法，不要直接对日期对象做++、数值比较操作：

const firstDayOfMonth = Temporal.PlainDate.from({ year: 2024, month: 1, day: 1 });
const lastDayOfMonth = firstDayOfMonth.with({ day: firstDayOfMonth.daysInMonth });
const calendarCells = [];

for (
  let currentDate = firstDayOfMonth;
  // 用Temporal内置compare方法做日期比较，返回值-1/0/1对应早于/等于/晚于
  Temporal.PlainDate.compare(currentDate, lastDayOfMonth) <= 0;
  // 用add方法做日期偏移，不要直接++
  currentDate = currentDate.add({ days: 1 })
) {
  calendarCells.push(
    <div className="calendar-cell" key={currentDate.toString()}>
      {currentDate.day}
    </div>
  );
}

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