Articles
TypeScript 簡介
TypeScript中的函式

TypeScript中的函式

本文將解釋TypeScript中的函式。

YouTube Video

TypeScript中的函式

TypeScript中的函式是加上了類型註解的JavaScript函式。在TypeScript中，通過明確定義函式的輸入（參數）和輸出（返回值）的類型，可以撰寫更健全的代碼。以下我們將介紹在TypeScript中定義函式的基本方法及其特性。

基本函式定義 

1function add(x: number, y: number): number {
2    return x + y;
3}
4
5console.log(add(5, 10));  // 15
  • add 函數接受兩個類型為 number 的參數，並回傳一個類型為 number 的值。
  • 它接受兩個參數，x 和 y，兩者的類型都明確指定為 number。
  • 回傳類型也被指定為 : number。

匿名函式（函式表達式）

在TypeScript中也可以使用匿名函式和函式表達式。類型可以用同樣的方式進行註解。

1const multiply = function (x: number, y: number): number {
2    return x * y;
3};
4
5console.log(multiply(3, 4));  // 12
  • 你可以將匿名函數賦值給一個變數，稍後再呼叫它。
1const factorial = function fact(n: number): number {
2  if (n <= 1) return 1;
3  return n * fact(n - 1); // Can call itself recursively
4};
5
6console.log(factorial(5)); // 120
  • 你可以使用具名函數表達式來實現遞迴呼叫。

箭頭函式

箭頭函式也可以使用類型註解。

1const subtract = (x: number, y: number): number => {
2    return x - y;
3};
4
5console.log(subtract(10, 4));  // 6

這段程式碼定義了一個帶有類型標註的箭頭函數 subtract，它接受兩個數字作為參數並回傳它們的差。

選擇性參數和預設參數

參數可以設為選擇性或給予預設值。

選擇性參數

在參數名稱後添加?可以使其成為選擇性參數。

1function greet(name?: string): string {
2    return name ? `Hello, ${name}` : "Hello!";
3}
4
5console.log(greet());        // Hello!
6console.log(greet("Alice"));  // Hello, Alice

這段程式碼接受一個可選參數；如果提供了參數，則以名稱打招呼，否則回傳一般的問候語。

預設參數

您還可以為參數設置預設值。

1function greetWithDefault(name: string = "Guest"): string {
2    return `Hello, ${name}`;
3}
4
5console.log(greetWithDefault());         // Hello, Guest
6console.log(greetWithDefault("Bob"));    // Hello, Bob

這個函數如果沒有傳入參數，會使用 "Guest" 作為預設值，並以指定或預設的名稱打招呼。

函式類型定義

還可以直接定義函式本身的類型。例如，這在傳遞函式作為參數時使用。

1type Operation = (x: number, y: number) => number;
2
3const addOperation: Operation = (x, y) => x + y;
4const multiplyOperation: Operation = (x, y) => x * y;
5
6console.log(addOperation(2, 3));      // 5
7console.log(multiplyOperation(2, 3)); // 6

這段程式碼定義了一個名為 Operation 的函數型別，接受兩個數字並回傳一個數字，然後用它來建立加法和乘法函數並執行。

無返回值時（void類型）

對於沒有返回值的函數，請指定 void 類型。

1function logMessage(message: string): void {
2    console.log(message);
3}
4
5logMessage("This is a message.");  // This is a message.

這段程式碼定義了一個 void 函數 logMessage，它接受一個字串訊息並在主控台印出，不會回傳任何值。

回呼函式

將一個函式作為參數傳遞給另一個函式，並在之後執行它，這被稱為回呼函式。它經常用於非同步處理和事件處理。

1function processData(callback: (data: string) => void): void {
2    const data: string = "Processed Data";
3    callback(data);
4}
5
6processData((result: string): void => {
7    console.log(result);
8});

在此範例中，傳遞了一個將值輸出到主控台的函式作為回呼函式。

另外，你也可以使用 type 或 interface 來定義回呼型別。

 1type Callback = (data: string) => void;
 2
 3function processData(callback: Callback): void {
 4    const data: string = "Processed Data";
 5    callback(data);
 6}
 7
 8processData((result: string): void => {
 9    console.log(result);
10});

使用 type 或 interface 來定義回呼型別可提升可重用性。

函數重載

函式多載允許你定義具有相同名稱但參數列表不同的函式。在 TypeScript 中，你可以定義多個具有相同名稱的函數，並根據參數的類型和數量執行不同的操作。

 1// Overload Signature
 2function double(value: number): number;
 3function double(value: string): string;
 4
 5// Implementation Signature
 6function double(value: number | string): number | string {
 7    if (typeof value === "number") {
 8        return value * 2;
 9    } else if (typeof value === "string") {
10        return value + value;
11    }
12}
13
14console.log(double(10));      // 20
15console.log(double("Hello")); // HelloHello

在 TypeScript 中函數重載是通過以下方法實現的：。

  • 重載簽名

    • 定義函數的使用方式（即簽名）。通過多次書寫這部分，可以實現重載。

  • 實現簽名

    • 實現實際的函數主體。這部分只需定義一次，負責處理所有重載簽名中聲明的情況。

重載的規則

函數重載適用以下規則：。

  • 重載簽名定義的順序

    • 由於從上到下進行評估，建議先定義具體類型，然後是更通用的類型。

  • 實現簽名的相容性

    • 實現簽名必須與所有重載簽名的參數和返回值相兼容。

  • 在重載簽名中指定詳細信息

    • 實現簽名傾向於模糊，因此應在重載簽名中指定詳細信息。
    • 如果只定義了實現簽名，則函數的類型推斷將不足。

總結

TypeScript中的函式具有以下特點。

  • 型別註解
    • 通過為參數和返回值指定型別，可以撰寫更安全的程式碼。
  • 匿名函式與箭頭函式
    • 它們可以像在JavaScript中一樣使用，並且加入型別註解可以提升型別安全性。
  • 可選參數與預設參數
    • 您可以根據需要讓參數的指定更加靈活。
  • 函式型別定義
    • 定義函式本身的型別以進行型別檢查。
  • 函式多載
    • 您可以使用相同的函式名稱支援不同的參數。

通過使用這些功能，你可以在 TypeScript 中編寫更清晰且更強健的代碼。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

TypeScript 的內建函數TypeScript 中的閉包