Question

有没有办法将index属性委托给typescript中的成员？我正在编写一个包装器，我想将index属性委托给我正在包装的对象。

类似的东西：

interface MyStringArray {
    length : number;
    clear() : void;
    [index: number] : string;
}

export class MyStringArrayWrapper implements MyStringArray {

    private wrapped : MyStringArray;

    public get length() : number { 
        return this.wrapped.length;
    }

    public clear() : void {
        this.wrapped.clear();
    }

    // This doesn't work
    public get [index : number] : string { 
        return this.wrapped[index];
    }

    // This doesn't work either
    public set [index : number](value: string) { 
        this.wrapped[index] = value;
    }
}

Answer 1

TypeScript不允许这样做，因为它无法为此类构造生成JavaScript代码。 JavaScript中没有办法在设置任何属性时调用的类上定义一个catch-all getter / setter。

我能得到的最接近的方法是在类上定义hasItem，getItem和setItem方法，然后将~~包装在每个~~ 的实例中原型 ES2015 Proxy对象中的该类，它将所有get和set代理到该实例的属性。

function isArrayIndex(key) {
    var keyAsNumber = +key; // convert string to number
    if (keyAsNumber < 0) {
        return false; // must be positive or zero
    }
    if (keyAsNumber !== keyAsNumber|0) {
        return false; // must be integer
    }
    return true;
}

function toArrayIndex(key) {
    return key|0; // convert string to integer
}

function MyArrayWrapper(wrapped) {
    this.wrapped = wrapped;
}
  
MyArrayWrapper.prototype = {
    get length() { 
        return this.wrapped.length;
    },

    clear() {
        this.wrapped.length = 0;
    },
  
    getItem(index) {
        return this.wrapped[index];
    },
  
    setItem(index, value) {
        this.wrapped[index] = value;
    }
  
}

var MyArrayWrapperProxyHandler = {
    get: function (target, key, receiver) {
        if (isArrayIndex(key)) {
            return receiver.getItem(toArrayIndex(key));
        } else {
            return Reflect.get(target, key, receiver);
        }
    },
    set: function (target, key, value, receiver) {
        if (isArrayIndex(key)) {
            return receiver.setItem(toArrayIndex(key), value);
        } else {
            return Reflect.set(target, key, value, receiver);
        }
    }
};

MyArrayWrapper.prototype = new Proxy(MyArrayWrapper.prototype, MyArrayWrapperProxyHandler);

var array = ['a', 'b', 'c'];
var wrapper = new MyArrayWrapper(array);

console.log('read:', wrapper[2] === 'c'); // true, reads from wrapped array

wrapper[3] = 'd';
console.log('write:', array[3] === 'd'); // true, writes to wrapped array
console.log('resize:', wrapper.length === 4); // true, wrapped array is resized

这需要一个支持Proxy对象的现代浏览器，它使用Reflect通过原型链手动传递其他属性（例如this.wrapped）。有很多东西不起作用（例如'2' in wrapped是false）因为我找不到正确捕获它们的方法。

此外，代理比直接使用hasItem/getItem/setItem要慢得多，所以我不建议将它们用于任何性能关键的事情。它们也可能使用起来非常混乱，因为当涉及代理时，突然一个简单的foo[0] = 'bar'可以做各种疯狂的事情。

如果你对以上所有内容都没问题，那么请确保在上面的代码片段中添加一些类型，并且你有一个带有委托数组索引getter / setter的TypeScript代码。这更像是一个“概念证明”，我只是想看看你能在多大程度上推动JavaScript。 :-P

有没有办法在typescript中委托索引属性？

1 个答案: