如何在 TypeScript 中扩展 Date.prototype

作者

在 TypeScript 中扩展 Date.prototype

How to Extend Date.prototype in TypeScript

在 TypeScript 中扩展 Date.prototype：

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

以下是内容date.extensions.ts：

日期.extensions.ts
interface Date {
  getTimestamp(): number;
}

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


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

索引.ts
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文件中的代码：

日期.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方法的文件。

索引.ts
import './date.extensions';

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

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

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

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

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

日期.extensions.ts
interface Date {
  getFullYear(): number;
}

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

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

索引.ts
import './date.extensions';

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

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

请注意，覆盖内置方法会造成混淆，通常应避免使用。

–

发表评论