Question

自定义类扩展Array时遇到了一些麻烦。我基本上只想在Array类上添加一些辅助方法，在这里我要添加logMe方法，并在数组前添加前缀。

class AAA extends Array {
  _prefix: string;

  constructor(prefix: string, values: number[]) {
    console.log('AAA contructor', values);

    // Use hack
    // https://stackoverflow.com/questions/35673043/extending-array-from-typescript
    super();
    this.push(...values);

    this._prefix = prefix;
  }

  logMe() {
    console.log('The prefix is:', this._prefix);
    console.log('The values are:');
    this.map(x => x * 2).forEach(console.log);
  }
}

这是我的测试：

const a = new AAA('PREFIX-A', [1, 2, 3]);
a.logMe();

预期结果：

AAA contructor [ 1, 2, 3 ]
The prefix is: PREFIX-A
The values are: 1, 2, 3

实际结果：

AAA contructor [ 1, 2, 3 ]
The prefix is: PREFIX-A
AAA contructor undefined

/Users/amaurymartiny/Workspaces/test-array/a.ts:7
    this.push(...values);
         ^
TypeError: Cannot read property 'Symbol(Symbol.iterator)' of this.push
    at new AAA (/Users/amaurymartiny/Workspaces/test-array/a.ts:7:10)
    at AAA.map (<anonymous>)
    at AAA.logMe (/Users/amaurymartiny/Workspaces/test-array/a.ts:13:41)
    at Object.<anonymous> (/Users/amaurymartiny/Workspaces/test-array/a.ts:18:3)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Module.m._compile (/Users/amaurymartiny/Workspaces/test-array/node_modules/ts-node/src/index.ts:439:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Object.require.extensions.(anonymous function) [as .ts] (/Users/amaurymartiny/Workspaces/test-array/node_modules/ts-node/src/index.ts:442:12)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)

这对我来说很奇怪，为什么在我调用this.map时再次调用构造函数？

TypeScript 3.1.3。 NodeJS 10.12.0。我已经实现了this related thread。

Answer 1

尝试一下。它对我有用。

class Collection extends Array<xxx> {    
   constructor(documents: Array<xxx> | number) {
      if(documents instanceof Array) super(...documents);
      else super(documents);
      Object.setPrototypeOf(this, Object.create(Collection.prototype));
   }      
   public get aMethodUsingMapAsExample(): string[] {
      // this.map invokes the constructor with the length passed in as argument
      var types = this.map(e => e.documentType);
      types = types.sort();
      return types;
   }  
}

解释：本机数组构造函数具有 2个重载。您必须在扩展类中同时支持它们。这是因为this.map在幕后创建了一个新数组，从而以数组的长度调用了构造函数。

ArrayConstructor（... items：any []）：在这里必须调用spread 运算符，才能正确构建数组
ArrayConstructor（arrayLength：number）。在数字类型的对象上调用散布运算符会引发异常。

Answer 2

map遍历数组以返回新的数组。由于console.log不会返回一个新的数组，我猜您是想在forEach循环中调用它吗？

this.map(x => x * 2).forEach(console.log);

关于为什么构造函数被调用两次的原因：当我们初始化一个新的AAA类时调用该构造函数，而在构造函数中返回logMe()的一次调用是在map内调用一次。

TypeScript：自定义类扩展数组

2 个答案: