Typescript中Object.key()使用总结

1.分析时间插件的格式化

interface OType {
  'm+': number;
  'd+': number;
  'h+': number;
  'i+': number;
  's+': number;
  [key: string]: number;
}
 // 正则格式化日期
  const formatDate = (date: Date, dateFormat: string): string => {
    if (/(y+)/.test(dateFormat)) {
      dateFormat = dateFormat.replace(
        RegExp.$1,
        `${date.getFullYear()}`.substr(4 - RegExp.$1.length)
      );
    }
    // 格式化日、时、分、秒后面的+号用于正则的匹配
    const o: OType = {
      'm+': date.getMonth() + 1, // 月
      'd+': date.getDate(), // 天
      'h+': date.getHours(), // 时
      'i+': date.getMinutes(), // 分
      's+': date.getSeconds(), // 秒
    };

    Object.keys(o).forEach((k): void => {
      // n+ 匹配任何包含至少一个 n 的字符串
      if (new RegExp(`(${k})`).test(dateFormat)) {
        // 取出对应的值
        const str = `${o[k]}`;
        // RegExp.$1 指的是与正则表达式匹配的第一个 子匹配(以括号为标志)字符串
        dateFormat = dateFormat.replace(
          RegExp.$1,
          RegExp.$1.length === 1 ? str : padLeftZero(str)
        );
      }
    });
    return dateFormat;
  };
  // 日期时间补零
  const padLeftZero = (str: string): string => {
    return `00${str}`.substr(str.length);
  };

问题：OType ： [key: string]: number;主要为了约束 Object.keys循环时 ${o[k]}取值报错

image.png

image.png

解决办法：1.在声明接口OType 添加[key: string]: number;约束 2.使用断言类型约束

interface OType {
  'm+': number;
  'd+': number;
  'h+': number;
  'i+': number;
  's+': number;
}
 // 正则格式化日期
  const formatDate = (date: Date, dateFormat: string): string => {
    if (/(y+)/.test(dateFormat)) {
      dateFormat = dateFormat.replace(
        RegExp.$1,
        `${date.getFullYear()}`.substr(4 - RegExp.$1.length)
      );
    }
    // 格式化日、时、分、秒后面的+号用于正则的匹配
    const o: OType = {
      'm+': date.getMonth() + 1, // 月
      'd+': date.getDate(), // 天
      'h+': date.getHours(), // 时
      'i+': date.getMinutes(), // 分
      's+': date.getSeconds(), // 秒
    };

    Object.keys(o).forEach((k): void => {
      // n+ 匹配任何包含至少一个 n 的字符串
      if (new RegExp(`(${k})`).test(dateFormat)) {
        // 使用断言约束
        const str = `${o[k as keyof OType]}`;
        // RegExp.$1 指的是与正则表达式匹配的第一个 子匹配(以括号为标志)字符串
        dateFormat = dateFormat.replace(
          RegExp.$1,
          RegExp.$1.length === 1 ? str : padLeftZero(str)
        );
      }
    });
    return dateFormat;
  };
  // 日期时间补零
  const padLeftZero = (str: string): string => {
    return `00${str}`.substr(str.length);
  };

image.png