typescript - 使用 d3.scaleQuantile 创建色标时，类型 'string' 不可分配给类型 'number'

Question

我正在尝试复制此 d3 heatmap在 React 应用程序中(使用 TypeScript)。但是，下面的代码让我很头疼:

 const colorScale = d3.scaleQuantile()
     .domain([0, buckets - 1, d3.max(data, (d: any) => parseInt(d.value))])
     .range(colors);

colors有红色下划线，表示如下错误:

Type 'string' is not assignable to type 'number'

我想知道如何减轻这个问题。

Answer 1

根据使用的秤模块的版本，答案存在细微差别。无论如何，主要解决方案都不受此影响并且适用于所有版本。

D3 v4 捆绑

您链接到的示例使用 D3 v4 其中depends在 d3-scale 模块上 v1 .

如果您查看 type definitions对于 d3.scaleQuantile() 你会注意到有two definitions对于它的创作:

/**
 * Constructs a new quantile scale with an empty domain and an empty range.
 * The quantile scale is invalid until both a domain and range are specified.
 */
export function scaleQuantile(): ScaleQuantile<number>;

/**
 * Constructs a new quantile scale with an empty domain and an empty range.
 * The quantile scale is invalid until both a domain and range are specified.
 *
 * The generic corresponds to the data type of range elements.
 */
export function scaleQuantile<Range>(): ScaleQuantile<Range>;

因为您没有指定通用 Range type parameter编译器默认使用第一个定义来推断您的范围类型为 number因此，包含字符串的范围的错误。

不过，这可以通过明确指定刻度范围的类型来轻松解决，即 string :

 const colorScale = d3.scaleQuantile<string>()  // Specify the type of the scale's range: <string>.
     .domain([0, buckets - 1, d3.max(data, (d: any) => parseInt(d.value))])
     .range(colors);

D3 v5 捆绑

D3 v5 uses d3-scale 模块的第 2 版，仅对 scale 的 type definitions 进行了细微更改.

d3-scale 独立

为独立模块使用 d3-scale 的类型定义时要小心，因为它们是为模块的版本 2.1.2 创建的。在撰写本文时，最新的独立版本是 3.1.0，其中包含对 API 的重大更改!唉，该版本没有可用的类型定义。