如何在 TypeScript 中扩展 Array.prototype

在 TypeScript 中扩展 Array.prototype

How to extend Array.prototype in TypeScript

在 TypeScript 中扩展 Array.prototype：

创建一个.d.ts文件并添加一个扩展Array.
为您打算在数组对象上使用的方法添加类型。
将方法添加到Array.prototype.

在src您的项目目录中，创建一个types包含以下index.d.ts文件的目录。

源代码/类型/index.d.ts


export {};

declare global {
  interface Array<T> {
    removeLast(): T[];
  }
}

上面的示例显示了如何Array使用名为的方法扩展接口，该方法
removeLast()返回包含相同类型元素的数组。

请注意，这在您的用例中会有所不同，因此请务必调整方法名称和类型。

现在在您的index.ts文件中，将方法添加到Array.prototype.

索引.ts


const arr = ['a', 'b', 'c', 'd'];

if (!Array.prototype.removeLast) {
  Array.prototype.removeLast = function () {
    this.pop();

    return this;
  };
}

// 👇️ const result: string[]
const result = arr.removeLast();

console.log(arr); // 👉️ ['a', 'b', 'c']

我们将removeLast方法添加到Array.prototype并使用它。

请注意，您必须将方法添加到Array.prototype在所有其他文件（例如文件）之前运行的index.ts文件中。

如果您在将方法添加到原型之前尝试使用该方法，则会出现错误。

如果您在 IDE 中遇到错误，请尝试将您的types
目录路径添加到您的tsconfig.json文件中。

tsconfig.json文件


{
  "compilerOptions": {
    // ... rest
    "typeRoots": ["./node_modules/@types", "./src/types"]
  }
}

我们使用文件中的export {}行将index.d.ts其标记为外部模块。模块是至少包含 1 个importorexport
语句的文件。我们必须这样做才能扩大全球范围。

请注意，您必须根据您的用例更改所提供文件的内容。 index.d.ts

您应该添加您打算在数组上访问的所有方法的名称（和类型）。

源代码/类型/index.d.ts


export {};

declare global {
  interface Array<T> {
    removeLast(): T[];
  }
}

提供的文件只是添加了removeLast一个返回类型为的方法T[]，这很可能不是您需要的。

我们
在方法类型中使用了泛型。泛型就像变量，但适用于类型。

这使我们能够更好地键入方法的返回类型。我们基本上是在告诉 TypeScript 该removeLast方法不接受任何参数并返回一个包含相同类型元素的数组。

TypeScript.d.ts在查找常规文件的相同位置查找
.ts文件，这由文件中的include和exclude设置
决定tsconfig.json。

TypeScript 会将声明的Array接口与原始
Array接口合并，因此当您使用数组时，您将能够从两个接口访问方法和属性。

–