When trying to create a Map or OrderedMap in TypeScript with Immutable JS, you may encounter the error message "No overload matches this call."

In my project, I am utilizing Typescript version 3.8.3 alongside

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395054544c4d585b555c790d17091709144b5a17">[email protected]</a>
.

An issue arises when attempting to create an OrderedMap using a two-dimensional array for instantiation in Typescript.

let v: OrderedMap<number, string> = OrderedMap([ [ 3, '2' ] ])

For further elaboration and demonstration, check out this example on Codesandbox.io

Upon inspection, it seems that there could be an error in the definition file of the library which results in the following error:

immutable-nonambient.d.ts(1421, 39)
. The specific error message received is:

No overload matches this call.
  Overload 1 of 4, '(collection: Iterable<[string | number, string | number]>): OrderedMap<string | number, string | number>', gave the following error.
    Argument of type '(string | number)[][]' is not assignable to parameter of type 'Iterable<[string | number, 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<[string | number, string | number], any>'.
          Type 'IteratorYieldResult<(string | number)[]>' is not assignable to type 'IteratorResult<[string | number, string | number], any>'.
            Type 'IteratorYieldResult<(string | number)[]>' is not assignable to type 'IteratorYieldResult<[string | number, string | number]>'.
              Type '(string | number)[]' is missing the following properties from type '[string | number, string | number]': 0, 1
  Overload 2 of 4, '(obj: { [key: string]: string; }): OrderedMap<string, string>', gave the following error.
    Type '(string | number)[]' is not assignable to type 'string'.ts(2769)
immutable-nonambient.d.ts(1421, 39): The expected type comes from this index signature.
 

A similar issue occurs with Map. While initializing an empty Map or OrderedMap and then performing operations works fine, the problem lies in initializing them via a two-dimensional array.

Interestingly, instantiating using this format: OrderedMap({ 3: '2' }) does not result in compilation errors. However, since I need numeric keys, utilizing the array notation remains the preferred method despite the encountered challenges.

Answer №1

Initially, it's worth noting that @types/immutable is no longer actively maintained

This particular package has been marked as deprecated

The author's note:

This serves as a placeholder type definition for Facebook's Immutable library (https://github.com/facebook/immutable-js). The actual type definitions are provided by Facebook's Immutable itself, meaning there is no need to have @types/immutable installed!

Once you remove this, you can expect to see improved type hints within your editor.

For a practical demonstration, refer to: https://stackblitz.com/edit/typescript-vwetmv?file=index.ts

Update

Including

"target": "es2015"
in the compiler options will resolve the error.

Refer to documentation: Using TypeScript with Immutable.js v4

The type definitions for Immutable.js align with ES2015 standards. Although Immutable.js supports older browsers and environments, its type definitions necessitate the ES2015 lib from TypeScript. Ensure to include either

"target": "es2015"
or
"lib": "es2015"
in your tsconfig.json, or specify --target es2015 or --lib es2015 in the tsc command.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent external scrolling while Bootstrap modal is active

<div class="modal mt-5p" role="dialog" [ngStyle]="{'display':IONotes}"> <div class="modal-dialog modal-md mt-0px width-70p"> <div class="modal-content" style="height:500 ...

Building and executing an Angular 2 program on the Windows platform: Step-by-step guide

After successfully installing npm and related packages including TypeScript and Angular 2, I am encountering difficulties running Angular 2 in my browser on a Windows platform. Can someone provide a step-by-step guide to help me create and run Angular 2 ...

JavaScript and TypeScript: Best practice for maintaining an Error's origin

Coming from a Java developer background, I am relatively new to JavaScript/TypeScript. Is there a standard approach for handling and preserving the cause of an Error in JavaScript/TypeScript? I aim to obtain a comprehensive stack trace when wrapping an E ...

A guide on defining optional class parameters in Angular 2 using Typescript

In Typescript, optional parameters are indicated by a question mark. However, I have only found one way to instantiate the class using the new keyword. Interestingly, in Angular 2's "hero" tutorial, classes are not instantiated with the new keyword; ...

Refreshing the sub attributes of an incomplete entity

My Partial object contains sub-properties that may be undefined and need updating. interface Foo { data: string otherData: string } interface Bar { foo: Foo } interface Baz { bar: Bar } let a: Partial<Baz> = {} //... Goal: a.bar.foo ...

Is there a way to assign a function signature to every property within a class in typescript?

When I am structuring a class to contain all methods related to its functionality, I ensure that all the methods within the class have a specific signature. I attempted to utilize an index signature in this manner: interface rulesType { [key:string]: t ...

"Troubleshooting Problem with Closing Drawer Function in Material-UI Drawer

I have been implementing Material-UI in my React Project and am working on creating a component that will render a drawer with some additional components inside it. However, I am encountering several issues with the open drawer functionality. I initially t ...

Determine whether there is only one array in the object that contains values

At the moment, I am attempting to examine an array in order to determine if only one of its elements contains data. Consider this sample array: playersByGender = { mens: [], womens: [], other: [] }; Any combination of these elements may contain dat ...

Using TypeScript to work with JSON fields that include the '@' symbol

While working on an Angular project with TypeScript, I am facing a challenge of displaying certain JSON fields obtained from a POST request to the user. One of the fields begins with the '@' symbol, which is a reserved word in Angular causing th ...

Loop through the component name and route path in ReactJs to efficiently organize and structure your application

In my route file coding for ASP.NET, I am creating routes by fetching details from the backend. Successfully getting details like [Contacts, Pipelines, Stages]. import * as React from 'react'; import { BrowserRouter, Redirect, Route } from &apos ...

Incorrect function assignment

I am encountering an issue in non-strict mode. Below is my code where I seem to be able to assign a function with an incorrect type to a typed variable. Am I making a mistake? Thank you. interface A { f1( ) : void; } interface B extends A { f2( ...

Can classes from an external package be imported into an Angular library within an Angular app using Openlayers?

I am currently developing an Angular library that configures an OpenLayers map as an Angular component. The component is functioning properly, but I need to access classes and constants from a package imported by the library, specifically OpenLayers. To w ...

Typescript Regular Expression Issue: filter function is not returning any matches

Currently, I am developing an Ecommerce API and working on a class specifically for search queries. My approach involves using regex and typescript with node.js. Although I have based my project on a JavaScript node project, I am encountering an issue wher ...

Add an additional boolean attribute called `_ro` as a suffix to a property

Is it possible to add an additional property using a property decorator? The current approach I am taking seems to be incorrect. const RoProp = () => { return <T>(target: T, memberName: keyof T) => { const roPropName = `${String(memberNa ...

The map function in Math.min returns NaN when there is a 0 in the collection

I'm currently troubleshooting a code snippet that involves determining the minimum and maximum values within a collection. Everything was functioning well until I added 0 values to the collection, which caused the function to return NaN. The function ...

Utilize the identical function within the reducer for numerous mat-slide-toggle and checkboxes in component.html

I'm currently diving into the world of Angular and ngrx while tackling a project focused on enabling users to create forms. In this project, users can add various form elements (such as labels, text fields, dropdown menus, checkboxes, etc.) from a sid ...

Error: JSON encountered circular structure when attempting to serialize an object of type 'ClientRequest' with a property 'socket' that references an object of type 'Socket'

Encountering an error while attempting to make a POST request to my TypeORM API using axios: TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -&g ...

Error: Unable to locate specified column in Angular Material table

I don't understand why I am encountering this error in my code: ERROR Error: Could not find column with id "continent". I thought I had added the display column part correctly, so I'm unsure why this error is happening. <div class="exa ...

Retrieve information from an array based on matching IDs

I'm currently facing a challenge in finding the right solution to my issue. I am struggling to come up with the correct answer at this moment. In my scenario, I have two arrays of objects that I need to filter based on category IDs and extract data f ...

The new update of React Native version 0.64.0 is facing issues with updating the bundle in iOS devices

Can anyone lend a hand with React Native? I've hit a roadblock since updating to RN 0.64.0. Everything seems to be working fine, except for the hot reload feature. RN doesn't seem to recognize changes, even though the Metro bundler starts up suc ...