面試官：說說你對 TypeScript 中函數的理解？與 JavaScript 函數的區別？
本文轉載自微信公眾號「JS每日一題」，作者灰灰。轉載本文請聯系JS每日一題公眾號。
一、是什么
函數是JavaScript 應用程序的基礎，幫助我們實現抽象層、模擬類、信息隱藏和模塊
在TypeScript 里，雖然已經支持類、命名空間和模塊，但函數仍然是主要定義行為的方式，TypeScript 為 JavaScript 函數添加了額外的功能，豐富了更多的應用場景
函數類型在 TypeScript 類型系統中扮演著非常重要的角色，它們是可組合系統的核心構建塊
二、使用方式
跟javascript 定義函數十分相似，可以通過funciton 關鍵字、箭頭函數等形式去定義，例如下面一個簡單的加法函數：
- const add = (a: number, b: number) => a + b
上述只定義了函數的兩個參數類型，這個時候整個函數雖然沒有被顯式定義，但是實際上TypeScript 編譯器是能夠通過類型推斷到這個函數的類型，如下圖所示：
當鼠標放置在第三行add函數名的時候，會出現完整的函數定義類型，通過: 的形式來定義參數類型，通過 => 連接參數和返回值類型
當我們沒有提供函數實現的情況下，有兩種聲明函數類型的方式，如下所示：
- // 方式一
- type LongHand = {
- (a: number): number;
- };
- // 方式二
- type ShortHand = (a: number) => number;
當存在函數重載時，只能使用方式一的形式
可選參數
當函數的參數可能是不存在的，只需要在參數后面加上 ? 代表參數可能不存在，如下：
- const add = (a: number, b?: number) => a + (b ? b : 0)
這時候參數b可以是number類型或者undefined類型，即可以傳一個number類型或者不傳都可以
剩余類型
剩余參數與JavaScript的語法類似，需要用 ... 來表示剩余參數
如果剩余參數 rest 是一個由number類型組成的數組，則如下表示：
- const add = (a: number, ...rest: number[]) => rest.reduce(((a, b) => a + b), a)
函數重載
允許創建數項名稱相同但輸入輸出類型或個數不同的子程序，它可以簡單地稱為一個單獨功能可以執行多項任務的能力
關于typescript函數重載，必須要把精確的定義放在前面，最后函數實現時，需要使用 |操作符或者?操作符，把所有可能的輸入類型全部包含進去，用于具體實現
這里的函數重載也只是多個函數的聲明，具體的邏輯還需要自己去寫，typescript并不會真的將你的多個重名 function的函數體進行合并
例如我們有一個add函數，它可以接收 string類型的參數進行拼接，也可以接收 number 類型的參數進行相加，如下：
- // 上邊是聲明
- function add (arg1: string, arg2: string): string
- function add (arg1: number, arg2: number): number
- // 因為我們在下邊有具體函數的實現，所以這里并不需要添加 declare 關鍵字
- // 下邊是實現
- function add (arg1: string | number, arg2: string | number) {
- // 在實現上我們要注意嚴格判斷兩個參數的類型是否相等，而不能簡單的寫一個 arg1 + arg2
- if (typeof arg1 === 'string' && typeof arg2 === 'string') {
- return arg1 + arg2
- } else if (typeof arg1 === 'number' && typeof arg2 === 'number') {
- return arg1 + arg2
- }
- }
三、區別
從上面可以看到：
- 從定義的方式而言，typescript 聲明函數需要定義參數類型或者聲明返回值類型
- typescript 在參數中，添加可選參數供使用者選擇
- typescript 增添函數重載功能，使用者只需要通過查看函數聲明的方式，即可知道函數傳遞的參數個數以及類型
參考文獻
https://www.tslang.cn/docs/handbook/functions.html
https://zh.wikipedia.org/wiki/%E5%87%BD%E6%95%B0%E9%87%8D%E8%BD%BD
https://jkchao.github.io/typescript-book-chinese/typings/functions.html#%E9%87%8D%E8%BD%BD
