Question on Best Practice for Data Binding / Performance of ToArray()/new List<T>

First off, this is awesome. As someone coming from C# picking up TypeScript, this makes me feel a lot more at home.

Question regarding usage of these magic Lists. In a js framework, e.g. Vue, obviously they would expect Arrays for binding (i.e. can’t bind directly to List. So is it better to 1) keep your data as a List in the component and just call ToArray on it for binding, or 2) keep your component data as an array that you bind to, have a computed prop that turns it into a List, and use that computed prop for manipulation.

Which would be the recommended approach in general, or is there a better way I’m missing? Which in most cases would be more performant? Would appreciate any insight.

Here’s a Vue example of option 2:

@Component
export default class App extends Vue {

  servers: IServer[] = [
    { name: "Ol Faithful", num: 1, age: 10, status: "Up" },
    { name: "Rackspacer", num: 2, age: 3.5, status: "Up" },
    { name: "Basement Dweller", num: 3, age: 5, status: "Down" },
    { name: "Big Rig", num: 4, age: 7, status: "Unknown" },
    { name: "Dyno-mite", num: 5, age: 1, status: "Up" }
  ];

  get serverList() {
    return new List(this.servers);
  }

  testLINQ() {
    // test updating data
    this.serverList.First().name =
      this.serverList.First().name + " - updated via LINQ";

    // test linq functions
    let maxAge = this.serverList.Max(s => s.age);
    let oldestServer = this.serverList.FirstOrDefault(s => s.age === maxAge);
    alert(`Oldest server is ${oldestServer.name} with an age of ${maxAge}.`);
  }
}

[johnhamm]

FIY, I just ended up passing in an observable array to the List constructor to get it to respons to Mobx’s change notifications (you can use them in Angular templates now and it will automatically update itself whenever an item is added to or removed from the list):

let list = new List<SomeObject>(observable.array());

[johnhamm]

Thought I would add this for future users of this great library and mobx. Linq.ts is not compatible with mobx’s change detection, so to get it to work, you would always use a computed property for the Linq list, and use an array for the observable property like so:

import { List } from 'linq.ts';
import { autorun, observable, computed } from 'mobx';

class Test {
  @observable list = new List<number>([1,2,3]);
  @observable a = [1,2,3];

  @computed get list2() { return new List<number>(this.a);}

  constructor() {
    console.clear();

    autorun(() => {
      console.log("Only runs once");
      console.log(this.list);
      console.log(this.list.ToArray());
    });

    this.list.Add(4);

    autorun(() => {
      console.log("Runs three times");
      console.log(this.a);
    })

    autorun(() => {
      console.log("Should also run three times");
      console.log(this.list2);
    })

    this.a.push(4);
    this.a.push(5);    

    console.log(this.list);
  }    
}

var test = new Test();

Stackblitz example: https://stackblitz.com/edit/mobx-linqts

My fantasy is to have linq.ts modified to be compatible with Mobx’s change detection (which uses Javascript proxy objects to implement its change detection). Then I’d have the dream combination 😃