全面解析TypeScript Function

隨著JavaScript語言的廣泛使用，TypeScript這種能夠優化JavaScript的語言也逐漸受到歡迎。TypeScript的一個重要特性就是Function（函數）。在本文中，我們將從以下多方面詳細闡述TypeScript Function的使用。

一、概述

在TypeScript中，Function是一種基本的數據類型，定義一個Function有兩種方式：函數聲明（Function Declaration）和函數表達式（Function Expression）。如下所示：

// 函數聲明
function funcName(para1: type1, para2: type2): returnType {
  // function body
}

// 函數表達式
const funcName = function(para1: type1, para2: type2): returnType {
  // function body
}

// 箭頭函數表達式
const funcName = (para1: type1, para2: type2): returnType => {
  // function body
}

其中，函數聲明和函數表達式的區別在於函數聲明會被提前，可以在函數聲明的語句之前調用函數；而函數表達式的語句不具備提前性，只能在聲明後調用。箭頭函數表達式是ES6中的語法，作用和函數表達式一樣，但是使用箭頭函數表達式可以使代碼更加簡潔。

二、參數類型與返回類型

在定義Function時，我們需要指定參數的類型和返回值的類型。如下例所示：

function add(num1: number, num2: number): number {
  return num1 + num2;
}

const result = add(1, 2);
console.log(result); // 3

在上例中，參數num1和num2都是number類型，返回值也是number類型。

特別的，當函數沒有返回值時，返回類型應該為void。如下例所示：

function log(message: string): void {
  console.log(message);
}

log('Hello TypeScript!');

在上例中，函數log的返回值類型為void，因為它沒有返回值。在函數體內部，可以使用return語句返回undefined，但是這並不會改變函數的返回類型。

三、可選參數與默認參數

在Function中，我們可以使用可選參數和默認參數。可選參數表示該參數可以不傳遞，使用問號（?）來定義。默認參數表示該參數有默認的值，使用等號（=）來定義。

例如：

function square(num: number, isDouble?: boolean, prefix: string = 'Result: '): number | string {
  const result = Math.pow(num, 2);
  if (isDouble) {
    return result * 2;
  } else {
    return prefix + result;
  }
}

const result1 = square(3);
console.log(result1); // 'Result: 9'

const result2 = square(3, true);
console.log(result2); // 18

const result3 = square(3, false, 'The result is ');
console.log(result3); // 'The result is 9'

在上例中，num是必須要傳遞的參數，isDouble和prefix是可選參數，其中isDouble使用了問號定義，prefix使用了等號定義。函數square的返回類型使用了聯合類型（number | string），表示返回值可以是number類型或string類型。

四、剩餘參數

在Function中，我們可以使用剩餘參數（Rest Parameters），表示傳遞的參數不確定。使用三個點（…）來定義剩餘參數。如下例所示：

function sum(first: number, second: number, ...others: number[]): number {
  let result = first + second;
  for (let i = 0; i < others.length; i++) {
    result += others[i];
  }
  return result;
}

const result1 = sum(1, 2);
console.log(result1); // 3

const result2 = sum(1, 2, 3, 4, 5);
console.log(result2); // 15

在上例中，first和second是必須要傳遞的兩個參數，而others是可以傳遞任意數量的參數，使用剩餘參數的方式將它們收集到others數組中。

五、函數重載

在Function中，我們可以使用函數重載（Function Overloading），表示函數可以接受多種不同類型或數量的參數。為了實現函數重載，我們需要定義多個函數簽名（Function Signature），每個函數簽名表示一個函數重載。

例如：

function getLength(value: string): number;
function getLength(value: any[]): number;
function getLength(value: any): number {
  if (Array.isArray(value)) {
    return value.length;
  } else {
    return value.length;
  }
}

const result1 = getLength('Hello TypeScript');
console.log(result1); // 17

const result2 = getLength([1, 2, 3, 4, 5]);
console.log(result2); // 5

在上例中，我們定義了三個函數簽名，getLength(value: string)、getLength(value: any[])和getLength(value: any)，分別表示接受一個字元串、接受一個數組和接受任意類型的參數。而在函數體getLength(value: any)中，我們根據參數的類型來處理返回值。

六、總結

本文從Function的定義方式、參數類型與返回類型、可選參數與默認參數、剩餘參數和函數重載等方面詳細闡述了TypeScript Function的使用。希望本文可以幫助讀者更好地理解和使用TypeScript。