The error TS2769 occurs when using the spread operator to flatten an array

Question

The error TS2769 occurs when using the spread operator to flatten an array

I've been working on flattening an array, but unfortunately I keep encountering an error - TS2769: No overload matches this call.

Oddly enough, when I tested this in stackblitz, it worked perfectly.

The issue seems to be related to the spread operator: ...this.selectedInstitutions

  selectedInstitutions = [
    [{ displayValue: 'ABC', id: 781 }],
    [{ displayValue: 'DEF', id: 782 }],
  ];

  ngOnInit() {
    this.selectedInstitutions = [].concat(...this.selectedInstitutions);
  }

This is the exact error message I'm receiving:

https://i.sstatic.net/6MTNw.png

angular typescript

Answer 1

Answer №1

When employing [].concat(someValue), the void array [] doesn't possess a specified type and is deduced to be of never[] nature.

Referencing information from the documentation

The never diversity can be assigned to any sort; nonetheless, no category can be appointed to never (aside from never itself).

Thus, when the strictNullChecks typescript option gets activated, an error will occur upon attempting to designate any distinct kind to never[], which occurs explicitly like so:

[].concat(...this.selectedInstitutions)

To bypass this mistake, you can undertake type casting in the following manner:

this.selectedInstitutions = ([] as any[]).concat(...this.selectedInstitutions);

Try it out on the Typescript playground

PS: Refrain from using the any classification whenever feasible. If you've already defined a category for selectedInstitutions, apply that same specification while performing type casting.

Answer 2

When employing [].concat(someValue), the void array [] doesn't possess a specified type and is deduced to be of never[] nature.

Referencing information from the documentation

The never diversity can be assigned to any sort; nonetheless, no category can be appointed to never (aside from never itself).

Thus, when the strictNullChecks typescript option gets activated, an error will occur upon attempting to designate any distinct kind to never[], which occurs explicitly like so:

[].concat(...this.selectedInstitutions)

To bypass this mistake, you can undertake type casting in the following manner:

this.selectedInstitutions = ([] as any[]).concat(...this.selectedInstitutions);

Try it out on the Typescript playground

PS: Refrain from using the any classification whenever feasible. If you've already defined a category for selectedInstitutions, apply that same specification while performing type casting.

Answer 3

Answer №2

It seems that the data you are attempting to manipulate is already in a flat structure, with no nested levels. Trying to combine an array with itself doesn't change the end result. What is your goal with this operation?

One solution could be adding a type declaration to address the issue.

([] as string[]).concat('bar')

  ngOnInit() {
    this.selectedItems = ([] as any[]).concat(...this.selectedItems);
  }

For reference, check out this functional demo: https://stackblitz.com/edit/angular-ivy-scfukg?file=src%2Fapp%2Fapp.component.ts

Answer 4

It seems that the data you are attempting to manipulate is already in a flat structure, with no nested levels. Trying to combine an array with itself doesn't change the end result. What is your goal with this operation?

One solution could be adding a type declaration to address the issue.

([] as string[]).concat('bar')

  ngOnInit() {
    this.selectedItems = ([] as any[]).concat(...this.selectedItems);
  }

For reference, check out this functional demo: https://stackblitz.com/edit/angular-ivy-scfukg?file=src%2Fapp%2Fapp.component.ts

The error TS2769 occurs when using the spread operator to flatten an array

Answer №1

Answer №2

Similar questions

Setting the dispatch type in Redux using Typescript

Trouble with scrolling on Kendo chart while using mobile device

How come TypeScript doesn't recognize my MongoDB ObjectID as a valid type?

Angular 5 Error Messages for HTTP Interceptors

How can you incorporate TypeScript's dictionary type within a Mongoose schema?

Unleashing the power of joint queries in Sequelize

Combine values from 2 distinct arrays nested within an array of objects and present them as a unified array

I encountered an issue with Svelte (Vite) + Bootstrap 5 + SvelteStrap where it gave me the error message stating: "Cannot assign type 'string' to type 'ButtonColor'"

Retrieve the desired destination URL in the CanActivate guard when lazily loading modules in Angular

What kind of conditions does SonarQube report as being uncovered?

When transforming a function into a custom command, the expected outcome may vary

What happens when a CSS module is exported as an empty object?

Encountering an issue where attempting to access the `toUpperCase` property of undefined in an *ngFor loop leads to an error

Angular 2 routing for dynamic population in a grid system

Utilizing Angular 6 mergeMap for handling nested API requests

AngularJS UI-Router in hybrid mode fails to recognize routes upon initial page load or reload

Unveiling the Mystery of Angular: Why are constructor parameters without access specifiers hidden from view outside the

The type '[Images]' cannot be assigned to type 'string'

Agents should only be initialized within a before function or a spec in Angular

Webpack cannot find the specified module extension