How to use ImmutableJS Map with TypeScript

Question

I have a tree structure that looks something like this:

interface TreeData {
  id : number;
  text : string;
  children : TreeData[];
}

I want to wrap this up into an Immutable Map but since I'm using TypeScript, I would like some type safety around using get and set. I found 2 articles online for suggestions on how one might be able to do this, see:

https://github.com/facebook/immutable-js/issues/683 https://blog.mayflower.de/6630-typescript-redux-immutablejs.html

However my problem is that my TreeData contains a list of TreeData children. If I define my ImmutableMap this way:

export interface ImmutableMap<T, K, V> extends Map<K, V> {
  get<I extends keyof T>( key : I & K ) : T[I] & V;
  set<S extends keyof T>( key : S & K, value : T[S] & V ) : Map<K, V>;
}

Then when I try to define the following, I get a typescript error message:

type ImmutableTreeData = ImmutableMap<TreeData, string, string | List<ImmutableTreeData>>;

[TS] Type alias ImmutableTreeData circularly references itself

How can I fix this TypeScript error?

Isn't having a set operation on a class called ImmutableMap counterintuitive? — Ian MacDonald
– Ian MacDonald, Commented Oct 15, 2018 at 20:30
ImmutableJs's Map.set function returns a new Map. See facebook.github.io/immutable-js/docs/#/Map/set — Marek Krzeminski
– Marek Krzeminski, Commented Oct 15, 2018 at 20:36
Sorry, I didn't mean to indicate that I thought you were wrong. I just think the naming is strange. — Ian MacDonald
– Ian MacDonald, Commented Oct 15, 2018 at 20:45
Does this answer your question? TypeScript | Immutable | proper way of extending Immutable.Map type — Pete Hayman
– Pete Hayman, Commented Jul 17, 2022 at 23:43

gpresland · Accepted Answer · 2019-10-18 16:04:58Z

4

import { Map } from "immutable";

export interface ITypedMap<T> extends Map<string, any> {
  get<K extends keyof T>(name: K): T[K];
}

export function TypedMap<T>(value: T): ITypedMap<T> {
  return Map(value) as ITypedMap<T>;
}

Usage:

const myMap = TypedMap(value);

References:

answered Oct 18, 2019 at 16:04

gpresland

1,8292 gold badges22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dawson B Over a year ago

I used this for a small simple case, but it does not work for any function besides .get. There must be a better solution somewhere out there, but I cannot find it.

alp ates · Accepted Answer · 2018-10-15 23:00:40Z

0

How about a record?

interface ITreeData {
  id: number;
  text: string;
  chilren?: ITreeData;
}

const defaultTreeData: ITreeData = {
  id: 0,
  text: "",
  chilren: undefined
};

class TreeData extends Record(defaultTreeData) {
  public static Init() {
    return new TreeData(defaultTreeData);
  }
}

const treeData = TreeData.Init().set("text", "ok");

const treeData2 = treeData.set("chilren", treeData);

console.log(treeData2);

answered Oct 15, 2018 at 23:00

alp ates

811 silver badge4 bronze badges

2 Comments

Marek Krzeminski Over a year ago

I didn't want to use records because of the reasons mentioned here: blog.mayflower.de/6630-typescript-redux-immutablejs.html

alp ates Over a year ago

I see your point. They really weaken the type safety. Note: New typings are now allowing of use recordInstance.user. if you need them.

Collectives™ on Stack Overflow

How to use ImmutableJS Map with TypeScript

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related