TypeScript实现日期格式化工具

## 背景

> 相信前端的大多数宝宝们已经升级到`TypeScript`了吧，如果还没升级，建议升级哦。

刚升级到 `TypeScript` 时候，大家可能会有很多不适应，尤其是很多代码检测报红的，看着就很烦，有些甚至报红也不影响运行，但是就是看着烦，比如下方的JS中日期格式化的【原始代码】。

【TS代码】中，是使用 `TypeScript` 语法解决了报红之后的日期格式化工具方法的代码，欢迎借鉴使用，欢迎批评指正。

<!-- more -->

## TS代码

TS实现的日期格式化工具

```typescript

/***
  * 日期格式化方法
  * 
  * @author DingDangDog
  * @param format 格式化后的日期格式，标准格式：YYYY-MM-dd HH:mm:ss。
  * @param date 待格式化的日期，可以是string或Date类型
  * @return 结果示例：2022-12-08 17:30:00
  */
export const dateFormater = (format: string, date: string | Date) => {
  date = new Date(date);

  const dataRegIndexs = [0, 1, 2, 3, 4, 5];
  const dataRegKeys = ["Y+", "M+", "d+", "H+", "m+", "s+"];
  const dataItem = [
    date.getFullYear().toString(),
    (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1).toString(),
    date.getDate() < 10 ? '0' + date.getDate() : date.getDate().toString(),
    date.getHours().toString(),
    date.getMinutes().toString(),
    date.getSeconds().toString(),
  ];

  let ret;
  for (const index in dataRegIndexs) {
    ret = new RegExp("(" + dataRegKeys[index] + ")").exec(format);
    if (ret) {
      format = format.replace(ret[1], (ret[1].length == 1) ? (dataItem[index]) : (dataItem[index].padStart(ret[1].length, "0")))
    }
  }
  return format
}

```

## JS代码

JS实现的日期格式化工具

```javascript
/*
 * 日期格式转换
 * fmt   将要转换的格式样式
 * date  需转换的时间
 */
dateFormat(fmt, dateValue) {
  const date = new Date(dateValue); // 默认预先转译一次
  let ret;
  const opt = {
      "Y+": date.getFullYear().toString(),        // 年
      "m+": (date.getMonth() + 1).toString(),     // 月
      "d+": date.getDate().toString(),            // 日
      "H+": date.getHours().toString(),           // 时
      "M+": date.getMinutes().toString(),         // 分
      "S+": date.getSeconds().toString()          // 秒
      // 有其他格式化字符需求可以继续添加，必须转化成字符串
  };
  for (let k in opt) {
      ret = new RegExp("(" + k + ")").exec(fmt);
      if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
      }
  }
  return fmt;
}
```


<div class="article-ads"></div>