Javascript 类型脚本中的类构造函数重载

这里的主要问题是，您的implementation构造函数将会疯狂，因为它在输入中搜索正确类型的属性.它本质上要求没有两个参数是相同类型的，否则就会有歧义.如果你有a: string, b: string个呢？来电者写的是new X("c")吗？哪个参数应设置为"c"？对于所编写的代码，实现可能如下所示

class PlaybackControl {
  static DEFAULT_PLAYBACK_RATES = [];
  static DEFAULT_SHORTCUTS = {};
  constructor(
    ...args: ???) {
    const a: (HTMLVideoElement | PlaybackRates | PlaybackControlOptions)[] = args;
    const videoPlayer = a.find((x): x is HTMLVideoElement =>
      x instanceof HTMLVideoElement);
    const playbrackRates = a.find((x): x is PlaybackRates =>
      Array.isArray(x) && x.every(e => typeof e === "string")
    ) ?? PlaybackControl.DEFAULT_PLAYBACK_RATES;
    const options: PlaybackControlOptions = a.find((x): x is PlaybackControlOptions =>
      x && typeof x === "object" && "enableShortcuts" in x
    ) ?? { enableShortcuts: true, shortcuts: PlaybackControl.DEFAULT_SHORTCUTS };
  }
}

这应该是你喜欢的工作和行为方式，但它太脆弱了.

无论如何，假设您确实想要这样一个实现，那么仍然存在如何实现它的问题.您说输入必须是videoPlayer: HTMLVideoElement, playbackRates: PlaybackRates, options: PlaybackControlOptions，其中一些可能会丢失，因此，例如，如果options和videoPlayer都存在，则不会传入videoPlayer之前的options.

您只需手动将构造函数设置为overload，即可接受所有可能的输入组合.但我喜欢处理类型，所以让我们编写一个Subsequence<T>实用程序类型，它接受输入tuple type T，并生成T的每个可能的subsequence的union.

则构造函数输入可以是:

type Subsequence<T extends any[]> =
  T extends [infer F, ...infer R] ? [F, ...Subsequence<R>] | Subsequence<R> : []

这给

type X = Subsequence<[videoPlayer: HTMLVideoElement, playbackRates: PlaybackRates, options: PlaybackControlOptions]>;
/* type X = [] | [PlaybackControlOptions] | [PlaybackRates] | [PlaybackRates, PlaybackControlOptions] | 
  [HTMLVideoElement] | [HTMLVideoElement, PlaybackControlOptions] | [HTMLVideoElement, PlaybackRates] | 
  [HTMLVideoElement, PlaybackRates, PlaybackControlOptions] */

因此，完整的构造函数如下所示

class PlaybackControl {
  static DEFAULT_PLAYBACK_RATES = [];
  static DEFAULT_SHORTCUTS = {};
  constructor(
    ...args: Subsequence<[videoPlayer: HTMLVideoElement, playbackRates: PlaybackRates, options: PlaybackControlOptions]>
  ) {
    const a: (HTMLVideoElement | PlaybackRates | PlaybackControlOptions)[] = args;
    const videoPlayer = a.find((x): x is HTMLVideoElement =>
      x instanceof HTMLVideoElement);
    const playbrackRates = a.find((x): x is PlaybackRates =>
      Array.isArray(x) && x.every(e => typeof e === "string")
    ) ?? PlaybackControl.DEFAULT_PLAYBACK_RATES;
    const options: PlaybackControlOptions = a.find((x): x is PlaybackControlOptions =>
      x && typeof x === "object" && "enableShortcuts" in x
    ) ?? { enableShortcuts: true, shortcuts: PlaybackControl.DEFAULT_SHORTCUTS };
  }
}

它的行为达到了预期的效果.

new PlaybackControl({ enableShortcuts: false })

但是，这值得吗？几乎可以肯定的是，不会.疯狂的实现加上疯狂的类型等于太疯狂了.完成这类操作的传统方法是接受一个类型为{videoPlayer?: HTMLVideoElement, playbackRates?: PlaybackRates, options?: PlaybackControlOptions}的对象输入，以利用JavaScript中的对象对属性顺序的自然无关性.歧义消失了(例如，{a?: string, b?: string}需要{a: "c"}或{b: "c"}，并且打字非常简单.因此，你应该转而这么做.

Playground link to code个