
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
函式多載- 維基百科,自由的百科全書