无法将 d3-tip 导入 Typescript 类

Question

I am trying to import d3-tip into one of my typescript classes.

index.d.ts of d3-tip looks like the following

import { Primitive } from "d3";

declare module "d3" {
    type TooltipDirection = ("n" | "s" | "e" | "w" | "nw" | "ne" | "sw" | "se");
    interface Tooltip {
        hide(): Tooltip;
        show(): Tooltip;
        show<Datum>(data: Datum[]): Tooltip;
        show(target: SVGElement): Tooltip;
        show<Datum>(data: Datum[], target: SVGElement): Tooltip;
        attr(name: string): string;
        attr(name: string, value: Primitive): Tooltip;
        attr<Datum>(name: string, value: (datum: Datum, index: number, outerIndex: number) => Primitive): Tooltip;
        attr<Datum>(obj: { [key: string]: Primitive | ((datum: Datum, index: number, outerIndex: number) => Primitive) }): Tooltip;
        style(name: string): string;
        style(name: string, value: Primitive, priority?: string): Tooltip;
        style<Datum>(name: string, value: (datum: Datum, index: number, outerIndex: number) => Primitive, priority?: string): Tooltip;
        style<Datum>(obj: { [key: string]: Primitive | ((datum: Datum, index: number, outerIndex: number) => Primitive) }, priority?: string): Tooltip;
        offset(): [number, number];
        offset(tuple: [number, number]): Tooltip;
        offset<Datum>(func: (datum: Datum, index: number, outerIndex: number) => [number, number]): Tooltip;
        direction(): TooltipDirection;
        direction(direction: TooltipDirection): Tooltip;
        direction<Datum>(func: (datum: Datum, index: number, outerIndex: number) => TooltipDirection): Tooltip;
        html(): string;
        html(content: string): Tooltip;
        html<Datum>(func: (datum: Datum, index: number, outerIndex: number) => string): Tooltip;
        rootElement(): HTMLElement;
        rootElement(element: HTMLElement): Tooltip;
        rootElement<Datum>(func: (datum: Datum, index: number, outerIndex: number) => HTMLElement): Tooltip;
        destroy(): Tooltip;
    }
    export function tip(): Tooltip;
}

I have tried to import like this

import * as d3tip from 'd3-tip';

or like this

import tip from 'd3-tip';

but in neither case I am able to use the tip function.

Answer 1

You can try do it by this way:

import d3Tip from "d3-tip";
d3.tip = d3Tip;

Answer 2

Import, which works for me: I am using d3v5 and angular 8

import d3Tip from "d3-tip"; const tip = d3Tip();