Angular2-Webpack-Typescript - 3rd party libraries

Question

I've started with a beautiful seed project: https://github.com/AngularClass/angular2-webpack-starter

And I've stuck with using 3rd-party modules.Can someone help/explain how to properly add/use external modules to this project?

For example, I'm adding 'immutable' using:

npm install immutable --save

After that, I'm trying to link that module inside a component:

import * as immutable from 'immutable';
import {List} from 'immutable';
import Immutable = require('immutable');

Nothing helps, it always returns TS2307: Cannot find module 'immutable'. The same for 'moment' for example.

score 2 · Accepted Answer · edited May 23 '17 at 12:09

2

There is a typings file you need to add to your project that is located in node_modules\immutable\dist\immutable.d.ts. You need to reference that in your project. It should look something like this:

/// <reference path="node_modules/immutable/dist/immutable.d.ts" />
import * as immutable from 'immutable';
import {List} from 'immutable';
import Immutable = require('immutable');

For moment there are typings available at DefinitelyTyped. I recommend using tsd to install them.

If you come across a library you would like to use that you can't find any typings for, you can see this question for an easy way to still use it. You just won't get any of the Typescript benefits.

edited May 23 '17 at 12:09

Community

1
1

answered Feb 25 '16 at 21:50

rgvassar

5,635
1
24
31

@Alexey Yes. You can it to the "files" section of your [tsconfig.json](https://github.com/Microsoft/TypeScript/wiki/tsconfig.json) file. If you're using the exclude syntax, just make sure it's not excluded. I also edited my answer to provide a link to the moment typings. – rgvassar Feb 25 '16 at 22:18
@rgvassar ...and if lib doesn't have typescript definitions? – deostroll Apr 13 '16 at 18:34
@deostroll The last part of my answer contains a link to another question, which addresses that exact situation. – rgvassar Apr 13 '16 at 18:52

score 1 · Answer 2 · answered Feb 25 '16 at 21:43

1

Edit: Add the below to your main.ts file.

import 'immutable'

This should give you access to the imputable api within all your components without the need for any additional importing.

answered Feb 25 '16 at 21:43

user2263572

5,435
5
35
57

1

Could you suggest algorithms of actions for libraries that doesn't include types? 'moment' for example? – Alexey Feb 25 '16 at 21:59

score 0 · Answer 3 · answered Aug 30 '16 at 13:55

Let me give a possible workaround for people who are using a third party (npm) javascript module for which there is no typings definition and want to get rid of the "cannot find module" error message

Suppose you use the npm package jsonapi-serializer and you reference it in your example.ts file:

import {Serializer, Deserializer} from "jsonapi-serializer";

@Injectable()
export class ExampleService {
  var deserializer = new Deserializer({ keyForAttribute: 'camelCase'});
}

The compiler will complain: Error:(1, 40) TS2307:Cannot find module 'jsonapi-serializer'.

You can declare the typings definition yourself by creating the following file: jsonapi-serializer.d.ts. You have to specify the main functions, but using the any type you can keep it relatively simple. (Consider donating the definition file if you create a complete definition):

declare module 'jsonapi-serializer' {

    export class Serializer {
        constructor(type: string, ...options: any[]);
        serialize(arg: any)
    }

    export  class Deserializer {
        constructor(...options: any[]);
        deserialize()
    }
}

If you place this file in your project the compiler will recognize the module. When this doesn't work you can also reference it from your ExampleService.ts file by placing the following line on top of the file:

///<reference path="jsonapi-serializer.d.ts"/>

Angular2-Webpack-Typescript - 3rd party libraries

3 Answers3

Linked