typescript - 了解 Typescript 定义

Question

来自@types/d3定义，我们有几行:

export type ValueFn<T extends BaseType, Datum, Result> = (this: T, datum: Datum, index: number, groups: T[] | ArrayLike<T>) => Result;

attrTween(name: string): ValueFn<GElement, Datum, (t: number) => string> | undefined;

当我使用函数 attrTween 时，我是这样使用它的:

caller.attrTween("points", (d, index, groups) => { return (t) => {return "";};  }

其中调用者是Transition<BaseType, PieArcDatum<number>

这些参数由 VSCode 推断为:

(parameter) d: d3.PieArcDatum<number>
(parameter) index: number
(parameter) groups: d3.BaseType[] | d3.ArrayLike<d3.BaseType>

类型定义如何强制执行此行为？能否逐字解释，尤其是Generic用法？

Answer 1

attrTween有three separate overloads ，其中第三个条目(并且只有具有非空第二个参数的双参数重载)是:

/**
 * Assign the attribute tween for the attribute with the specified name to the specified interpolator factory.
 * An interpolator factory is a function that returns an interpolator; when the transition starts, the factory is evaluated for each selected element.
 * The returned interpolator will then be invoked for each frame of the transition, in order,
 * being passed the eased time t, typically in the range [0, 1]. Lastly, the return value of the interpolator will be used to set the attribute value.
 * The interpolator must return a string.
 *
 * @param name Name of attribute.
 * @param factory An interpolator factory which is evaluated for each selected element, in order, being passed the current datum (d),
 * the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The interpolator factory returns a string interpolator,
 * which takes as its argument eased time t, typically in the range [0, 1] and returns the interpolated string.
 */
attrTween(name: string, factory: ValueFn<GElement, Datum, (t: number) => string>): this;

这比您列出的过载更符合您的要求。这个定义存在于Transition中，定义如下:

export interface Transition<GElement extends BaseType, Datum, PElement extends BaseType, PDatum>

有了这个，我们可以看到直接映射:

• d是Datum , 来自caller是d3.PieArcDatum<number>
• index是number
• groups是T[] | ArrayLike<T>其中 T extends BaseType .
  • 根据 attrTween的定义，T在ValueFn与GElement相同在Transition .
  • GElement是BaseType根据你的callee .
  • 因此T是BaseType , 所以 groups是d3.BaseType[] | d3.ArrayLike<d3.BaseType>如你所见。