如何分析TypeScript中的函數(shù)

如何分析TypeScript中的函數(shù)，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

1.函數(shù)定義

1.1JavaScript中的函數(shù)

在學(xué)習(xí)TypeScript中的函數(shù)前我們先來回顧一下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ù)類型了返回值類型，如果沒有返回值其返回值類型必須為void而不是留空。

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

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

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

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

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

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

/*
 語法結(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中還有一種可讀性更高的寫法，如下所示：

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

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

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

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

TypeScript 里的每個(gè)函數(shù)都是必須。這并不代表不能傳遞null和undefined作為參數(shù)，而是是否為每個(gè)參數(shù)都傳遞了值，如果不一一對(duì)應(yīng)，則會(huì)拋出異常。簡(jiǎn)單的說就是形參個(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中一樣一樣了。

4.剩余參數(shù)

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

在 JS 中我們可以使用arguments來訪問多余傳遞的參數(shù)。那在TS中怎么訪問剩余參數(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 ]

看完上述內(nèi)容，你們掌握如何分析TypeScript中的函數(shù)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！