Day20 :【TypeScript 学起来】是 JavaScript 没有的 Function Overloads(函式超载)

终於20天了，那个心情就是有点开心快结束了，但对後面10篇感到担忧，既期待又怕无法完赛 XDD

好啦，讲完废话，今天要来讲 Function Overloads， 接触到这个功能觉得 cool， JavaScript 绝对不能这麽做， 因为会有 hoisting 现象。让我们看下去～

若有错误，欢迎留言指教，感恩的心。

Function Overloads 函式超载

函式超载指的是扩充一个函式可以被执行的形式。简单来说就是针对同一个 function 提供多个不同的 type definition。可以使用相同的 function 名称，定义不同的参数数量或型别创建多种方法。

Function Overload 会包含两个部分：

• overload signatures：也就是 type definition 的部分， 通常会定义2种或以上。
• function implementation：实际上执行的 function，它的型别需要满足所有的 overload signatures。

例子1:

如下面例子， padding function (设定 css 的 padding)你要传入的参数， 有可能是1 个，2 个或 4 个， 我们就可以使用 Function Overloads 来进行约束。像这个例子如果不小心带入 3 个参数则会提醒 No overload expects 3 arguments。

// overload signatures 定义
function padding(all: number): object;
function padding(topAndBottom: number, leftAndRight: number): object;
function padding(top: number, right: number, bottom: number, left: number): object;

// function implementation 实际执行的function
function padding(a: number, b?: number, c?: number, d?: number) {
  if (b === undefined && c === undefined && d === undefined) {
    b = c = d = a;
  } else if (c === undefined && d === undefined) {
    c = a;
    d = b;
  }
  return {
    top: a,
    right: b,
    bottom: c,
    left: d
  };
}

padding(1); // ok: all
padding(1, 1); // ok: topAndBottom, leftAndRight
padding(1, 1, 1, 1); // ok: top, right, bottom, left
padding(1, 1, 1); // Error: No overload expects 3 arguments, but overloads do exist that expect either 2 or 4 

以这个例子， 我们可以看到 compiler 会标记有 +2 overloads，他会自动侦测到你在使用 function overloads，蛮 cool 的。

例子2:

//overload signatures
function makeDate(timestamp: number): Date;
function makeDate(m: number, d: number, y: number): Date;

//function implementation
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
  if (d !== undefined && y !== undefined) {
    return new Date(y, mOrTimestamp, d);
  } else {
    return new Date(mOrTimestamp);
  }
}
const d1 = makeDate(12345678); //ok
const d2 = makeDate(5, 5, 5); //ok
const d3 = makeDate(1, 3); //error: No overload expects 2 arguments, but overloads do exist that expect either 1 or 3 arguments.

使用上要注意的地方

1. 要至少2个或以上的 overload signatures

❌ 以下范例， 他预期不带参数执行 fn(); 会印出 "hello"，但结果报错，因为只有定义会带入x: string，会带入1个参数，结果没有带入参数所以报错提醒。

function fn(x: string): void;
function fn() {
   console.log("hello");
}
fn(); //error: Expected 1 arguments, but got 0.

✅ 再加入无参数的 overload signatures 即可。

function fn(x: string): void;
function fn(): void;
function fn() {
  console.log("hello");
}
fn();

2. 实际执行函式带入的参数型别要兼容 overload signatures 的型别

❌ 在实际执行函式带入的参数型别只有 boolean, 第二个 overload signatures 的参数型别为string， 就与执行函式参数无法兼容。

//overload signatures 
function fn(x: boolean): void;

function fn(x: string): void; //error:This overload signature is not compatible with its implementation signature. 

//function implementation 执行函式
function fn(x: boolean) {
    console.log("hello");
}

✅ 如果要兼容的话， 就使用联合型别 union type 即可。

function fn(x: boolean): void;
function fn(x: string): void;

function fn(x: boolean | string) {
  console.log("hello");
}

fn(""); //"hello"

下一篇要来笔记 Generic 泛型， 明天见！

参考资料

https://www.typescriptlang.org/docs/handbook/2/functions.html#function-overloads

https://pjchender.dev/typescript/ts-functions/#function-overload%E5%87%BD%E5%BC%8F%E8%B6%85%E8%BC%89

https://basarat.gitbook.io/typescript/type-system/functions#overloading