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

Can one assess a private method within a class?

Encountered an npm ERR while executing the React project

Tips for incorporating an unordered list inside a list item

Minimizing the gap between icon and label text

Is there a way to dynamically update a game's highscore from a database without having to refresh the page?

What is the best method for disabling autoscroll for a specific div id when the :target attribute

Error in Typescript: Unable to locate module with proper type declarations

The Bootstrap modal form fails to properly handle the POST method when sending data to the server

What is the best way to terminate a "for await ...of" loop if it fails to finish within a specified timeframe?

Rendering a Subarray using Map in ReactJS

Guide on utilizing a variable as a property in the `indexOf` function within a `map` function

Challenges arising from the rendering of main.js in Vue.js

Parsing of the module has failed due to the presence of an unexpected character '' while attempting to import a video file

How to access the template html in Angular 8 (or 9) before compilation

Challenges arise when integrating ng-model with Angular Chosen

A difference in the way content is displayed on Firefox compared to Chrome, Edge, and Safari

Embracing Typescript promises over jQuery deferred for improved code efficiency and reliability

The functionality of the System JS map is not functioning properly

Is it practical to extract the page type/name from the CSS of the selected tab?

In Vue, applying CSS styles to D3's SVG elements may not work as expected when using the scoped attribute