Inquiry regarding Typescript's array of types

Question

Inquiry regarding Typescript's array of types

While researching how to declare arrays of types online, I came across the following example:

arrayVar: Array<Type>

Seems simple enough, so I attempted to declare my variable like this:

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

However, this resulted in a syntax error. After some trial and error, I ended up using this instead:

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

This solution compiles and functions as expected. Now, my question is: what is the purpose of the parentheses, and why does the declaration not work without them?

angular typescript

Answer 1

Answer №1

When you work with a class called X and invoke X(), you are actually invoking the constructor method of that specific class. To create a new array, you should use Array() but with a specified type indicator within <type>, which then initializes the list element.

If you find the syntax above difficult, an alternative is to use square brackets:

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

Furthermore, it appears that your 'transactions' variable is essentially an array. If all you need is the total count, simply determine the number of elements in the array as follows:

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

Answer 2

When you work with a class called X and invoke X(), you are actually invoking the constructor method of that specific class. To create a new array, you should use Array() but with a specified type indicator within <type>, which then initializes the list element.

If you find the syntax above difficult, an alternative is to use square brackets:

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

Furthermore, it appears that your 'transactions' variable is essentially an array. If all you need is the total count, simply determine the number of elements in the array as follows:

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

Answer 3

Answer №2

Take a look at this

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

//what was done - and what was correct

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

//attempt that resulted in failure
let badTx: Transactions={total:0,list:Transaction[]}; //type `Transaction[]`

Clearly, the mistake was trying to assign a TYPE of Transaction[] when an array (of such type) was expected. Hence, the error.

The parentheses in the question are just part of constructor invocation and would be equivalent to new Array<Transaction>

Try it out on TS Playground

In short - Array is a type, while Array<x>() represents a newly created instance of Array<x>

Answer 4

Take a look at this

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

//what was done - and what was correct

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

//attempt that resulted in failure
let badTx: Transactions={total:0,list:Transaction[]}; //type `Transaction[]`

Clearly, the mistake was trying to assign a TYPE of Transaction[] when an array (of such type) was expected. Hence, the error.

The parentheses in the question are just part of constructor invocation and would be equivalent to new Array<Transaction>

Try it out on TS Playground

In short - Array is a type, while Array<x>() represents a newly created instance of Array<x>

Answer 5

Answer №3

Using parentheses in this context indicates a function call, specifically to instantiate a new empty array that aligns with your type definition by having no members.

Consider the following declaration:


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

In this case, you are actually passing the Array function itself instead of an instance of it. This means that it does not meet the expectation of list being an array instance as per the type definition.

Just so you know, by declaring the assigned object as the Transactions type, list will automatically be understood as an array of Transaction type if it is defined there. Therefore, there is no need to specify the member type when calling Array.


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

Answer 6

Using parentheses in this context indicates a function call, specifically to instantiate a new empty array that aligns with your type definition by having no members.

Consider the following declaration:


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

In this case, you are actually passing the Array function itself instead of an instance of it. This means that it does not meet the expectation of list being an array instance as per the type definition.

Just so you know, by declaring the assigned object as the Transactions type, list will automatically be understood as an array of Transaction type if it is defined there. Therefore, there is no need to specify the member type when calling Array.


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

Inquiry regarding Typescript's array of types

Answer №1

Answer №2

Answer №3

Similar questions

Incorporate Angular frontend into current website or project

Clearing dropdown values when navigating back on a page in Angular 6: A step-by-step guide

Encountering a 400 bad request error while trying to retrieve an authentication token from an API url in Angular

Shifting focus among an array of standard <input> controls with each keystroke

Tips for choosing a subset of objects within a larger array of objects and generating a new array from them?

Angular2 with Webpack causes duplication of styles in the header

I am looking to personalize a Material UI button within a class component using TypeScript in Material UI v4. Can you provide guidance on how to achieve this customization?

How can I simulate or manipulate the element's scrollHeight and clientHeight in testing scenarios?

Sorting character values in TypeScript using ascending and descending order in a JSON array

Updating a specific field in a Firestore document: A step-by-step guide

Generating a compressed tar.gz file with a version-specific name using Angular CLI post-build

Retrieve data using Angular FileReader's onloadend method and return the result

Angular Universal (SSR) 'Selectors were not applied as rules were not followed'

Creating a regular expression for validating phone numbers with a designated country code

Instead of relying on the valueChanges method, consider using setValue or patchValue in Angular 4 to monitor

The data type 'string' cannot be assigned to the data type 'undefined'

Combining pixijs with TypeScript in Ionic 2 using npm

Retrieve data from a table within an Angular component

How to Use an Object Created from a Different Class in TypeScript

Angular 2 Date Input failing to bind to date input value