TypeScript and d3 domain type

Question

I have a problem, when I want to use domain.

So, I try to use next part of my code

var x = d3.time.scale()
  .domain([new Date('2016-06-10'), new Date('2016-06-25')])
  .rangeRound([0, 1000]);

And I get error about error types for domain...

Argument of type 'Scale' is not assignable to parameter of type 'Scale'.

Types of property 'domain' are incompatible.

Type '{ (): Date[]; (dates: number[]): Scale; (dates: Date[]): Scale; }' is not assignable to type '{ (): number[]; (values: number[]): Scale; }'.

Type 'Date[]' is not assignable to type 'number[]'. Type 'Date' is not assignable to type 'number'.

But If we look d3 typings

domain(): Date[];
domain(dates: number[]): Scale<Range, Output>;
domain(dates: Date[]): Scale<Range, Output>;

domain can take Date array!

If we disable types, then all works fine.

And I have similar problem with another part of my code:

var drag = d3.behavior.drag()
  .on('drag', function (d) {
    d3.event.sourceEvent.stopPropagation();
  })
  .on('dragstart', function () {
    //
  });

I get error about:

Property 'sourceEvent' does not exist on type 'Event | BaseEvent'.

But If we look in types

export var event: Event | BaseEvent;

and

interface BaseEvent {
     type: string;
     sourceEvent?: Event;
 }

I use typings:

"d3": "registry:dt/d3#0.0.0+20160614091820"

and awesome-typescript-loader for webpack

So, what's wrong with me?

Answer 1

Is your intent to use D3 v4 or D3 v3?

The code snippets you posted seem to imply D3 v3. In line with what Jake said.

There are current D3 version 4 definitions available, assuming you are using TypeScript 2.

The repo he referenced has been completely migrated to DefintitelyTyped (currently types-2.0 branch), we had mostly used it for collaborative development, while the ecosystem was still in flux...

Now to get the definitions by module simply use npm install @types/d3-selection --save (or --save-dev if you do not publish for third party use)

As of yesterday, npm install @types/d3 --save will also get you definitions corresponding to the Standard D3 Bundle.

There was some technical debt in the publication process from DefinitelyTyped to npm @types as we did not want to break libraries that still needed the legacy D3 v3.5 definitions. This is now resolved.

Once you install the relevant definitions, you simple use TypeScript/ES6 import statements for the corresponding D3 modules (or the d3 standard bundle).

import { select, Selection } from 'd3-selection';
import * as d3Drag from 'd3-drag';

Or similar. You can also create your own TypeScript module to bundle as subset of the modules, if it makes it more convenient for you see my answer to https://stackoverflow.com/questions/40314024/typescript-d3-v4-import-not-working

Things are slightly different, if you want to use the definitions in a vanilla script with a global

If that is your use case let me know, and I can add more info.