Typescript - multidimensional array initialization

Question

I'm playing with Typescript and I wonder, how to properly instantiate and declare multidimensional array. Here's my code:

class Something {
    private things: Thing[][];

    constructor() {
        things = [][]; ??? how instantiate object ???

        for(var i: number = 0; i < 10; i++) {
            this.things[i] = new Thing[];   ??? how instantiate 1st level ???
            for(var j: number = 0; j< 10; j++) {
                this.things[i][j] = new Thing();   ??? how instantiate 2nd lvl item ???
            }
        }
    }
}

Can you give me any hint about selected places?

Stuart Hallows · Accepted Answer · 2018-11-18 12:40:35Z

148

You only need [] to instantiate an array - this is true regardless of its type. The fact that the array is of an array type is immaterial.

The same thing applies at the first level in your loop. It is merely an array and [] is a new empty array - job done.

As for the second level, if Thing is a class then new Thing() will be just fine. Otherwise, depending on the type, you may need a factory function or other expression to create one.

class Something {
    private things: Thing[][];

    constructor() {
        this.things = [];

        for(var i: number = 0; i < 10; i++) {
            this.things[i] = [];
            for(var j: number = 0; j< 10; j++) {
                this.things[i][j] = new Thing();
            }
        }
    }
}

edited Nov 18, 2018 at 12:40

Stuart Hallows

8,9735 gold badges47 silver badges57 bronze badges

answered May 9, 2015 at 20:22

Puppy

147k40 gold badges271 silver badges480 bronze badges

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

3 Comments

Fka Over a year ago

I can't imagine, how typings are preserved here. Can you give me any examples, please?

Puppy Over a year ago

There are 0 items in the array, so there's no value or object to type.

stefanbschneider Over a year ago

I guess, it should be this.things = []; in the constructor.

ggorlen · Accepted Answer · 2021-07-13 23:23:24Z

36

Here is an example of initializing a boolean[][]:

const n = 8; // or some dynamic value
const palindrome: boolean[][] = new Array(n)
                                   .fill(false)
                                   .map(() => 
                                     new Array(n).fill(false)
                                   );

edited Jul 13, 2021 at 23:23

ggorlen

59.3k8 gold badges119 silver badges173 bronze badges

answered Mar 3, 2019 at 3:02

techguy2000

5,1916 gold badges39 silver badges55 bronze badges

4 Comments

Tukkan Over a year ago

shorter new Array(n).fill(new Array(n).fill(false))

Nir Alfasi Over a year ago

@Tukkan it will not work as expected: try to modify palindrome[0][0] and see what happens... ;)

Tukkan Over a year ago

@NirAlfasi yup, I checked and it works :)

Nir Alfasi Over a year ago

Nope! if you'll define p = new Array(n).fill(new Array(n).fill(false)) and then modify p[0][0] = true you'll see that the whole column changes instead of a single cell!

RMuesi · Accepted Answer · 2017-12-14 17:50:51Z

22

If you want to do it typed:

class Something {

  areas: Area[][];

  constructor() {
    this.areas = new Array<Array<Area>>();
    for (let y = 0; y <= 100; y++) {
      let row:Area[]  = new Array<Area>();      
      for (let x = 0; x <=100; x++){
        row.push(new Area(x, y));
      }
      this.areas.push(row);
    }
  }
}

edited Dec 14, 2017 at 17:50

answered Dec 13, 2017 at 19:55

RMuesi

3,1122 gold badges28 silver badges29 bronze badges

3 Comments

Fka Over a year ago

Thanks, but not everyone is using AngularJs to write JS/TS code.

What Would Be Cool Over a year ago

This is just standard TS code, right? What do you see as AngularJs specific? I prefer this solution with types. Thanks

mattumotu Over a year ago

@WhatWouldBeCool the answer was edited to remove AngularJs specific code

Facundo Colombier · Accepted Answer · 2022-07-08 12:04:17Z

9

You can do the following (which I find trivial, but its actually correct). For anyone trying to find how to initialize a two-dimensional array in TypeScript (like myself).

Let's assume that you want to initialize a two-dimensional array, of any type. You can do the following

const myArray: any[][] = [];

And later, when you want to populate it, you can do the following:

myArray.push([<your value goes here>]);

A short example of the above can be the following:

const myArray: string[][] = []; 
myArray.push(["value1", "value2"]);

edited Jul 8, 2022 at 12:04

Facundo Colombier

3,6912 gold badges40 silver badges44 bronze badges

answered Aug 19, 2020 at 14:03

geocfu

912 silver badges2 bronze badges

Comments

Tukkan · Accepted Answer · 2024-02-25 21:41:29Z

0

class Thing {};

const rowSize = 3;
const colSize = 3;

const arr: Thing[][] = new Array(rowSize).fill(
                         new Array(colSize).fill(new Thing())
                       );

edited Feb 25, 2024 at 21:41

answered Feb 25, 2024 at 21:35

Tukkan

1,6253 gold badges20 silver badges34 bronze badges

Comments

Baljit Singh · Accepted Answer · 2024-04-17 10:21:48Z

0

Creating and initializing 2D Array in typescript

const colours: number[][]=[
    [255, 255, 255],
]

//initialize by variable
const blue = [0, 0, 255];

colours.push(blue);

answered Apr 17, 2024 at 10:21

Baljit Singh

211 silver badge8 bronze badges

Comments

Pipo · Accepted Answer · 2018-12-25 00:32:15Z

-3

Beware of the use of push method, if you don't use indexes, it won't work!

var main2dArray: Things[][] = []

main2dArray.push(someTmp1dArray)
main2dArray.push(someOtherTmp1dArray)

gives only a 1 line array!

use

main2dArray[0] = someTmp1dArray
main2dArray[1] = someOtherTmp1dArray

to get your 2d array working!!!

Other beware! foreach doesn't seem to work with 2d arrays!

edited Dec 25, 2018 at 0:32

answered Dec 25, 2018 at 0:25

Pipo

5,1831 gold badge44 silver badges52 bronze badges

Collectives™ on Stack Overflow

Typescript - multidimensional array initialization

7 Answers 7

3 Comments

4 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

4 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related