[[422246]]

本文轉(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)用場(chǎng)景

函數(shù)類型在 TypeScript 類型系統(tǒng)中扮演著非常重要的角色，它們是可組合系統(tǒng)的核心構(gòu)建塊

二、使用方式

跟javascript 定義函數(shù)十分相似，可以通過(guò)funciton 關(guān)鍵字、箭頭函數(shù)等形式去定義，例如下面一個(gè)簡(jiǎn)單的加法函數(shù)：

const add = (a: number, b: number) => a + b 

上述只定義了函數(shù)的兩個(gè)參數(shù)類型，這個(gè)時(shí)候整個(gè)函數(shù)雖然沒有被顯式定義，但是實(shí)際上TypeScript 編譯器是能夠通過(guò)類型推斷到這個(gè)函數(shù)的類型，如下圖所示：

當(dāng)鼠標(biāo)放置在第三行add函數(shù)名的時(shí)候，會(huì)出現(xiàn)完整的函數(shù)定義類型，通過(guò): 的形式來(lái)定義參數(shù)類型，通過(guò) => 連接參數(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的語(yǔ)法類似，需要用 ... 來(lái)表示剩余參數(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ù)不同的子程序，它可以簡(jiǎn)單地稱為一個(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)槲覀冊(cè)谙逻呌芯唧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ù)的類型是否相等，而不能簡(jiǎn)單的寫一個(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ù)重載功能，使用者只需要通過(guò)查看函數(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