How to instantiate, initialize and populate an array in TypeScript?

Question

I have the following classes in TypeScript:

class bar {
    length: number;
}

class foo {
    bars: bar[] = new Array();
}

And then I have:

var ham = new foo();
ham.bars = [
    new bar() {          // <-- compiler says Expected "]" and Expected ";"
        length = 1
    }
];

Is there a way to do that in TypeScript?

UPDATE

I came up with another solution by having a set method to return itself:

class bar {
    length: number;

    private ht: number;
    height(h: number): bar {
        this.ht = h; return this;
    }

    constructor(len: number) {
        this.length = len;
    }
}

class foo {
    bars: bar[] = new Array();
    setBars(items: bar[]) {
        this.bars = items;
        return this;
    }
}

so you can initialize it as below:

var ham = new foo();
ham.setBars(
    [
        new bar(1).height(2),
        new bar(3)
    ]);

It would be really useful to have object initializers in TypeScript similar to C#. [ {length: 1} ] is not instance of bar but if supported, new bar() { length = 1 } would be instance of bar. Maybe we should make a feature suggestion for this? — orad
– orad, Commented Aug 19, 2013 at 18:30

Ryan Cavanaugh · Accepted Answer · 2013-02-04 06:21:21Z

89

There isn't a field initialization syntax like that for objects in JavaScript or TypeScript.

Option 1:

class bar {
    // Makes a public field called 'length'
    constructor(public length: number) { }
}

bars = [ new bar(1) ];

Option 2:

interface bar {
    length: number;
}

bars = [ {length: 1} ];

answered Feb 4, 2013 at 6:21

Ryan Cavanaugh

223k59 gold badges280 silver badges235 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Patrice Over a year ago

to make things clearer and typesafe : bars:bar[]=[{length:1}]

Zhengzhe Li Over a year ago

Is there any way to do this without defining classes?

Ryan Cavanaugh Over a year ago

The question is about how to initialize an array in a class. There isn't a way to initialize an array in a class without using classes.

orad · Accepted Answer · 2013-08-19 19:21:36Z

29

If you really want to have named parameters plus have your objects be instances of your class, you can do the following:

class bar {
    constructor (options?: {length: number; height: number;}) {
        if (options) {
            this.length = options.length;
            this.height = options.height;
        }
    }
    length: number;
    height: number;
}

class foo {
    bars: bar[] = new Array();
}

var ham = new foo();
ham.bars = [
    new bar({length: 4, height: 2}),
    new bar({length: 1, height: 3})
];

Also here's the related item on typescript issue tracker.

answered Aug 19, 2013 at 19:21

orad

16.2k24 gold badges82 silver badges115 bronze badges

1 Comment

Sam Over a year ago

+1 for issue link. You can also make initializer values optional: options? : {length?: number; height?: number;}

Adel Bachene · Accepted Answer · 2018-03-12 16:05:47Z

15

A simple solution could be:

interface bar {
    length: number;
}

let bars: bar[];
bars = [];

answered Mar 12, 2018 at 16:05

Adel Bachene

1,0141 gold badge15 silver badges34 bronze badges

Comments

Liam Hogan · Accepted Answer · 2019-09-09 03:25:24Z

4

If you would like to 'add' additional items to a page, you may want to create an array of maps. This is how I created an array of maps and then added results to it:

import { Product } from '../models/product';

products: Array<Product>;          // Initialize the array.

[...]

let i = 0;
this.service.products( i , (result) => {

    if ( i == 0 ) {
        // Create the first element of the array.
        this.products = Array(result);
    } else { 
        // Add to the array of maps.
        this.products.push(result);
    }

});

Where product.ts look like...

export class Product {
    id: number;
    [...]
}

answered Sep 9, 2019 at 3:25

Liam Hogan

3444 silver badges14 bronze badges

1 Comment

Juuro Over a year ago

If you initialise the Array like this: products: Array<Product> = []; you don't have to do the if clause.

ArDumez · Accepted Answer · 2019-02-22 13:27:29Z

3

An other solution:

interface bar {
    length: number;
}

bars = [{
  length: 1
} as bar];

answered Feb 22, 2019 at 13:27

ArDumez

1,0319 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to instantiate, initialize and populate an array in TypeScript?

5 Answers 5

3 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related