在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) => string 返回给定字符串说明符的新格式化程序。返回的函数格式化指定的日期，返回相应的字符串。

默认语言环境中 locale.format (TimeLocaleObject.format) 的别名。

@param 说明符 — 日期格式的说明符字符串。

错误是

'(date: Date) => string' 类型的参数不能分配给 'null'.ts(2345) 类型的参数

Answer 1

传递给的函数传递.tickFormat()了第二个参数，表示刻度标签的索引。该方法的类型定义如下所示：

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

该类型定义的d3.timeFormat()，而另一方面，如下所示：

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)

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

Answer 2

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

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

适用于 d3v4