TypeScript 中如何扩展 Date.prototype

要在 TypeScript 中扩展 Date.prototype ：

1. 创建一个 date.extensions.ts 文件。
2. 扩展 Date 接口并添加扩展方法。
3. 使用前将扩展方法导入为 import './date.extensions'。

这是 date.extensions.ts 的内容：

date.extensions.ts

interface Date {
  getTimestamp(): number;
}

Date.prototype.getTimestamp = function () {
  return this.getTime();
};

下面是我们如何在 Date 原型上导入和使用新的 getTimestamp 方法：

import './date.extensions';

const date = new Date('2022-09-24');

// 👇️ 1663977600000
console.log(date.getTimestamp());

如果我运行我的 index.ts 文件，我们可以看到 getTimestamp 方法被成功调用。

我们声明了一个新的 Date 接口，它将与原始的 Date 接口合并。

在界面中，我们创建了一个 getTimestamp 方法，它返回自 UNIX 纪元以来的毫秒数。

确保在扩展原型时使用命名函数，而不是箭头函数，因为箭头函数使用封闭范围的 this，这不是我们想要的。

我们可以使用这种方法通过任何方法扩展 Date.prototype。 这是将日期格式化为 yyyy-mm-dd 的方法示例。

这是 date.extensions.ts 文件中的代码：

date.extensions.ts

interface Date {
  format(): string;
}

Date.prototype.format = function () {
  return formatDate(this);
};

function padTo2Digits(num: number) {
  return num.toString().padStart(2, '0');
}

function formatDate(date: Date) {
  return [
    date.getFullYear(),
    padTo2Digits(date.getMonth() + 1),
    padTo2Digits(date.getDate()),
  ].join('-');
}

这里是 index.ts 文件，它导入 date.extensions.ts 并使用 format 方法。

import './date.extensions';

const date = new Date('2022-09-24');

// 👇️ "2022-09-24"
console.log(date.format());

确保在导入 date.extensions.ts 模块时指定正确的路径。

覆盖 Date.prototype 时，请确保我们的方法不会干扰内置方法名称，除非有意覆盖它们（这可能会造成混淆）。

这是一个如何覆盖内置 getFullYear() 方法的示例。

interface Date {
  getFullYear(): number;
}

Date.prototype.getFullYear = function () {
  return 100;
};

这是我们 index.ts 文件中的代码。

import './date.extensions';

const date = new Date('2022-09-24');

// 👇️ 100
console.log(date.getFullYear());

请注意，覆盖内置方法会令人困惑，通常应避免。

火焰兔

海报 链接