Typescript中的d3-tip库

Question

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?

Answer 1

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;
    }
}

Answer 2

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.

Answer 3

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.