typescript - 使用可选重载时的剩余参数

Question

当重载函数时，我有时会使用以下模式:

export function foo(a: string): void;
export function foo(b: number): void;
export function foo(a: string, b: number): void;
export function foo(...args: [string] | [number] | [string, number]): void {
    /* ... */
}

这使得很容易确定使用了哪个原型(prototype)，例如如果 args.length === 2 则 args 已知为 [string, number]。对于更复杂的类型(考虑一下如果您有两个接口(interface)而不是 string 和 number)，这可以简化很多。

但是，使用可选参数时我无法使其工作:

export function foo(a?: string): void;
//              ~~~ error TS2394: This overload signature is not compatible with its implementation signature.
export function foo(...args: [] | [string]): void {
    return;
}

我知道我可以简单地添加另一个重载而不使用可选参数，但组合很快就会变得难以管理。

export function foo(): void;
export function foo(a: string): void;
export function foo(...args: [] | [string]): void {
    return;
}

更具体的例子是:

interface Foo {
  /* ... */
}

interface Bar {
  /* ... */
}

interface Baz {
  /* ... */
}

function awesomeFunction(foo?: Foo, bar?: Bar): void;
function awesomeFunction(baz: Baz, foo?: Foo, bar?: Bar): void;
function awesomeFunction(...args:
  | [Foo | undefined, Bar | undefined]
  | [Baz, Foo | undefined, Bar | undefined]
): void {
  /* ... */
}

因为我知道如果 args[0] 是 Baz 我也会知道 args 中的其余元素。但是，它不能像上面所示的 foo 函数一样工作。

输入所有排列会变成很多变体，并将每个参数输入为 arg1?: Foo | Baz，arg2:Foo | Bar, arg3: Bar 意味着我必须对不可能的变体进行类型检查。

有办法解决这个问题吗？

Answer 1

本质上有一个 direct equivalence between function parameter lists and tuple types 。特别是optional function parameters就像 (x?: string) => void 对应于 optional tuple elements就像 [string?] (或者，当您使用 tuple element labels 时，[x?: string])。

这意味着你可以写你的 overload像这样的实现:

function foo(a?: string): void;
function foo(...args: [string?]): void {
}

function awesomeFunction(foo?: Foo, bar?: Bar): void;
function awesomeFunction(baz: Baz, foo?: Foo, bar?: Bar): void;
function awesomeFunction(...args: [Foo?, Bar?] | [Baz, Foo?, Bar?]): void {
}

事实上，如果所有调用签名的返回类型都相同，您甚至不需要重载:

function bar(...args: [a?: string]): void { }
// bar(a?: string | undefined): void

当你调用一个接受剩余元组并集的函数时，它看起来像一个重载函数:

function awesomeFunction(...args:
  [foo?: Foo, bar?: Bar] | [baz: Baz, foo?: Foo, bar?: Bar]
): void { }
// 1/2 awesomeFunction(foo?: Foo | undefined, bar?: Bar | undefined): void
// 2/2 awesomeFunction(baz: Baz, foo?: Foo | undefined, bar?: Bar | undefined): void

虽然可以说 [string?] 和 [string] | 之间存在关系。 []，当可选元组元素可用时，尝试强制编译器查看它可能没有意义。

Playground link to code