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