Using typings definitions in Angular2 app

Question

I'm new to typescript and working on an Angular 2 app. I need to access some js libraries with type definitions available from definitelytyped. I installed the dependencies using typings. But can't figure out how to access them in my app components.

More specifically, say I install the angular-toastr library:

npm install angular-toastr  --save
typings install angular-toastr  --ambient --save

This installs the angular-toastr dependency to /typings/main/ambient/angular-toastr/angular-toastr.d.ts

I then added the reference to this to my main.d.ts file in the /typings folder.

/// <reference path="main/ambient/angular-toastr/angular-toastr.d.ts" />

After this, I try to reference it directly in my components, but haven't quite figured out how to.

Are there any other steps I missed? And how would I import it into a component and use the methods provided?

Thanks

You said it installed it to main/typings/... but you're referencing main/ambient/... Is there a reason for that? — rgvassar
My bad, I had typed the wrong path in the question. The dependency was installed under main/ambient/angular-toastr/angular-toastr.d.ts and I was referencing that correctly in my main.d.ts file. I've edited to fix the typo — Inn0vative1
Do you have a link to a project example? It might be because of your tsconfig.json file. — blakeembrey

Sanish Joseph Sanish Joseph · Accepted Answer · 2017-03-31T14:26:15

I was experimenting the same and I was able to add two type definition files and use it successfully. So let me share what I did.

Step 1: Install npm install typings --global Step 2: typings install dt~lodash --global --save or

use direct path from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/lodash/index.d.ts

to install.

Once installed, we need to refer the base reference file into out tsconfig.json file.

"files": [
        "typings/index.d.ts"
    ]

Now we can start using the third party libraries as,

import * as $ from 'jquery';
import * as _ from "lodash";

Add to any ts file where we need to use the librabry features.

And Result is,

Using typings definitions in Angular2 app

1 Answers