Question about array of types in Typescript

Question

When looking up how to declare arrays of types online I found the following:

arrayVar: Array<Type>

Straight forward, so I tried declaring my variable as follows:

transactions: Transactions = { total : 0, list: Array<Transaction>};

This produces a syntax error, therefore I used the following instead:

transactions: Transactions = { total : 0, list: Array<Transaction>()};

Which compiles and works as expected. My questions is what purpose do the parenthesis serve and why does it no compile without them in my declaration?

Mauricio Gracia Gutierrez · Accepted Answer · 2021-09-13 13:13:01Z

2

When you are working with class X and you call X() you are calling the constructor method of that class. Since you are trying to create a new array you need to call Array() but with a <type> indicator, and that initializes your list element.

If you don't like that syntax you could use square brackets

transactions: Transactions = { total : 0, list: Transaction[]};

Also it seems that your transactions is nothing more that an array, if you need the total just count the number of items in the array.

transactions: Transaction[] ;
transactions.push(transA) ;
transactions.push(transB) ;
let total = transactions.length();

edited Sep 13, 2021 at 13:13

answered Sep 13, 2021 at 13:04

Mauricio Gracia Gutierrez

11k7 gold badges81 silver badges115 bronze badges

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

1 Comment

Musaffar Patel Over a year ago

I already tried square brackets as per your suggestion but get the syntax error 'Transaction' only refers to a type, but is being used as a value here'. In regards using the array length, the array length is shorter than the actual count as the results are paged for the material table. The the total from the server is needed for the paginator. It's a good suggestion however and would ideally be how I would have like to implement it if I didn't have the paging restriction

Mauricio Gracia Gutierrez · Accepted Answer · 2021-09-13 13:08:51Z

1

Consider this

export type Transaction={};
export type Transactions={
  total:number;
  list:Transaction[]; //or Array<Transaction>
}

//what you did - and what is fine

let transactions: Transactions = {total:0,list:[]}; //empty array

//what you tried to do and it failed
let badTx: Transactions={total:0,list:Transaction[]}; //type `Transaction[]`

as you can clearly see, you tired to assign a TYPE of Transaction[] while array (of such type) was expected. Therefore the error.

Parenthesis from the question are just part of constructor invocation and would be equal to new Array<Transaction>

Check it out on TS Playground

Long story short - Array is a type while Array<x>() is newly created instance of Array<x>

edited Sep 13, 2021 at 13:08

Mauricio Gracia Gutierrez

11k7 gold badges81 silver badges115 bronze badges

answered Sep 13, 2021 at 13:05

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

Comments

Carl Pryke · Accepted Answer · 2021-09-13 12:54:58Z

1

The parentheses signify a function call, you are instantiating a new empty array. It conforms to your type definition because it has no members.

In this declaration:


transactions: Transactions = { total : 0, list: Array<Transaction>};

You are passing the Array function instead. This does not meet the type definition of list, which is an Array instance.

FYI, you have declared the type of the assigned object to be the Transactions type, list will already be inferred as being an array of the Transaction type if you have defined it there, so you don't need to pass the member type to Array.


transactions: Transactions = { total : 0, list: Array()};

edited Sep 13, 2021 at 12:54

answered Sep 13, 2021 at 12:44

Carl Pryke

3491 silver badge7 bronze badges

2 Comments

Mauricio Gracia Gutierrez Over a year ago

TypeScrpit recommends to use types whenever possible, removing the type here will allow any type of arrays in the second position.

Carl Pryke Over a year ago

It depends on the type definition of Transactions, if it has the type of list defined in there then TS will pick up incorrect members. const transactions: { total: number, list: Array<number> } = { total: 0, list: [""] // error }

Collectives™ on Stack Overflow

Question about array of types in Typescript

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related