TypeScript 筆記 – Function Overloading

Function Overloading 是某些物件導向程式語言支援的語法，最常見的有 C++, C#, Java 等等，而 TypeScript 也支援 Function Overloading 的功能。這篇就來簡單筆記一下 TypeScript 中使用 Function Overloading 的方式。

1. Function Overloading 簡介

Function Overloading 允許程式中有超過一個同名 function 接收不同數量或是型別的 parameter，且函數可以根據不同數量或型別的 parameters 來宣告。

也就是說假設有個 function 叫做 get_string ，支援 function overloading 的程式語言會允許 get_string 可以有 1 個、2 個甚至 3 個 parameters，且根據不同 parameter 數量，可以有不同的函數宣告。不過每個程式語言還是有些微的差異，可以理解成同名函數支援不同的 parameter 數量及型別就好。

2. Function Overloading 的種類

2.1 相同數量的 parameter，但不同型別

如果一個 function 有一樣的 parameter 數量，但 parameter 的型別不同，則可將該函數視為 function overloading

可以先看 C++ 的例子：

#include <iostream>
using namespace std;
 
// 先宣告 function 以及 parameter 的 type
int add_numbers(int, int);
double add_numbers(double, double);

// 根據不同的 parameter type 來宣告 function
int add_numbers(int a, int b) {
	return a + b;
}

double add_numbers(double a, double b) {
	return a + b;
}

int main() {
	cout << add_numbers(10, 20) << endl;
	cout << add_numbers(10.0, 20.0) << endl;
	return 0;
}

TypeScript 的寫法則稍微不同，在 TypeScript 中 Function Overloading 一樣需要先宣告 function 的 type，但在宣告部分只允許宣告一次，必須在該宣告裡面自行加一些 conditional statements 來判斷 parameter 的 type 或數量而執行不同的事情

function add(a: number, b: number): number
function add(a: string, b: string): string
function add(a: any, b: any): string | number {
  return a + b
}

console.log(add(1, 2))
// 3
console.log(add('Hello', ' World'))
// Hello World

再看另一個例子：

function len(s: string): number;
function len(arr: any[]): number;
function len(x: any) {
  return x.length;
}

2.2 不同數量的 parameter

如果一個 function 有不同數量的 parameter，則可視為 Function Overloading。

先看一下 C++ 的例子：

#include <iostream>
using namespace std;

// 先宣告 function 以及 parameter 的 type
void add(int, int);
void add(int, int, int);

// 根據不同的 parameter 的數量來宣告 function
void add(int a, int b)
{
cout << "sum = " << (a + b);
}

void add(int a, int b, int c)
{
	cout << endl << "sum = " << (a + b + c);
}

// Driver code
int main()
{
	add(10, 2);
	add(5, 6, 4);

	return 0;
}

TypeScript:

function add(a: number, b: number): number
function add(a: number, b: number, c: number): number
// 雖然 function overloading，但只能宣告一次，需要在 parameter 後面加上 ? 來表示這個 parameter 可能是 undefined
function add(a: number, b: number, c?: number) {
  if (c !== undefined) {
    return a + b + c
  }
  return a + b
}

console.log(add(1, 2))
// 3
console.log(add(1, 2, 3))
// 6
console.log(add(1))
// error TS2554: Expected 2-3 arguments, but got 1.

3. 結論

TypeScript 的 Function Overloading 和 C++ 不同的是：同名的 function 只能宣告一次，不能根據 parameter 的 type 不同或是數量不同而有不同的宣告，需要在唯一一個宣告裡判斷 parameter 的 type 以及可能 undefined 的 parameter 來做不同的事。

4. 參考資料

Function Overloading in C++ – GeeksforGeeks
Documentation – More on Functions
函式多載- 維基百科，自由的百科全書