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

Embed a subcomponent within another component triggered by an onClick event in ReactJS

Exploring click event beyond React Component: Jest + Enzyme Testing

Error: Unable to access the 'address' property of a null object

I keep encountering a parser error when making an AJAX call to retrieve JSON data. It seems to be caused by

Using the setTimeout function with asynchronous tasks

"Observed Issue: Ionic2 Array Fails to Update in HTML Display

What's the reason behind the absence of the bar chart in this presentation?

The issue with the value of the textarea in Selenium automated tests using

Guide on optimizing Angular CLI production builds with gzip compression

Utilize JavaScript when sharing on social media to avoid the possibility of embedding the entire

Exploring the contrast between Vuex store WATCH and SUBSCRIBE

Once the page is refreshed, the checkbox should remain in its current state and

Efficient Ways to pass information to an Object within a nested function

The type 'GetServerSidePropsContext<ParsedUrlQuery, PreviewData>' does not include property X

Utilizing Angular 2's Routerlink with *ngIf and Parameters

The margin of the parent container is influencing the margin of the child element

Incorporate a file into all API endpoints with Next.js API functionality

I'm confused why this particular method within a class is not being inherited by the next class. Rather than seeing the expected extension, I am presented with - [Function (

Allow web applications in Apache ServiceMix to communicate across different domains by enabling Cross

Guide to configuring an Angular Material Footer using Flex-Layout