前言

雖然 JS/TS 支持面向?qū)ο缶幊蹋蟛糠謺r(shí)候還是在寫(xiě)函數(shù)。函數(shù)是一等公民。本文介紹下如何在 TypeScript 中使用函數(shù)，包括：

• 函數(shù)類(lèi)型聲明
• 函數(shù)參數(shù)類(lèi)型：可選參數(shù)、默認(rèn)參數(shù)、剩余參數(shù)
• 函數(shù)返回值類(lèi)型
• this 類(lèi)型
• 函數(shù)重載

函數(shù)類(lèi)型

面試中經(jīng)常會(huì)被問(wèn)到，JS 中有哪幾種數(shù)據(jù)類(lèi)型。其中就會(huì)有函數(shù)類(lèi)型。

JS 中的函數(shù)類(lèi)型很模糊，準(zhǔn)確來(lái)說(shuō)，僅有類(lèi)型的概念，卻無(wú)類(lèi)型的實(shí)質(zhì)。好在有了 TS 強(qiáng)類(lèi)型的加持，現(xiàn)在可以好好定義一個(gè)函數(shù)的類(lèi)型了。

聲明一個(gè)函數(shù)類(lèi)型，有若干種不同的方式。比如通過(guò) interface 定義函數(shù)類(lèi)型，通過(guò) type 聲明函數(shù)類(lèi)型別名，在類(lèi)聲明中聲明函數(shù)類(lèi)型等等。

但核心就一點(diǎn)，只關(guān)注函數(shù)參數(shù)的類(lèi)型和返回值的類(lèi)型。

下面就從函數(shù)的聲明入手，來(lái)看看函數(shù)類(lèi)型的使用。

函數(shù)的聲明方式

有三種最簡(jiǎn)單的函數(shù)聲明方式。

使用 function 關(guān)鍵字進(jìn)行聲明：

function add(a: number, b: number): number {
  return a + b
}

通過(guò)函數(shù)表達(dá)式進(jìn)行聲明：

let add = function (a: number, b: number): number {
  return a + b
}

或者使用箭頭函數(shù)：

let add =  (a: number, b: number): number => {  
    return a + b
}

上面這三種聲明函數(shù)的方式和 JS 中聲明函數(shù)別無(wú)二致，就是多了兩點(diǎn)：

• 函數(shù)參數(shù)需要給明類(lèi)型
• 函數(shù)返回值也需要給出類(lèi)型

那么函數(shù)類(lèi)型到底在哪里呢？把鼠標(biāo)移動(dòng)到函數(shù)名字上就能看到了：

和聲明普通變量變量一樣：

let name = 'kunwu'

如果沒(méi)有使用類(lèi)型注解，那么編譯器會(huì)自動(dòng)推導(dǎo)出類(lèi)型來(lái)。上面紅框標(biāo)識(shí)出來(lái)的類(lèi)型，就是編譯器推導(dǎo)出來(lái)的。

函數(shù)的類(lèi)型注解

函數(shù)的類(lèi)型形如 (參數(shù):類(lèi)型) => 類(lèi)型，所以函數(shù)的類(lèi)型注解就是：

let add: (a: number, b: number) => number = function (a, b) {
  return a + b
}

通常函數(shù)的類(lèi)型都比較長(zhǎng)，此時(shí)可以使用 type 類(lèi)型別名，來(lái)聲明一個(gè)標(biāo)識(shí)符表示該類(lèi)型：

type Add = (a: number, b: number) => number
let add: Add => number = function (a, b) {
  return a + b
}

這樣，聲明函數(shù)類(lèi)型，使用函數(shù)類(lèi)型，看上去就很簡(jiǎn)潔直觀了。

對(duì)象中的函數(shù)類(lèi)型

函數(shù)的參數(shù)

聲明函數(shù)時(shí)，可以使用類(lèi)型注解聲明參數(shù)類(lèi)型。如果不指定類(lèi)型，默認(rèn)類(lèi)型是 any。

function add (a: number, b: number) :number {
    return a + b
}

可選參數(shù)

可選參數(shù)使用 ? 標(biāo)記，需要放到固定參數(shù)的后面：

const fn = (a: number, b?:number) => {
    if(b) {
        return a + b
    } else {
        return a
    }
}

可選參數(shù)意味著參數(shù)可傳可不傳。通過(guò)編譯器的類(lèi)型推導(dǎo)，可以看到好像可選參數(shù)等同于一個(gè)聯(lián)合類(lèi)型：

但其實(shí)并不等同。

可選參數(shù)表示參數(shù)可傳可不傳，若傳則必須是指定的類(lèi)型。

而直接將參數(shù)類(lèi)型聲明為 string|undefined，意味著這是個(gè)必傳參數(shù)，必須傳實(shí)參。

參數(shù)默認(rèn)值

參數(shù)的默認(rèn)值，在參數(shù)的類(lèi)型后面使用 = 聲明：

const fn = (a: number, b: number = 10): number => {
    return a + b
}

剩余參數(shù)

剩余參數(shù)是 ES6 中的一個(gè)特性，使用剩余運(yùn)算符 ... 來(lái)獲取函數(shù)實(shí)參中未被形參聲明的變量，其取得的值是一個(gè)數(shù)組，比如：

function add(a,b, ...args) {
    console.log(args)
}
add(1,2,3,4,5)

則剩余參數(shù) args 就等于 [3, 4, 5]。

TS 中剩余參數(shù)也要有類(lèi)型聲明，需要將其聲明為數(shù)組類(lèi)型或者元組類(lèi)型。

function add(a: number, b: number, ...args: number[]) {
    console.log(c)
}

剩余參數(shù)和其他的固定參數(shù)不同。其他的固定參數(shù)聲明了類(lèi)型，則必須傳該類(lèi)型的值。而剩余參數(shù)雖然也聲明了類(lèi)型，但可傳可不傳，可傳一個(gè)，可傳多個(gè)，比如：

function add(a: number, b: number, ...args: number[]) {
    console.log(args)
}
add(1, 2) // [ ]
add(1, 2, 3) // [ 3 ]
add(1, 2, 3, 4) // [ 3, 4 ]

還可以將剩余參數(shù)類(lèi)型聲明為元組類(lèi)型，元組中還可以繼續(xù)使用可選參數(shù)，在參數(shù)后使用 ? 表示：

function log( ...args: [string, number, boolean?]) {
    console.log(args)
}
log('Shinichi', 17) // [ 'Shinichi', 17 ]
log('Zoro', 19, true) // [ 'Zoro', 19, true ]

函數(shù)的返回值類(lèi)型

函數(shù)的返回值類(lèi)型可以通過(guò)類(lèi)型注解指定。如果不指定的話，TS 編譯器能夠根據(jù)函數(shù)體的 return 語(yǔ)句自動(dòng)推斷出返回值類(lèi)型，因此我們也可以省略返回值類(lèi)型。

TS 基本類(lèi)型中有一個(gè) void 類(lèi)型，表示空類(lèi)型，它唯一的用處就是用作函數(shù)的返回值類(lèi)型。當(dāng)一個(gè)函數(shù)沒(méi)有 return 語(yǔ)句時(shí)，

如果函數(shù)使用 return 語(yǔ)句返回了 undefined 值，則返回值類(lèi)型就為 undefined 而不是 void 了：

但是此時(shí)可以將返回值類(lèi)型使用類(lèi)型注解指定為 void：

this 類(lèi)型

JS 函數(shù)中到處可見(jiàn) this 的身影。關(guān)于 this 的指向也是前端八股中的基礎(chǔ)之基礎(chǔ)。

默認(rèn)情況下 TS 編譯器會(huì)將函數(shù)中的 this 設(shè)為 any 類(lèi)型，也就是說(shuō)編譯器不會(huì)對(duì) this 做類(lèi)型檢查，就可以任意使用 this，比如：

function fn() {
    this.name = 'Naruto'
    this.age = 18
}

同時(shí) TS 編譯器又提供了一個(gè)編譯選項(xiàng) --noImplicitThis，開(kāi)啟后會(huì)檢查 this 的類(lèi)型，此時(shí)需要明確指定其類(lèi)型，否則會(huì)報(bào)錯(cuò)，如下：

那么如何為 this 聲明類(lèi)型呢？

聲明 this 類(lèi)型

TS 函數(shù)中有一個(gè)特殊的 this 參數(shù)，它用來(lái)指定該函數(shù)中用到的 this 的類(lèi)型，需要定義在形參的第一個(gè)位置。

還是上面的例子，要為函數(shù)中的 this 指定類(lèi)型的話，這樣寫(xiě)：

function fn(this: {name: string, age: number}) { 
  this.name = 'Naruto'
  this.xxx = 'xxx'
}

直接在函數(shù)參數(shù)列表中聲明 this 類(lèi)型不太優(yōu)雅，可以使用 type 關(guān)鍵字聲明別名再使用：

type Person = {name: string, age: number}
function fn(this: Person) { 
  this.name = 'Naruto'
  this.age = 18
}

當(dāng)定義了 this 類(lèi)型后，函數(shù)在調(diào)用時(shí)也會(huì)有所不同，需要使用 call、apply ：

type Person = {name: string, age: number}
function fn(this: Person, a: number) { 
  this.name = 'Naruto'
  this.age = 18
}
fn.call({name: 'Naruto', age: 18}, 10)
fn.apply({name: 'Naruto', age: 18}, [10])

像以前那樣直接調(diào)用函數(shù)是錯(cuò)誤的：

fn(10) // X

函數(shù)重載

面向?qū)ο缶幊逃腥筇卣?，封裝、繼承和多態(tài)。多態(tài)的表現(xiàn)之一就是函數(shù)的重載。

函數(shù)重載，就是可以多次聲明一個(gè)同名函數(shù)，但是它們的參數(shù)類(lèi)型不同或者參數(shù)個(gè)數(shù)不同。這樣在調(diào)用時(shí)，可以根據(jù)傳入?yún)?shù)類(lèi)型的不同，參數(shù)個(gè)數(shù)的不同，來(lái)確定執(zhí)行的到底是哪一個(gè)函數(shù)。

函數(shù)重載是后端語(yǔ)言的概念，比如 java 中：

// 兩個(gè)整數(shù)的和
public static int add(int a, int b)  {
  return a+b;
}
// 三個(gè)整數(shù)的和
public static int add(int a, int b, int c) {
 return add(a,b)+c;
}

JS 本身并不支持函數(shù)重載。如果多次聲明一個(gè)函數(shù)，則后聲明的會(huì)覆蓋掉先聲明的。但是 JS 可以利用 arguments 對(duì)象，再加上判斷實(shí)參的類(lèi)型，來(lái)模擬重載的功能，比如：

function add() {
   let args = Array.from(arguments)
   if(args.length == 2) {
       return args[0] + args[1]
   } else if(args.length == 3) {
        return args[0] + args[1] + args[3]
   }
}
add(1,2)
add(1, 2, 3)

TS 中多次聲明一個(gè)同名函數(shù)，編譯器會(huì)報(bào)錯(cuò)。但是 TS 提供了實(shí)現(xiàn)函數(shù)重載的方法：先通過(guò) function 關(guān)鍵字聲明重載的類(lèi)型，最后寫(xiě)函數(shù)的實(shí)現(xiàn)。

function add(a: number, b: number) : number
function add(a: string, b: string) : string
function add(a: number|string, b: number | string) {
  if(typeof a === 'number' && typeof b === 'number') {
    return a + b
  }  else if(typeof a === 'string' && typeof b === 'string') {
    return a + b
  } 
}
add(1, 2)
add('10', '20')

由于在聲明重載時(shí)已經(jīng)確定了函數(shù)的返回值類(lèi)型，在寫(xiě)函數(shù)實(shí)現(xiàn)時(shí)，就不再需要寫(xiě)返回值類(lèi)型了。編譯器會(huì)根據(jù)重載類(lèi)型自動(dòng)推導(dǎo)。

TS 的函數(shù)重載只是一種偽重載，最終還是要靠去判斷類(lèi)型，來(lái)執(zhí)行不同的邏輯。

還有一點(diǎn)要注意，聲明函數(shù)重載和函數(shù)實(shí)現(xiàn)必須寫(xiě)在一塊，中間不能插入其他語(yǔ)句。

總結(jié)

本文介紹了TS 中有關(guān)函數(shù)的知識(shí)，包括函數(shù)的聲明方式，如何聲明函數(shù)類(lèi)型，函數(shù)參數(shù)和返回值的類(lèi)型，函數(shù)重載以及 this 的類(lèi)型。大部分內(nèi)容和 JS 中差不太多，主要是 this 類(lèi)型和函數(shù)重載這兩點(diǎn)，需要額外關(guān)注下。

以上就是如何在TypeScript中使用函數(shù)的詳細(xì)內(nèi)容，更多關(guān)于TypeScript 函數(shù)使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論