What is the reason behind the NgForOf directive in Angular not supporting union types?

Question

What is the reason behind the NgForOf directive in Angular not supporting union types?

Within my component, I have defined a property array as follows:

array: number[] | string[] = ['1', '2'];

In the template, I am using ngFor to iterate over the elements of this array:

<div *ngFor="let element of array">
  {{element}}
</div>

However, the compiler is throwing an error:

error TS2322:
Type 'number[] | string[]' is not assignable to
type '(number[] & NgIterable<number>) | null | undefined'.

I am puzzled by Angular inferring that the type of the array property should be

number[] & NgIterable<number>

in this scenario.

I am aware that I can resolve the error by using $any() within the template or by setting

angularCompilerOptions.strictTemplates

to false in tsconfig.json, but I prefer to avoid these solutions unless necessary.

I am hesitant to change the type of the array property to

(number | string)[]</code as it would not accurately reflect my intention of having <code>array

contain only numbers or only strings.

javascript angular typescript

Answer 1

Answer №1

There is a known issue within Angular regarding a bug in the NgFor code. Despite both your code and the NgFor code being correct, there seems to be a mistake in how Angular handles template variable types. This can be demonstrated with the following example:

type NgIterable<T> = T[] | Iterable<T>;

const f = <T, U extends NgIterable<T> = NgIterable<T>>(param: (U & NgIterable<T>) | undefined | null) => false;

const a: string[] | number[] = ['1'];

window.console.info(f(a));

When Angular transforms templates into TypeScript, it needs to accurately infer variable types by analyzing AST. In this case, Angular incorrectly infers the type as number[]. This leads to issues when generating "glue" code for the templates.

In some instances, Angular may create a temporary variable or constant with an incorrect type such as

(number[] & NgIterable<number>) | null | undefined

, causing compilation errors like the one shown below:

//...
// templateVar type is "string[] | number[]", it comes from your code
// does not compile
const temp: (number[] & NgIterable<number>) | null | undefined = templateVar; 
ngForInstance.ngForOf = temp;
//...

Answer 2

There is a known issue within Angular regarding a bug in the NgFor code. Despite both your code and the NgFor code being correct, there seems to be a mistake in how Angular handles template variable types. This can be demonstrated with the following example:

type NgIterable<T> = T[] | Iterable<T>;

const f = <T, U extends NgIterable<T> = NgIterable<T>>(param: (U & NgIterable<T>) | undefined | null) => false;

const a: string[] | number[] = ['1'];

window.console.info(f(a));

When Angular transforms templates into TypeScript, it needs to accurately infer variable types by analyzing AST. In this case, Angular incorrectly infers the type as number[]. This leads to issues when generating "glue" code for the templates.

In some instances, Angular may create a temporary variable or constant with an incorrect type such as

(number[] & NgIterable<number>) | null | undefined

, causing compilation errors like the one shown below:

//...
// templateVar type is "string[] | number[]", it comes from your code
// does not compile
const temp: (number[] & NgIterable<number>) | null | undefined = templateVar; 
ngForInstance.ngForOf = temp;
//...

Answer 3

Answer №2

If you want to convert your array, you can define a getter function

  get convertedArray()
  {
    return this.array as NgIterable<number|string>
  }

Then simply use convertedArray in the *ngFor directive

<div *ngFor="let item of convertedArray">
   {{item}}
</div>

However, some may find this method not very elegant.

Answer 4

If you want to convert your array, you can define a getter function

  get convertedArray()
  {
    return this.array as NgIterable<number|string>
  }

Then simply use convertedArray in the *ngFor directive

<div *ngFor="let item of convertedArray">
   {{item}}
</div>

However, some may find this method not very elegant.

Answer 5

Answer №3

Creating a union type for an array in TypeScript can be done using

array: Array<number|string>;

. While union types have not always functioned smoothly in TS, they should work fine with simple types like a|b.

One important thing to note is to avoid naming your array variable array, as it is a reserved keyword and may lead to potential problems down the line.

Answer 6

Creating a union type for an array in TypeScript can be done using

array: Array<number|string>;

. While union types have not always functioned smoothly in TS, they should work fine with simple types like a|b.

One important thing to note is to avoid naming your array variable array, as it is a reserved keyword and may lead to potential problems down the line.

Answer 7

Answer №4

This particular situation caught my attention, and it can be swiftly resolved using the typing capabilities in typescript 4.9 with the use of satisfies:

array = ['1', '2'] satisfies (number[] | string[]);

As a result, all errors have been successfully addressed.

Answer 8

This particular situation caught my attention, and it can be swiftly resolved using the typing capabilities in typescript 4.9 with the use of satisfies:

array = ['1', '2'] satisfies (number[] | string[]);

As a result, all errors have been successfully addressed.

What is the reason behind the NgForOf directive in Angular not supporting union types?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can I determine which dist folder is utilized during the building of my App if an npm package contains multiple dist folders?

Retrieve information stored in a component's data variable

Passing a value from an HTML template to a method within an Angular 4 component

Tips for aligning and emphasizing HTML content with audio stimuli

Ensuring the Presence of a Legitimate Instance in NestJS

Is it possible to combine TypeScript modules into a single JavaScript file?

extract specific data from JSON using JavaScript

Angular - Enhance User Experience with Persistent Autocomplete Suggestions Displayed

Issue with Angular 2 NgFor Pattern Error Message Display Absence

The PHP blocking code in Zend Server not only blocks the response of the current ajax call but also impacts the handling

What is the best way to make a Modal triggered by a loop embedded within a table function properly on mobile devices?

Can the renderWith function of a column in angular-datatables retrieve a value from a promise?

The formBuilder validator pattern seems to be malfunctioning

How does the Cluster module in Node.js compare to the Cluster module in Learnboost?

Navigate in Angular to the server but add token headers using an interceptor

Problem concerning the window object in a React functional component

Leveraging Selenium to dismiss a browser pop-up

How can an object inside an array be destructured in just one line?

Is it possible for me to access information from an external URL using JSON?

Sharing markdown content between two Vue.js components