javascript - 覆盖 d3 TypeScript 定义文件

Question

我有以下变量声明

const xScale = d3
      .scaleLinear()
      .range([0, width - margin])
      .domain(
        d3.extent(wave, function(d) {
          return d[0];
        })
      );

wave 接收一个由数字组成的数组，例如

如果我将 d 参数键入为

//
        d3.extent(wave, function(d:number[][]) {
          return d[0];
        })
//

它会返回这个错误

TS2769: No overload matches this call.   Overload 1 of 4, '(array: ArrayLike, accessor: (datum: number[][], index: number, array: ArrayLike) => string | null | undefined): [string, string] | [undefined, undefined]', gave the following error.     Argument of type '(d: number[][]) => number[]' is not assignable to parameter of type '(datum: number[][], index: number, array: ArrayLike) => string | null | undefined'.       Type 'number[]' is not assignable to type 'string'.   Overload 2 of 4, '(array: ArrayLike, accessor: (datum: number[][], index: number, array: ArrayLike) => Numeric | null | undefined): [undefined, undefined] | [Numeric, Numeric]', gave the following error.     Argument of type '(d: number[][]) => number[]' is not assignable to parameter of type '(datum: number[][], index: number, array: ArrayLike) => Numeric | null | undefined'.       Type 'number[]' is not assignable to type 'Numeric'.         Types of property 'valueOf' are incompatible.           Type '() => Object' is not assignable to type '() => number'.             Type 'Object' is not assignable to type 'number'.

如果我不输入例如

//
        d3.extent(wave, function(d:number[][]) {
          return d[0];
        })
//

我会得到这个错误

TS2345: Argument of type '[string, string] | [undefined, undefined]' is not assignable to parameter of type '(number | { valueOf(): number; })[]'.   Type '[string, string]' is not assignable to type '(number | { valueOf(): number; })[]'.     Type 'string' is not assignable to type 'number | { valueOf(): number; }'.

查看 d3 定义文件，它期望一些不同的东西，我没有提供，但它对我有用:

export function extent(array: ArrayLike): [string, string] | [undefined, undefined];

关于如何克服这些错误并正确输入的任何提示？非常感谢。

Answer 1

The second parameter of extent is an "accessor" ，这与 array.map 采用的参数相同。 d3 的当前类型过于严格:它们需要 (datum: T, index: number) 作为访问器参数类型，但 index 是可选的。

要使当前代码进行类型检查，请将 function(d) 更改为 function(d, i)，即使 i 未使用。

一个更正确的解决方案是 fork 明确类型的存储库，并通过在参数名称的末尾添加 ? 使 index 参数在类型中可选。例如，对于一个重载:

export function extent<T>(array: T[], accessor: (datum: T, index?: number) => number): [number, number];

然后您可以使用分支中的类型并向上游提交补丁，这在 this answer 中有详细说明。 .