目錄

• 1.函式定義
• 1.1中的函式
  
• 1.2TypeScript中的函式
  
• 2.可選引數和預設引數
• 3.剩餘引數

1.函式定義

1.1Script中的函式

在學習TypeScript中的函式前我們先來回顧一下JavaScript中的函式定義常用的包含以下幾種：

第一種：使用function關鍵字宣告函式

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

第二種：使用字面量方式宣告函式

cowww.cppcns.comnst add2 = function (x,y) {
    return x + y
}

第三種：使用箭頭函式宣告函式

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

1.2TypeScript中的函式

TS中的函式宣告方式與類似，唯一不同的就是固定了引數型別了返回值型別，如果沒有返回值其返回值型別必須為void而不是留空。

接下來用 TS 的方式重新宣告以上是三個函式：

第一種：使用function關鍵字宣告函式：

/*
 語法結構如下
 function 函式名(形參1: 型別,形參2: 型別,...): 返回值型別 {http://www.cppcns.com
     函式體
 }
 */
function add4(x: number,y: number): number {
    return x + y
}

第二種：使用字面量方式宣告函式

/*
 語法結構如下
 const 函式名 = function (形參1: 型別,...): 返回值型別 {
     函式體
 }
 */
const add5 = function (x: number,y: number): number {
    return x + y
}

第三種：使用箭頭函式宣告函式

/*
 語法結構如下
 const 函式名 = (形參1: 型別,...): 返回值型別  => {
     函式體
 }
 */
// 3. 使用箭頭函式宣告函式
const add6 = (x: number,y: number): number => {
    return x + y
}

以上就是在TS中宣告函式的方式。JS中還有一種引數解耦賦值的情況，這種在TS中怎麼指定引數型別呢？示例程式碼如下：

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
}

這種方式將函式分為兩個部分，=前面是函式的型別的返回值型別，後半部分才是函式定義的地方。

其實前半部分也就是為了增加程式碼的可讀性，沒有太大的實際意義。

2.可選引數和預設引數

TypeScript 裡的每個函式都是必須。這並不代表不能傳遞null和undefined作為引數，而是是否為每個引數都傳遞了值，如果不一一對應，則會丟擲異常。簡單的說就是形參個數與實參個數一致。

示例程式碼如下所示：

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中每個引數都是可選的，可傳遞也可不傳遞，如果不傳遞的時候，它將是預設的undefined 。

在TS中也是可以實現的，我們只需要在引數名後面新增 ?即可實現可選引數 的功能。

如下程式碼：

// 實現可選引數功能
// 引數名旁加一個?即可
function add(x: number,y?: number): number {
  return x + y
}
let result1 = add(1)
let result2 = add(1,2)
// let result3 = add(1,but got 3

如上程式碼就實現了可選引數

在TS中實現預設引數與JS實現預設引數是相同的，只需要為其賦值即可。

示例程式碼如下所示：

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

當然，如果不為y指定型別就與JS中一樣一樣了。

3.剩餘引數

所謂的剩餘引數就是函式定義時需要傳遞兩個引數，而函式呼叫時傳遞了3個引數；此時就多餘出一個引數，該引數http://www.cppcns.com就是剩餘引數。

在 JS 中我們可以使用arguments來訪問多餘傳遞的引數。那在TS中怎麼訪問剩餘引數呢？

實際上TS中可以將所有的引數儲存在一個變數中，該變數實際上一個解耦的一個數組。

示例程式碼如下：

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

到此這篇關於TypeScript中的函式的文章就介紹到這了,更多相關TypeScript函式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！