Type-safe Immutable.js Records with TypeScript

Question

Type-safe Immutable.js Records with TypeScript

I'm struggling to find a suitable solution for my query. I am aiming to define data types using an interface in TypeScript, but my data consists of Immutable.js records making it more complex. Please refer to the example provided below.

interface tree extends Immutable.Map<string, any> {
  readonly id: number,
  readonly type: number
}

let trees = Immutable.List<tree[]>([
  Map<tree>({
     id: 101,
     type: 1
  }),
  Map<tree>({
     id: 201,
     type: 3
  })
])

The following questions arise:

Why is it necessary to repeat the type of each map in my list? Shouldn't the type be declared simply by <tree[]> when creating the list? And then any Map added to the list should be type checked against this?
In the current scenario, this example throws an error stating that "property 'id' is incompatible with index signature. Type 'number' is not assignable to type 'tree'. This makes sense! Nevertheless, despite going through the documentation, I am unable to figure out how to resolve this issue. The docs mention the requirement for an ID, but I want an array of maps - my signature here just includes standard array IDs, if I am not mistaken?

I have been grappling with this problem for days and am at a loss. It seems like this should be straightforward based on everything I've read.

Your assistance would be greatly appreciated.

javascript angular typescript immutable.js

Answer 1

Answer №1

When building a List that consists of arrays containing trees, which essentially extends from a Map, consider the following structure:

let trees = Immutable.List<tree[]>(
    [ // List
        [ // Array
            <tree>Immutable.Map<any>({
                id: 101,
                type: 1
            }),
            <tree>Immutable.Map<any>({
                id: 201,
                type: 3
            })
        ]
    ]
);

Addressing your queries:

You are not duplicating the type in each map. Instead, you are utilizing the Map method to construct a map from an object. The inclusion of <tree> casting is crucial since it pertains to an array of trees, not maps.

Your attempted approach involves:

var singleTree: tree = Immutable.Map<tree>(
    { id: 101, type: 1 }
);

However, your tree element constitutes a map of the any type. Therefore, the correct syntax would be:

let singleTree: tree = <tree>Immutable.Map<any>(
    { id: 101, type: 1 }
);

To streamline the code above and enforce a type check, introducing a tree function to encapsulate the Map function would be beneficial, resulting in the ultimate solution presented below:

function tree(obj: { [key: string]: any, id: number, type: number }): tree {
    return <tree>Immutable.Map<any>(obj);
}

let trees = Immutable.List<tree[]>(
    [ // List
        [ // Array
            tree({
                id: 101,
                type: 1
            }),
            tree({
                id: 201,
                type: 3
            })
        ]
    ]
);

Answer 2

When building a List that consists of arrays containing trees, which essentially extends from a Map, consider the following structure:

let trees = Immutable.List<tree[]>(
    [ // List
        [ // Array
            <tree>Immutable.Map<any>({
                id: 101,
                type: 1
            }),
            <tree>Immutable.Map<any>({
                id: 201,
                type: 3
            })
        ]
    ]
);

Addressing your queries:

You are not duplicating the type in each map. Instead, you are utilizing the Map method to construct a map from an object. The inclusion of <tree> casting is crucial since it pertains to an array of trees, not maps.

Your attempted approach involves:

var singleTree: tree = Immutable.Map<tree>(
    { id: 101, type: 1 }
);

However, your tree element constitutes a map of the any type. Therefore, the correct syntax would be:

let singleTree: tree = <tree>Immutable.Map<any>(
    { id: 101, type: 1 }
);

To streamline the code above and enforce a type check, introducing a tree function to encapsulate the Map function would be beneficial, resulting in the ultimate solution presented below:

function tree(obj: { [key: string]: any, id: number, type: number }): tree {
    return <tree>Immutable.Map<any>(obj);
}

let trees = Immutable.List<tree[]>(
    [ // List
        [ // Array
            tree({
                id: 101,
                type: 1
            }),
            tree({
                id: 201,
                type: 3
            })
        ]
    ]
);

Type-safe Immutable.js Records with TypeScript

Answer №1

Similar questions

JavaScript fails to function in an HTML file

Issue with styled-components not being exported

How can you programmatically toggle the visibility of a material table footer?

Enhance the connectivity of Angular js by activating the link function post transclusion

What's the best way to place the text or operator from a button into an input field?

Is it possible to integrate a collection of libraries along with external dependencies into Vite?

The function .val() is not a recognized method

The Angular web application utilizing an ASP.NET Web API that is hosted on AppHarbor is showing the incorrect webpage

Utilizing the Twitter API with Next.js to automate tweets even when the website is not actively engaged

I am facing difficulties when trying to map the data using react js/axios

Occasionally, adding items to an array through pushing may not be successful

Safari's Failure to Execute Ajax Requests

The Ajax form is failing to retrieve the expected PHP data

Error: Unable to call function onPopState from _platformLocation due to TypeError

Robotic Arm in Motion

Merge the values of checkboxes into a single variable

Unable to retrieve the iframe variable from the parent as it returns undefined

Unlocking new possibilities with Passport.js - sharing tokens across multiple servers

What is the best way to accurately parse a Date object within a TypeScript class when the HttpClient mapping is not working correctly?

Can child directives in Angular 2 harness the power of parent providers?