TypeScript定义FormatOptions枚举传参类型报错如何正确编写

我编写了一个接收date和format两个参数的函数，尝试为format参数定义名为FormatOptions的字符串枚举，编译时出现类型报错：

Argument of type '"HH:MM"' is not assignable to parameter of type 'FormatOptions'

即类型为"HH:MM"的参数无法赋值给FormatOptions类型的形参，需要找到第二个参数的正确枚举定义及使用方式。

TypeScript Playground 在线调试地址：点击访问

问题复现代码 #

const basicTime: any = {
  year: 'numeric',
  month: 'short',
  day: '2-digit',
  hour: 'numeric',
  minute: 'numeric',
};

const hoursMinutes: any = {
  hour: 'numeric',
  minute: 'numeric',
};

enum FormatOptions {
  HoursMinutes = 'HH:MM',
  MonthDayYear = 'MM/DD/YYYY',
};

const dateFormat = (date: Date, format: FormatOptions) => {
  if (format === 'HH:MM') {
    return new Date(date).toLocaleString('en-US', hoursMinutes);
  }

  return new Date(date).toLocaleString('en-US', basicTime);
};

dateFormat(new Date, 'HH:MM');

TypeScript 字符串枚举不会自动和同内容的原始字符串字面量做类型兼容。当你将参数类型标注为FormatOptions枚举类型后，直接传入原始字符串'HH:MM'属于类型不匹配；同时函数内部直接用原始字符串和枚举类型参数做等值判断，也不符合类型规范。

• 你写的枚举定义本身没有错误，问题出在枚举的使用方式上：调用函数时需要传入枚举成员，而非直接传入裸字符串字面量
• 函数内部的条件判断同步替换为枚举成员做比较，保证类型一致性

修复后可正常运行的代码：

const basicTime: any = {
  year: 'numeric',
  month: 'short',
  day: '2-digit',
  hour: 'numeric',
  minute: 'numeric',
};

const hoursMinutes: any = {
  hour: 'numeric',
  minute: 'numeric',
};

enum FormatOptions {
  HoursMinutes = 'HH:MM',
  MonthDayYear = 'MM/DD/YYYY',
};

const dateFormat = (date: Date, format: FormatOptions) => {
  // 替换为枚举成员做判断
  if (format === FormatOptions.HoursMinutes) {
    return new Date(date).toLocaleString('en-US', hoursMinutes);
  }

  return new Date(date).toLocaleString('en-US', basicTime);
};

// 传入枚举成员，而非直接写字符串，同时补全新Date()的括号
dateFormat(new Date(), FormatOptions.HoursMinutes);

补充：如果希望调用时直接传入字符串字面量、不需要加枚举前缀，可以放弃枚举，改用字符串字面量联合类型实现相同效果，示例代码如下：

type FormatOptions = 'HH:MM' | 'MM/DD/YYYY';

const dateFormat = (date: Date, format: FormatOptions) => {
  if (format === 'HH:MM') {
    return new Date(date).toLocaleString('en-US', hoursMinutes);
  }
  return new Date(date).toLocaleString('en-US', basicTime);
};

// 直接传字符串不会触发类型报错
dateFormat(new Date(), 'HH:MM');

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