选择 Typescript、D3.js 函数重载和 return 类型

Question

我目前正在使用 d3.js、React 和 Typescript，在理解手动指定函数重载和消除未定义 return 值的可能性的最佳方法时遇到了一些困难。

在下面的示例中，我试图利用范围和 return 使用具有以下类型的访问器函数的 [Date, Date]。

xAccessor: (datum: Window, index: number, array: Iterable<Window>) => Date

用法示例：

const xScale = d3.scaleTime()
    .domain(d3.extent<Iterable<Window>, Iterable<Date>>(data, xAccessor))
    .range([0, dimensions.boundedWidth])

问题是我收到这条错误消息

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

我相信这是因为 DefinitelyTyped d3 包具有以下定义。

export function extent<T, U extends Numeric>(
    iterable: Iterable<T>,
    accessor: (datum: T, index: number, array: Iterable<T>) => U | undefined | null
): [U, U] | [undefined, undefined];

请注意 Window 类型不允许未定义的日期。

export interface Window {
    ts: Date;
    high: number;
    low: number;
    open: number;
    close: number;
    volume: number;
}

const dateAccessor = (d: Window) => d.ts

我已经看到像下面这样的其他答案，您检查未定义并指定默认值，但我不确定如何做到这一点并且仍然利用由 props 传递给 child组件。

在使用作为 props 的一部分传入的访问器时，是否有正确的方法来强制特定重载并消除未定义结果的可能性？

Answer 1

我用类似的代码遇到过类似的问题，我是这样解决的：

interface Entry {
  time: Date
}

x.domain(d3.extent(entries, (e: Entry): Date => e.time) as [Date, Date])

在你的情况下，我假设这样的事情应该有效：

const xScale = d3.scaleTime()
    .domain(d3.extent<Iterable<Window>, Iterable<Date>>(data, xAccessor) as [Date, Date])
    .range([0, dimensions.boundedWidth])

选择 Typescript、D3.js 函数重载和 return 类型

Selecting Typescript, D3.js function overload and return type

javascript

d3.js

typescript

reactjs