TypeScript | Immutable | proper way of extending Immutable.Map type

Question

I have a react-redux application written in typescript with immutable package. There I have a data, which comes from api and in store I pack it to Map. In all application th

Answer 1

We used it like this in our project (slightly different approach):

interface ImmutableMap extends Map {
  get(name: K): T[K];
}

We used an older version of the Immutable.js typings that didn't used mapped types yet (T[K]). AFAIK typings are updated since then and there is no need to overwrite the get method.

EDIT: Actually the get method still is not fully type safe unlike the above. So overwriting the method still has its merits.

With the above declaration you can then create immutable maps like:

type AuthState = ImmutableMap<{
  user:string|null;
  loggedIn:boolean;
}>;

const authState:AuthState = fromJS({ user: 'Alice', loggedIn: true });

---

Ideally, you would like typings like this:

/**
 * Imaging these are typings for your favorite immutable
 * library. We used it to enhance typings of `immutable.js`
 * with the latest TypeScript features.
 */
declare function Immutable(o: T): Immutable;
interface Immutable {
  get(name: K): T[K];
  set(o: S): Immutable;
}

const alice = Immutable({ name: 'Alice', age: 29 });
alice.get('name');      // Ok, returns a `string`
alice.get('age');       // Ok, returns a `number`
alice.get('lastName');  // Error: Argument of type '"lastName"' is not assignable to parameter of type '"name" | "age"'.

const aliceSmith = alice.set({ lastName: 'Smith' });
aliceSmith.get('name');     // Ok, returns a `string`
aliceSmith.get('age');      // Ok, returns a `number`
aliceSmith.get('lastName'); // Ok, returns `string`

Link to the Playground

---

In order to achieve the above with Immutable.js you can create a small helper function, whose only purpose is to "fix" typings:

import { fromJS } from 'immutable';

interface Immutable {
  get(name: K): T[K];
  set(o: S): Immutable;
}

function createImmutable (o:T) {
  return fromJS(o) as Immutable;
}

Note that I used fromJS in the example. This will create a Map as long as the passed input is an Object. The benefit of using fromJS over Map is that the typings are easier to overwrite.

Side note: You might also want to look into Records.