在axis.tickFormat（）中使用d3.timeFormat时出现TypeScript错误

Question

此代码可在JavaScript中使用：

var timeFormat = d3.timeFormat("%M:%S");
var yAxis = d3.axisLeft(y).tickFormat(timeFormat)

但是TypeScript中的此代码不起作用：

const yAxis = d3.axisLeft(y).tickFormat(d3.timeFormat("%M:%S"));

  

function timeFormat（specifier：string）：（date：Date）=>字符串返回   给定字符串说明符的新格式化程序。返回的函数   格式化指定的日期，并返回相应的字符串。

     

默认情况下locale.format（TimeLocaleObject.format）的别名   区域设置。

     

@param指示符-日期格式的指示符字符串。

错误是

  

'（date：Date）=>字符串'类型的参数不能分配给'null'类型的参数.ts（2345）

Answer 1

有一个更简单的现代解决方案

const yAxis = d3.axisLeft<Date>(y).tickFormat(d3.timeFormat("%M:%S"));

适用于 d3v4

Answer 2

传递给.tickFormat()的函数将传递第二个参数，该参数代表刻度标签的索引。该方法的type definition如下所示：

tickFormat(format: (domainValue: Domain, index: number) => string): this;

另一方面，d3.timeFormat()中的type definition如下：

export function timeFormat(specifier: string): (date: Date) => string;

如您所见，这将返回一个将Date对象映射到字符串的函数。此函数没有第二个参数，因此没有错误。

要解决此问题，您可以显式强制转换d3.timeFormat()返回的函数的类型以匹配.tickFormat()期望的函数的类型。

.tickFormat(d3.timeFormat("%M:%S") as (dv: number | { valueOf(): number; }, i: number) => string)

这没有任何副作用，因为您可以安全地忽略未使用的第二个参数，同时仍然告诉编译器您知道自己在做什么。