詳解 TypeScript 函數(shù)聲明和重載
在 JavaScript 中，函數(shù)是構(gòu)建應(yīng)用的一塊基石，我們可以使用函數(shù)抽離可復(fù)用的邏輯、抽象模型、封裝過程。在TypeScript中，函數(shù)仍然是最基本、最重要的概念之一。下面就來看看TypeScript中的函數(shù)類型是如何定義和使用的。
一、函數(shù)類型定義
1. 直接定義
函數(shù)類型的定義包括對參數(shù)和返回值的類型定義：
- function add(arg1: number, arg2: number): number {
- return x + y;
- }
- const add = (arg1: number, arg2: number): number => {
- return x + y;
- };
這里用function字面量和箭頭函數(shù)兩種形式定義了add函數(shù)。函數(shù)參數(shù) arg1 和 arg2 都是數(shù)值類型，最后通過相加得到的結(jié)果也是數(shù)值類型。
如果在這里省略參數(shù)的類型，TypeScript 會默認(rèn)這個參數(shù)是 any 類型;如果省略返回值的類型，如果函數(shù)無返回值，那么 TypeScript 會默認(rèn)函數(shù)返回值是 void 類型;如果函數(shù)有返回值，那么 TypeScript 會根據(jù)定義的邏輯推斷出返回類型。
需要注意，在TypeScript中，如果函數(shù)沒有返回值，并且我們顯式的定義了這個函數(shù)的返回值類型為 undefined，那就會報錯：A function whose declared type is neither 'void' nor 'any' must return a value。正確的做法就是上面說的，將函數(shù)的返回值類型聲明為void：
- function fn(x: number): void {
- console.log(x)
- }
一個函數(shù)的定義包括函數(shù)名、參數(shù)、邏輯和返回值。為函數(shù)定義類型時，完整的定義應(yīng)該包括參數(shù)類型和返回值類型。上面都是在定義函數(shù)的指定參數(shù)類型和返回值類型。下面來定義一個完整的函數(shù)類型，以及用這個函數(shù)類型來規(guī)定一個函數(shù)定義時參數(shù)和返回值需要符合的類型。
- let add: (x: number, y: number) => number;
- add = (arg1: number, arg2: number): number => arg1 + arg2;
- add = (arg1: string, arg2: string): string => arg1 + arg2; // error
這里定義了一個變量 add，給它指定了函數(shù)類型，也就是(x: number, y: number) => number，這個函數(shù)類型包含參數(shù)和返回值的類型。然后給 add 賦了一個實際的函數(shù)，這個函數(shù)參數(shù)類型和返回類型都和函數(shù)類型中定義的一致，所以可以賦值。后面又給它賦了一個新函數(shù)，而這個函數(shù)的參數(shù)類型和返回值類型都是 string 類型，這時就會報如下錯誤：
- 不能將類型"(arg1: string, arg2: string) => string"分配給類型"(x: number, y: number) => number"。
- 參數(shù)"arg1"和"x" 的類型不兼容。
- 不能將類型"number"分配給類型"string"。
注意： 函數(shù)中如果使用了函數(shù)體之外定義的變量，這個變量的類型是不體現(xiàn)在函數(shù)類型定義的。
2. 接口定義
使用接口可以清晰地定義函數(shù)類型。下面來使用接口為add函數(shù)定義函數(shù)類型：
- interface Add {
- (x: number, y: number): number;
- }
- let add: Add = (arg1: string, arg2: string): string => arg1 + arg2;
- // error 不能將類型“(arg1: string, arg2: string) => string”分配給類型“Add”
通過接口形式定義了函數(shù)類型，這個接口Add定義了這個結(jié)構(gòu)是一個函數(shù)，兩個參數(shù)類型都是number類型，返回值也是number類型。當(dāng)指定變量add類型為Add時，再要給add賦值，就必須是一個函數(shù)，且參數(shù)類型和返回值類型都要滿足接口Add，顯然這個函數(shù)并不滿足條件，所以報錯了。
3. 類型別名定義
可以使用類型別名來定義函數(shù)類型，這種形式更加直觀易讀：
- type Add = (x: number, y: number) => number;
- let add: Add = (arg1: string, arg2: string): string => arg1 + arg2;
- // error 不能將類型“(arg1: string, arg2: string) => string”分配給類型“Add”
使用type關(guān)鍵字可以給任何定義的類型起一個別名。上面定義了 Add 這個別名后，Add就成為了一個和(x: number, y: number) => number一致的類型定義。上面定義了Add類型，指定add類型為Add，但是給add賦的值并不滿足Add類型要求，所以報錯了。
注意，這里的=>與 ES6 中箭頭函數(shù)的=>不同。TypeScript 函數(shù)類型中的=>用來表示函數(shù)的定義，其左側(cè)是函數(shù)的參數(shù)類型，右側(cè)是函數(shù)的返回值類型;而 ES6 中的=>是函數(shù)的實現(xiàn)。
二、函數(shù)參數(shù)定義
1. 可選參數(shù)
TypeScript 會在編寫代碼時就檢查出調(diào)用函數(shù)時參數(shù)中存在的一些錯誤：
- type Add = (x: number, y: number) => number;
- let add: Add = (arg1, arg2) => arg1 + arg2;
- add(1, 2); // success
- add(1, 2, 3); // error 應(yīng)有 2 個參數(shù)，但獲得 3 個
- add(1); // error 應(yīng)有 2 個參數(shù)，但獲得 1 個
在JavaScript中，上面代碼中后面兩個函數(shù)調(diào)用都不會報錯, 只不過add(1, 2, 3)可以返回正確結(jié)果3，add(1)會返回NaN。而在TypeScript中我們設(shè)置了指定的參數(shù)，那么在使用該類型時，傳入的參數(shù)必須與定義的參數(shù)類型和數(shù)量一致。
但有時候，函數(shù)有些參數(shù)不是必須的，我們就可以將函數(shù)的參數(shù)設(shè)置為可選參數(shù)。可選參數(shù)只需在參數(shù)名后跟隨一個?即可：
- type Add = (x: number, y: number, z?: number) => number;
- let add: Add = (arg1, arg2, arg3) => arg1 + arg2 + arg3;
- add(1, 2); // success 3
- add(1, 2, 3); // success 6
上面的代碼中，z是一個可選參數(shù)，那他的類型就是number | undefined，表示參數(shù) z 就是可缺省的，那是不是意味著可缺省和類型是 undefined 等價呢?來看下面的例子：
- function log(x?: number) {
- console.log(x);
- }
- function log1(x: number | undefined) {
- console.log(x);
- }
- log();
- log(undefined);
- log1(); // Expected 1 arguments, but got 0
- log1(undefined);
可以看到，第三次函數(shù)調(diào)用報錯了，這里的 ?: 表示在調(diào)用函數(shù)時可以不顯式的傳入?yún)?shù)。但是，如果聲明了參數(shù)類型為 number | undefined，就表示函數(shù)參數(shù)是不可缺省且類型必須是 number 或者 undfined。
需要注意，可選參數(shù)必須放在必選參數(shù)后面，這和在 JS 中定義函數(shù)是一致的。來看例子：
- type Add = (x?: number, y: number) => number; // error 必選參數(shù)不能位于可選參數(shù)后。
在TypeScript中，可選參數(shù)必須放到最后，上面把可選參數(shù)x放到了必選參數(shù)y前面，所以報錯了。在 JavaScript 中是沒有可選參數(shù)這個概念的，只不過在編寫邏輯時，可能會判斷某個參數(shù)是否為undefined，如果是則說明調(diào)用該函數(shù)的時候沒有傳這個參數(shù)，要做下兼容處理;而如果幾個參數(shù)中，前面的參數(shù)是可不傳的，后面的參數(shù)是需要傳的，就需要在該可不傳的參數(shù)位置傳入一個 undefined 占位才行。
2. 默認(rèn)參數(shù)
在 ES6 標(biāo)準(zhǔn)出來之前，默認(rèn)參數(shù)實現(xiàn)起來比較繁瑣：
- var count = 0;
- function counter(step) {
- step = step || 1;
- count += step;
- }
上面定義了一個計數(shù)器增值函數(shù)，這個函數(shù)有一個參數(shù) step，即每次增加的步長，如果不傳入?yún)?shù)，那么 step 接受到的就是 undefined，undefined 轉(zhuǎn)換為布爾值是 false，所以 step || 1 這里取了 1，從而達到了不傳參數(shù)默認(rèn) step === 1 的效果。
在 ES6 中，定義函數(shù)時給參數(shù)設(shè)默認(rèn)值直接在參數(shù)后面使用等號連接默認(rèn)值即可：
- const count = 0;
- const counter = (step = 1) => {
- count += step;
- };
當(dāng)為參數(shù)指定了默認(rèn)參數(shù)時，TypeScript 會識別默認(rèn)參數(shù)的類型;當(dāng)調(diào)用函數(shù)時，如果給這個帶默認(rèn)值的參數(shù)傳了別的類型的參數(shù)則會報錯：
- const add = (x: number, y = 2) => {
- return x + y;
- };
- add(1, "ts"); // error 類型"string"的參數(shù)不能賦給類型"number"的參數(shù)
當(dāng)然也可以顯式地給默認(rèn)參數(shù) y 設(shè)置類型：
- const add = (x: number, y: number = 2) => {
- return x + y;
- };
注意：函數(shù)的默認(rèn)參數(shù)類型必須是參數(shù)類型的子類型，如下代碼：
- const add = (x: number, y: number | string = 2) => {
- return x + y;
- };
這里 add 函數(shù)參數(shù) y 的類型為可選的聯(lián)合類型 number | string，但是因為默認(rèn)參數(shù)數(shù)字類型是聯(lián)合類型 number | string 的子類型，所以 TypeScript 也會檢查通過。
3. 剩余參數(shù)
在 JavaScript 中，如果定義一個函數(shù)，這個函數(shù)可以輸入任意個數(shù)的參數(shù)，那么就無法在定義參數(shù)列表的時候挨個定義。在 ES6 發(fā)布之前，需要用 arguments 來獲取參數(shù)列表。arguments 是一個類數(shù)組對象，它包含在函數(shù)調(diào)用時傳入函數(shù)的所有實際參數(shù)，它還包含一個 length 屬性，表示參數(shù)個數(shù)。下面來模擬實現(xiàn)函數(shù)的重載：
- handleData() {
- if (arguments.length === 1) return arguments[0] * 2;
- else if (arguments.length === 2) return arguments[0] * arguments[1];
- else return Array.prototype.slice.apply(arguments).join("_");
- }
- handleData(2); // 4
- handleData(2, 3); // 6
- handleData(1, 2, 3, 4, 5); // '1_2_3_4_5'
這段代碼如果在TypeScript環(huán)境中執(zhí)行，三次handleData的調(diào)用都會報錯，因為handleData函數(shù)定義的時候沒有參數(shù)。
在 ES6 中，加入了…拓展運算符，它可以將一個函數(shù)或?qū)ο筮M行拆解。它還支持用在函數(shù)的參數(shù)列表中，用來處理任意數(shù)量的參數(shù)：
- const handleData = (arg1, ...args) => {
- console.log(args);
- };
- handleData(1, 2, 3, 4, 5); // [ 2, 3, 4, 5 ]
在 TypeScript 中可以為剩余參數(shù)指定類型：
- const handleData = (arg1: number, ...args: number[]) => {
- };
- handleData(1, "a"); // error 類型"string"的參數(shù)不能賦給類型"number"的參數(shù)
三、函數(shù)重載
在多數(shù)的函數(shù)中，是只能接受一組固定的參數(shù)。但是一些函數(shù)可以接收可變數(shù)量的參數(shù)、不同類型的參數(shù)，甚至可以根據(jù)調(diào)用函數(shù)的方式來返回不同類型的參數(shù)。要使用此類函數(shù)，TypeScript我們提供了函數(shù)重載功能。下面來看看函數(shù)重載是如何工作的。
1. 函數(shù)簽名
先來看一個簡單的例子：
- function greet(person: string): string {
- return `Hello, ${person}!`;
- }
- greet('World'); // 'Hello, World!'
這里的greet方法接收一個參數(shù)name，類型為string。那如果想讓greet方法來接收一組名稱怎么辦?那這時greet函數(shù)會接收字符串或字符串?dāng)?shù)組作為參數(shù)，并返回字符串或字符串?dāng)?shù)組。那該如何改造這個函數(shù)?主要有兩種方式：通過判斷參數(shù)類型來修改函數(shù)簽名
- function greet(person: string | string[]): string | string[] {
- if (typeof person === 'string') {
- return `Hello, ${person}!`;
- } else if (Array.isArray(person)) {
- return person.map(name => `Hello, ${name}!`);
- }
- throw new Error('error');
- }
- greet('World'); // 'Hello, World!'
- greet(['TS', 'JS']); // ['Hello, TS!', 'Hello, JS!']
這是最簡單直接的方式，但是在某些情況下，我們希望單獨定義調(diào)用函數(shù)的方式，這時就可以使用函數(shù)重載。
2. 函數(shù)重載
當(dāng)修改函數(shù)簽名的方式比較復(fù)雜或者涉及到多種數(shù)據(jù)類型時，建議使用函數(shù)重載來完成。在函數(shù)重載中，我們需要定義重載簽名和實現(xiàn)簽名。重載函數(shù)簽名只定義函數(shù)的參數(shù)和返回值類型，并不會定義函數(shù)的正文。對于一個函數(shù)不同的調(diào)用方式，就可以有多個重載簽名。
下面來實現(xiàn)greet()函數(shù)的重載：
- // 重載簽名
- function greet(person: string): string;
- function greet(persons: string[]): string[];
- // 實現(xiàn)簽名
- function greet(person: unknown): unknown {
- if (typeof person === 'string') {
- return `Hello, ${person}!`;
- } else if (Array.isArray(person)) {
- return person.map(name => `Hello, ${name}!`);
- }
- throw new Error('error');
- }
這里greet()函數(shù)有兩個重載簽名和一個實現(xiàn)簽名。每個重載簽名都描述了調(diào)用函數(shù)的一種方式。我們可以使用字符串參數(shù)或使用字符串參數(shù)數(shù)組來調(diào)用greet()函數(shù)。
現(xiàn)在就可以使用字符串或字符串?dāng)?shù)組的參數(shù)調(diào)用greet())：
- greet('World'); // 'Hello, World!'
- greet(['TS', 'JS']); // ['Hello, TS!', 'Hello, JS!']
在定義函數(shù)重載時，需要注意以下兩點：
(1)函數(shù)簽名是可以調(diào)用的
雖然上面我們定義了重載簽名和簽名方法，但是簽名實現(xiàn)時不能直接調(diào)用的，只有重載簽名可以調(diào)用：
- const someValue: unknown = 'Unknown';
- greet(someValue);
這樣調(diào)用的話就會報錯：
- No overload matches this call.
- Overload 1 of 2, '(person: string): string', gave the following error.
- Argument of type 'unknown' is not assignable to parameter of type 'string'.
- Overload 2 of 2, '(persons: string[]): string[]', gave the following error.
- Argument of type 'unknown' is not assignable to parameter of type 'string[]'
也就是說，即使簽名實現(xiàn)接收unknown類型的參數(shù)，但是我們不能直接給greet()方法來傳遞unknown類型的參數(shù)，參數(shù)只能是函數(shù)重載簽名中定義的參數(shù)類型。
(2)實現(xiàn)簽名必須是通用的
在實現(xiàn)簽名時，定義的數(shù)據(jù)類型需要是通用的，以包含重載簽名。假如我們把greet()方法的返回值類型定義為string，這時就會出問題了：
- function greet(person: string): string;
- function greet(persons: string[]): string[];
- function greet(person: unknown): string {
- // ...
- throw new Error('error');
- }
此時string[]類型就會和string不兼容。所以，實現(xiàn)簽名的返回類型和參數(shù)類型都要包含所有重載簽名中的參數(shù)類型和返回值類型，保證是通用的。
3. 方法重載
除了常規(guī)函數(shù)外，類中的方法也可以過載，比如用重載方法greet()來實現(xiàn)一個類：
- class Greeter {
- message: string;
- constructor(message: string) {
- this.message = message;
- }
- greet(person: string): string;
- greet(persons: string[]): string[];
- greet(person: unknown): unknown {
- if (typeof person === 'string') {
- return `${this.message}, ${person}!`;
- } else if (Array.isArray(person)) {
- return person.map(name => `${this.message}, ${name}!`);
- }
- throw new Error('error');
- }
- }
Greeter類中包含了greet()重載方法：這里面有兩個描述如何調(diào)用方法的重載簽名，以及包含其實現(xiàn)簽名。這樣我們就可以通過兩種方式調(diào)用hi.greet()：
- const hi = new Greeter('Hi');
- hi.greet('World'); // 'Hello, World!'
- hi.greet(['TS', 'JS']); // ['Hello, TS!', 'Hello, JS!']
