TypeScript 和 d3 域类型答案

【问题标题】：TypeScript and d3 domain typeTypeScript 和 d3 域类型
【发布时间】：2016-10-19 07:48:06
【问题描述】：

当我想使用域时，我遇到了问题。

所以，我尝试使用我的代码的下一部分

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

我收到有关域错误类型的错误...

“Scale”类型的参数不能分配给“Scale”类型的参数。

属性“域”的类型不兼容。

键入'{ (): 日期[]; （日期：数字[]）：比例；（日期：Date[]）：比例； }' 不可分配给类型 '{ (): number[]; （值：数字[]）：比例； }'。

类型 'Date[]' 不能分配给类型 'number[]'。 “日期”类型不能分配给“数字”类型。

但是如果我们看一下 d3 分型

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

域可以带日期数组！

如果我们禁用类型，那么一切正常。

我的代码的另一部分也有类似的问题：

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

我收到以下错误：

“事件 | 类型”上不存在属性“源事件” BaseEvent'。

但是如果我们查看类型

export var event: Event | BaseEvent;

和

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

我使用打字：

“d3”：“注册表：dt/d3#0.0.0+20160614091820”

以及用于 webpack 的 awesome-typescript-loader

那么，我怎么了？

【问题讨论】：

标签： d3.js typescript

【解决方案1】：

您打算使用 D3 v4 还是 D3 v3？

您发布的代码 sn-ps 似乎暗示了 D3 v3。与杰克所说的一致。

假设您使用的是 TypeScript 2，则有当前可用的 D3 版本 4 定义。

他引用的repo已经完全迁移到DefintitelyTyped（目前是types-2.0分支），我们主要用它来协同开发，而生态还在不断变化中……

现在要按模块获取定义，只需使用 npm install @types/d3-selection --save（或 --save-dev 如果您不发布供第三方使用）

截至昨天，npm install @types/d3 --save 还将为您提供与标准 D3 捆绑包相对应的定义。

在发布过程中存在一些技术债务，从 DefinitiveTyped 到 npm @types，因为我们不想破坏仍然需要旧版 D3 v3.5 定义的库。现在已解决。

安装相关定义后，您只需对相应的 D3 模块（或 d3 标准包）使用 TypeScript/ES6 导入语句。

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

或类似的。您还可以创建自己的 TypeScript 模块以捆绑为模块的子集，如果这样更方便您查看我对https://stackoverflow.com/questions/40314024/typescript-d3-v4-import-not-working的回答@

情况略有不同，如果您想在带有 global

的 vanilla 脚本中使用定义

如果这是您的用例，请告诉我，我可以添加更多信息。

【讨论】：

PS：特定于使用d3-drag，如果您查看definitions and shape test file for v4，有大量文档，包括泛型，我介绍了用于提高 DOM 元素和 Datum 类型的类型安全性涉及。 v3 和 v4 一开始就存在差异。希望这会有所帮助

【解决方案2】：

这发生在我昨天使用Typescript 2.0 和最新的@types/d3-drag。

我认为这只是打字的问题，请在此处查看更新：https://github.com/tomwanzek/d3-v4-definitelytyped/issues

我的创可贴：

let drag:any = d3.behavior.drag()...

【讨论】：