如何在 TypeScript 中扩展 String.prototype

作者

在 TypeScript 中扩展 String.prototype

How to Extend String.prototype in TypeScript

在 TypeScript 中扩展 String.prototype：

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

以下是内容string.extensions.ts：

字符串.extensions.ts
interface String {
  prefix(pre: string): string;
}

String.prototype.prefix = function (pre: string) {
  return pre + this;
};


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

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

const str = 'world';

console.log(str.prefix('hello ')); // 👉️ "hello world"

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

字符串原型扩展

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

在接口中，我们创建了一个prefix方法，它将前导字符添加到原始字符串并返回结果。

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

您可以使用这种方法来扩展String.prototype任何方法。下面是将传入的字符串相加的方法示例。

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

字符串.extensions.ts
interface String {
  add(...strings: string[]): string;
}

String.prototype.add = function (...strings) {
  return this + strings.join('');
};

这是index.ts导入string.extensions并使用该add方法的文件。

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

const str = 'hello';

// 👇️ "hello one two three"
console.log(str.add(' one', ' two', ' three'));

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

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

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

字符串.extensions.ts
interface String {
  toLowerCase(): string;
}

String.prototype.toLowerCase = function () {
  return this.toUpperCase();
};

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

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

const str = 'Hello World';

// 👇️ "HELLO WORLD"
console.log(str.toLowerCase());

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

–

发表评论