1.函數(shù)定義

1.1JavaScript中的函數(shù)

在學(xué)習(xí)TypeScript中的函數(shù)前我們先來(lái)回顧一下JavaScript中的函數(shù)定義常用的包含以下幾種：

第一種：使用function關(guān)鍵字聲明函數(shù)

function add1 (x, y) {
    return x + y
}

第二種：使用字面量方式聲明函數(shù)

const add2 = function (x, y) {
    return x + y
}

第三種：使用箭頭函數(shù)聲明函數(shù)

const add3 = (x, y) => {
    return x + y
}

1.2TypeScript中的函數(shù)

TS中的函數(shù)聲明方式與JS類似，唯一不同的就是固定了參數(shù)類型了返回值類型，如果沒(méi)有返回值其返回值類型必須為void而不是留空。

接下來(lái)用 TS 的方式重新聲明以上是三個(gè)函數(shù)：

第一種：使用function關(guān)鍵字聲明函數(shù)：

/*
 語(yǔ)法結(jié)構(gòu)如下
 function 函數(shù)名(形參1: 類型, 形參2: 類型,...): 返回值類型 {
     函數(shù)體
 }
 */
function add4(x: number, y: number): number {
    return x + y
}

第二種：使用字面量方式聲明函數(shù)

/*
 語(yǔ)法結(jié)構(gòu)如下
 const 函數(shù)名 = function (形參1: 類型, 形參2: 類型,...): 返回值類型 {
     函數(shù)體
 }
 */
const add5 = function (x: number, y: number): number {
    return x + y
}

第三種：使用箭頭函數(shù)聲明函數(shù)

/*
 語(yǔ)法結(jié)構(gòu)如下
 const 函數(shù)名 = (形參1: 類型, 形參2: 類型,...): 返回值類型  => {
     函數(shù)體
 }
 */
// 3. 使用箭頭函數(shù)聲明函數(shù)
const add6 = (x: number, y: number): number => {
    return x + y
}

以上就是在TS中聲明函數(shù)的方式。JS中還有一種參數(shù)解耦賦值的情況，這種在TS中怎么指定參數(shù)類型呢？示例代碼如下：

const add7 = ({ x, y }: { x: number; y: number }): number => {
    return x + y
}

在TS中還有一種可讀性更高的寫(xiě)法，如下所示：

const add8: (baseValue: number, increment: number) => number = function (
    x: number,
    y: number
): number {
    return x + y
}

這種方式將函數(shù)分為兩個(gè)部分，=前面是函數(shù)的類型的返回值類型，后半部分才是函數(shù)定義的地方。

其實(shí)前半部分也就是為了增加代碼的可讀性，沒(méi)有太大的實(shí)際意義。

2.可選參數(shù)和默認(rèn)參數(shù)

TypeScript 里的每個(gè)函數(shù)都是必須。這并不代表不能傳遞null和undefined作為參數(shù)，而是是否為每個(gè)參數(shù)都傳遞了值，如果不一一對(duì)應(yīng)，則會(huì)拋出異常。簡(jiǎn)單的說(shuō)就是形參個(gè)數(shù)與實(shí)參個(gè)數(shù)一致。

示例代碼如下所示：

function add(x: number, y: number): number {
    return x + y
}
let result1 = add(1) //  Expected 2 arguments, but got 1.
let result2 = add(1, 2)
let result3 = add(1, 2, 3) //  Expected 2 arguments, but got 3

在JS中每個(gè)參數(shù)都是可選的，可傳遞也可不傳遞，如果不傳遞的時(shí)候，它將是默認(rèn)的undefined 。

在TS中也是可以實(shí)現(xiàn)的，我們只需要在參數(shù)名后面添加 ?即可實(shí)現(xiàn)可選參數(shù) 的功能。

如下代碼：

// 實(shí)現(xiàn)可選參數(shù)功能
// 參數(shù)名旁加一個(gè)?即可
function add(x: number, y?: number): number {
  return x + y
}
let result1 = add(1)
let result2 = add(1, 2)
// let result3 = add(1, 2, 3) //  Expected 2 arguments, but got 3

如上代碼就實(shí)現(xiàn)了可選參數(shù)

在TS中實(shí)現(xiàn)默認(rèn)參數(shù)與JS實(shí)現(xiàn)默認(rèn)參數(shù)是相同的，只需要為其賦值即可。

示例代碼如下所示：

;(function () {
  function add(x: number, y: number = 2): number {
    return x + y
  }
  let result1 = add(1) // 3
  let result2 = add(1, 2) // 3
})()

當(dāng)然，如果不為y指定類型就與JS中一樣一樣了。

3.剩余參數(shù)

所謂的剩余參數(shù)就是函數(shù)定義時(shí)需要傳遞兩個(gè)參數(shù)，而函數(shù)調(diào)用時(shí)傳遞了3個(gè)參數(shù)；此時(shí)就多余出一個(gè)參數(shù)，該參數(shù)就是剩余參數(shù)。

在 JS 中我們可以使用arguments來(lái)訪問(wèn)多余傳遞的參數(shù)。那在TS中怎么訪問(wèn)剩余參數(shù)呢？

實(shí)際上TS中可以將所有的參數(shù)存儲(chǔ)在一個(gè)變量中，該變量實(shí)際上一個(gè)解耦的一個(gè)數(shù)組。

示例代碼如下：

function fun(x: number, ...numbers: number[]): void {
    console.log(numbers)
}
fun(1, 2, 3, 4) // [ 2, 3, 4 ]

到此這篇關(guān)于TypeScript中的函數(shù)的文章就介紹到這了,更多相關(guān)TypeScript函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論