Typescript stuck when compiling file that use immutable.js Map typing

Question

I have angular2 app and i'm using immutable.js. When i use user Map function from immutable typescript compiler gets stuck. When i don't import the typing from immutable.js it works fine but i get errors for every function that i use from `immutable.js.

import {Map} from 'immutable';

this is the line that blocks typescript.

Beatific

Blocks? What's the actual error message? – Chalutz

No error msg. Simply typescript is stuck and i have to use ctrl + c to shut it down – Beatific

@VadimMacagon if i remove the typings from tsd.d.ts the compiler doesn't block but i get syntax errors for every function/class that i use from immutable.js – Beatific

Answer 1

The Map from immutable.js may conflict with TypeScript's internal Map. To resolve the collision, you can try something like import {Map} as MyMap from 'immutable' and use MyMap in your code.

You could also use import * as Immutable from 'immutable' and access features in the Immutable namespace.

Merl

i tried it like this import {Map as MyMap} from 'immutable' and its not working. Also crashes with using namespace. It is working when i import function that isn't Map – Beatific

Don't put as MyMap in the curly braces. What happens if you use import * as Immutable from 'immutable' and access Immutable.Map? – Merl

If i don't put as MyMap in the curly braces i get syntax error if i use import * as Immutable from 'immutable' typescript compiler still blocks – Beatific

I just went to the immutable.js page (facebook.github.io/immutable-js) and they provide a TypeScript example that imports code with import Immutable = require('immutable'); and then accesses Immutable.Map. Does this work for you? – Merl

Still fails to run :( – Beatific

Same issue, does not help me either – Zollie

@Lex It's working for me. If you still have the problem with the latest stable TypeScript (3.0.1), then maybe you could try building TypeScript from source (clone github.com/Microsoft/TypeScript, npm install, jake local) and running it under the debugger (node --inspect-brk built/local/tsc.js ...) to get a stack trace. If others are successful in reproducing the problem you see, then one of us can file an issue. – Forge

Does indeed work now. I messed up on interpreting Map in the VSCode info as i imported it as ImmutableMap in File A and created a Type that was used in FIle B, where VSCOde called it map, plus methods on this Map didn't return what i did expect, but that was because reading immutable.js Docs 4 rc 9 Docs for immuable.js 3.8 in my App ... – Zollie

Answer 2

I have use immutable version 3.8.2 and it 's woring correcly with typescript.

import {Map} from 'immutable';

const map1 = Map( {a: 1, b: 4, c: 3 })
const map2 = map1.set('b', 2)

stackblitz typescript demo

Import map function like this import {Map} from 'immutable'; will conflict with javascript ES2015 Map so you cant use both of theme to solve this you can use another variable or alias to hold immutable map function like this

import {Map as _map} from 'immutable';

const map1 = _map( {a: 1, b: 4, c: 3 })
const map2 = map1.set('b', 2)

you can import entire immutable module mean all immutable function like this

import * as immutable from 'immutable';

const map1 = immutable.Map( {a: 1, b: 4, c: 3 })
const map2 = map1.set('b', 2)

Panfish