TypeScript/React中抽离日期格式化选项为独立变量报错如何解决？

报错原因 #

你定义timeformat变量时，TypeScript默认会将weekday: 'short'这类属性推导为string类型，但toLocaleTimeString方法接收的第二个参数要求属性是short/long/narrow这类更窄的字面量联合类型，因此出现类型不匹配报错。
你之前找不到DateTimeFormatOptions类型，是因为该类型定义在Intl全局命名空间下，需要加前缀才能调用。

解决方案 #

有两种常用的修复方式：

方案1：添加正确的类型注解（更推荐）

直接给配置变量加上Intl.DateTimeFormatOptions类型注解，不仅能解决报错，还能在你写配置属性时获得实时的语法校验和自动补全提示：

const timeformat: Intl.DateTimeFormatOptions = { 
  weekday: 'short', 
  year: 'numeric', 
  month: 'short', 
  day: 'numeric', 
  hour12: false 
};

new Date(status.start).toLocaleTimeString('en-US', timeformat);

方案2：使用const断言

如果你不想显式写类型注解，可以用as const将配置对象标记为只读，TypeScript会自动将所有属性收窄为字面量类型，匹配参数要求：

const timeformat = { 
  weekday: 'short', 
  year: 'numeric', 
  month: 'short', 
  day: 'numeric', 
  hour12: false 
} as const;

new Date(status.start).toLocaleTimeString('en-US', timeformat);

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