Typescript: Using array notation to get items from class

Question

I have class called Candles and a class called Candle. Candles has a property list that contains an array of Candle.

class Candles
{
  public list: Array<Candle>;
}

class Candle
{
  public date: number;
  public high: number;
  public low: number;
  public open: number;
  public close: number;
  public volume: number;
}

I want list to encapsulate with the Candles class. For example,

const candles = new Candles();
candles[3] === candles.list[3];

I want candles[3] to return candles.list[3]

I also want to use map. Example:

candles.map(function(candle: Candle) {
    console.log(candle.high);
});

Aleksey L. · Accepted Answer · 2017-09-13 10:47:02Z

You can intercept and forward calls to inner list using ES6 Proxy:

class Candles {
  public list: Candle[] = [];

  constructor() {
    return new Proxy(this, {
      get(target, propertyKey) {
        console.log('getting ', propertyKey);
        if (propertyKey in target) {
          console.log('own property');
          return target[propertyKey]
        }

        console.log('forward to inner list');
        const property = target.list[propertyKey];
        if (typeof property === "function") {
          return property.bind(target.list);
        }

        return property;
      }
    });
  }
}

To inform the compiler that Candles can be used as an Array add following definition:

interface Candles extends Array<Candle> { }

And now all the array goodies (e.g. push, foreach, map...) can be applied to Candles:

const candles = new Candles();
candles.push({ low: 1 } as Candle);

console.log(candles[0] === candles.list[0]); //true
candles.forEach(c => console.log(c));

Demo in playground.

Titian Cernicova-Dragomir · Accepted Answer · 2017-09-13 04:41:08Z

1

You can't change the behavior of the indexing operation in Typescript because Javascript does not support this either. What you could do is create a type taht extends the standard array, as described in this question

answered Sep 13, 2017 at 4:41

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Comments

tony · Accepted Answer · 2017-09-12 21:55:43Z

0

What you want there is operator overloading. Typescript does not have support for it.

You can learn more about the reasoning why this is the case in the github issue threads: https://github.com/Microsoft/TypeScript/issues/2319 https://github.com/Microsoft/TypeScript/issues/5407

answered Sep 12, 2017 at 21:55

tony

1,3461 gold badge13 silver badges28 bronze badges

Comments

Raza · Accepted Answer · 2017-09-13 16:27:47Z

0

Here's what I did:

class Candles extends Array<Candle>
{
  constructor(candles: Array<Candle.Data>) {
    super(...candles.map((candle) => new Candle(candle as Candle.Data)));
    Object.setPrototypeOf(Candles, Object.assign(Array.prototype, Candles.prototype));
  }
}

I got rid of list and just extended Array<Candle>. I also added Object.setPrototypeOf(Candles, Object.assign(Array.prototype, Candles.prototype)); to use the Array methods along with Candles's method

answered Sep 13, 2017 at 16:27

Raza

3,4732 gold badges35 silver badges37 bronze badges

Collectives™ on Stack Overflow

Typescript: Using array notation to get items from class

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related