CODEWITHSUNDEEP
javascriptd3.jstypescript
Chuanqi Sun
Chuanqi Sun

Reputation: 1382

d3-tip library in Typescript

I am a newbie to typescript and was trying to include d3-tip library (https://github.com/Caged/d3-tip) to my project. Normally, I would use

declare var [name_of_library]: any;

to let the compiler know the namespace, but d3-tip seems to be injected under the d3 namespace:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module with d3 as a dependency.
        define(['d3'], factory)
    } else {
        // Browser global.
        root.d3.tip = factory(root.d3)
    }
}(this, function (d3) {  
    ...

What is the correct way to use d3-tip in Typescript project?

Upvotes: 2

Views: 2619

Answers (3)

Denis Khay
Denis Khay

Reputation: 3900

For me such thing works with angular 4 (typescript 2.2, @types/d3:'^3.5.5' @types/d3-tip: '^3.5.5' "d3": "^3.5.5","d3-tip": "^0.7.1",)...

declare var d3:any;
import 'd3';
import * as d3tip from 'd3-tip';
d3.tip = d3tip;

I agree it is a bit strange.., but however it works.

Upvotes: 0

Joey
Joey

Reputation: 63

With the current structure of the d3.d.ts file (https://github.com/borisyankov/DefinitelyTyped/blob/master/d3/d3.d.ts), this is how you'd accomplish it now:

declare module d3 {
    export var tip: any;
}

The "correct" solution, however, is to write a full type definition file. The above is simply a quick way to silence the compiler.

Upvotes: 2

basarat
basarat

Reputation: 276105

Based on https://github.com/borisyankov/DefinitelyTyped/blob/master/d3/d3.d.ts you have 

declare var d3: D3.Base;

This means to add to d3 you simply add to D3.Base so: 

declare module D3 {
    export interface Base{
        tip: any;
    }
}

Upvotes: 3

Related Questions