打字稿:类扩展数组，不能分配方法 [英] Typescript: class extending Array, can't assign method

问题描述

我正在使用 Typescript 和 Vue，但我希望我的框架无关紧要.

I'm working with Typescript and Vue, but I hope that my framework doesn't matter.

我正在尝试像这样扩展数组:

I'm trying to extend Array like that:

class AudioArray extends Array<[number, number]> {
    constructor(size: number) {
        super(size);
    }

    static fromArray(array: Array<number>): AudioArray {
        return array.map((v, i) => [i, v]) as AudioArray;
    }

    addNumber(num: number): AudioArray {
        return this.map((x: [number, number]) => [x[0], x[1] + num]) as AudioArray;
    }
}

export default AudioArray;

然后我将它导入到我的组件中:

and I'm importing it into my component:

<script lang="ts">
import AudioArray from '@/utils/audioarray'

someFunction() {
    const normalArray = [0,1,2,3,4];

    const audioValues = AudioArray.fromArray(normalArray);
    const audioValues2 = audioValues.addNumber(2);
}

我的静态函数 fromArray 工作得很好，但我有这样的消息:

My static function fromArray works very well, but I have such a message:

类型错误:audioValues.addNumber 不是函数"

我已经将 AudioArray 和 audioValues 记录到控制台，这是结果

I've logged AudioArray and audioValues to console and here's the result

推荐答案

问题在于如何创建 AudioArray 的实例:

The problem is how you create instances of AudioArray:

static fromArray(array: Array<number>): AudioArray {
    return array.map((v, i) => [i, v]) as AudioArray;
}

您使用 as 强制转换使编译器静音的事实不会使 array.map 的结果成为 AudioArray 的实例(即是，不设置原型链).您需要使用适当的构造函数来做到这一点.

The fact that you use as cast to silence the compiler does not make the result of array.map an instance of AudioArray (that is, does not set prototype chain). You need to use a proper constructor to do that.

class AudioArray extends Array<[number, number]> {
    constructor(size: number) {
         super(size);
    }

    static fromArray(array: Array<number>): AudioArray {
        const ret = new AudioArray(0);
        ret.push(...array.map((v, i) => AudioArray.toRecord(i, v)));
        return ret;
    }

    static toRecord(a1: number, a2: number): [number, number] { 
        return [a1, a2];
    }

    addNumber(num: number): AudioArray {
        const ret = new AudioArray(0);
        ret.push(...this.map((x: [number, number]) => AudioArray.toRecord(x[0], x[1] + num));
        return ret;
    }
}

更一般地说，扩展 Array 以添加方法是有问题的设计，请考虑使用组合是否可以实现您的目标.

More generally, extending Array to add methods is questionable design, think if you can achieve your goal using composition.

这篇关于打字稿:类扩展数组，不能分配方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！