Error message 'No suitable overload for this function' occurs while attempting to retrieve a Map

Question

Error message 'No suitable overload for this function' occurs while attempting to retrieve a Map

While attempting to generate a Map, I encounter an unfamiliar error message that is puzzling:

TS2769: No overload matches this call.
  Overload 1 of 4, '(iterable: Iterable<readonly [string, number]>): Map<string, number>', gave the following error.
    Argument of type '(string | number)[][]' is not assignable to parameter of type 'Iterable<readonly [string, number]>'.
      The types returned by '[Symbol.iterator]().next(...)' are incompatible between these types.
        Type 'IteratorResult<(string | number)[], any>' is not assignable to type 'IteratorResult<readonly [string, number], any>'.

In my programming code, I am taking in an array and attempting to form a map object out of it

function createMapOfHeadersToIndex(headers: string[]): Map<string, number> {
  const headersWithIndex =
      headers.map(header => [header, Number(headers.indexOf(header))]);
  return new Map(headersWithIndex);
}

typescript dictionary

Answer 1

Answer №1

Because the type of headersWithIndex was not explicitly defined, the compiler automatically deduced its type for you based on common array usage patterns:

const headersWithIndex =
  headers.map(header => [header, Number(headers.indexOf(header))]);
// const headersWithIndex: (string | number)[][]

The inferred type, (string | number)[][], indicates "an array of arrays containing either strings or numbers." While this is a generally accurate description of headersWithIndex, it is not specific enough for certain operations like initializing a Map.

To address this issue, you can utilize a const assertion when creating the array literal with key-value pairs:

const headersWithIndex =
  headers.map(header => [header, Number(headers.indexOf(header))] as const);
// const headersWithIndex: (readonly [string, number])[]
return new Map(headersWithIndex); //okay

By using as const, you are hinting to the compiler to infer the most precise type possible, ensuring that each element inside headersWithIndex is a readonly tuple consisting of one string and one number.

Now, the Map constructor is satisfied because it knows with certainty that every element in headersWithIndex represents a string key paired with a number value, resulting in a Map<string, number>.

Link to Playground for Code Testing

Answer 2

Because the type of headersWithIndex was not explicitly defined, the compiler automatically deduced its type for you based on common array usage patterns:

const headersWithIndex =
  headers.map(header => [header, Number(headers.indexOf(header))]);
// const headersWithIndex: (string | number)[][]

The inferred type, (string | number)[][], indicates "an array of arrays containing either strings or numbers." While this is a generally accurate description of headersWithIndex, it is not specific enough for certain operations like initializing a Map.

To address this issue, you can utilize a const assertion when creating the array literal with key-value pairs:

const headersWithIndex =
  headers.map(header => [header, Number(headers.indexOf(header))] as const);
// const headersWithIndex: (readonly [string, number])[]
return new Map(headersWithIndex); //okay

By using as const, you are hinting to the compiler to infer the most precise type possible, ensuring that each element inside headersWithIndex is a readonly tuple consisting of one string and one number.

Now, the Map constructor is satisfied because it knows with certainty that every element in headersWithIndex represents a string key paired with a number value, resulting in a Map<string, number>.

Link to Playground for Code Testing

Error message 'No suitable overload for this function' occurs while attempting to retrieve a Map

Answer №1

Similar questions

"Optimize Your Data with PrimeNG's Table Filtering Feature

Using TypeScript with Selenium

Having trouble retrieving the return value from an Angular HTTP POST request?

I am currently analyzing a JSON file that contains deeply nested JavaScript Objects. My goal is to rearrange the data so that objects containing a specific field value are placed at the top of the list

Sequentially arranged are the assignments in Firebase functions

The type 'Function' does not contain any construct signatures.ts

Using object in Typescript for function overloading - External visibility of implementation signatures for overloads is restricted

Tips for conducting tests on ngrx/effects using Jasmine and Karma with Angular 5 and ngrx 5

Break down a data structure into a type that includes multiple options

Using a promise as a filter callback in JavaScript: A guide

Issue with using useState inside alert: unexpected empty array

Utilize the power of meteor-dburles-collection-helpers in TypeScript for optimizing your collections

What is the best way to process a date string and format it in TypeScript?

When trying to assign a typed value, the Typescript compiler often provides convoluted error messages

Angular's observables were unable to be subscribed to in either the constructor or ngOnInit() functions

Is it possible to utilize pinia getter as the initial parameter in Vue3's watch function?

Steps to activate a button once the input field has been completed

What is causing the duplication of leaves when using this DFS implementation?

Directing users to varying pages based on a particular criteria

Is it possible to identify unauthorized utilization of web APIs within TypeScript?