如何在 TypeScript 中建立匿名函式？

---

在 TypeScript 中，我們可以使用 function 關鍵字宣告函式。它是一段執行某些操作的程式碼塊，我們可以透過呼叫函式來重用函式程式碼。

函式有兩種型別。一種是命名函式，另一種是匿名函式。命名函式意味著我們可以使用唯一識別符號來識別它，而匿名函式則不存在此識別符號。

在本教程中，我們將深入探討匿名函式。顧名思義，“匿名函式”指的是沒有名稱或識別符號的函式。我們可以簡單地將匿名函式儲存在變數中，並使用該變數來識別函式。

使用 Function 關鍵字建立匿名函式

使用者可以看到在 TypeScript 中建立函式的通用語法。

function demo(param1: string, param2: number): void {
   // code for the function
}

在上面的函式中，demo 是識別符號。我們可以透過刪除 demo 識別符號來使上述函式成為匿名函式。我們可以僅使用 function 關鍵字定義匿名函式，並在其後的括號中新增引數。此外，我們可以將匿名函式儲存在變數中。

使用者可以按照以下語法在 TypeScript 中建立匿名函式。

語法

在下面的語法中，我們將 demo() 函式轉換為匿名函式。

let demo: (param1: string, param2: string) => void = function (
   param1: string,
   param2: string
): 
void {
   // code for anonymousn function
};

現在，demo 不是函式識別符號，而是儲存了一個函式。我們已經定義了 demo 變數的型別，它是一個帶有兩個字串型別引數且返回型別為 void 的函式。之後，我們使用賦值運算子將匿名函式賦值給 demo 變數。

示例

在下面的示例中，我們定義了 demo 變數並將匿名函式儲存在其中。使用者可以觀察我們如何使用 demo 變數呼叫匿名函式。在使用 demo 變數呼叫匿名函式時，我們還傳遞了兩個引數。

// define a demo variable of function type taking two string parameters, and returning the none.
let demo: (param1: string, param2: string) => void = function (
   param1: string,
   param2: string
): void {
   // code for the anonymous function
   console.log("The value of the param1 is " + param1);
   console.log("The value of the param2 is " + param2);
};
// calling the anonymous function via variable in which we have stored it.
demo("TutorialsPoint", "TypeScript");

編譯後，它將生成以下 JavaScript 程式碼

// define a demo variable of function type taking two string parameters, and returning the none.
var demo = function (param1, param2) {
   // code for the anonymous function
   console.log("The value of the param1 is " + param1);
   console.log("The value of the param2 is " + param2);
};
// calling the anonymous function via variable in which we have stored it.
demo("TutorialsPoint", "TypeScript");

輸出

以上程式碼將產生以下輸出：

The value of the param1 is TutorialsPoint
The value of the param2 is TypeScript

使用箭頭函式建立匿名函式

箭頭函式是另一種型別的匿名函式。使用箭頭語法，我們可以無需 function 關鍵字和函式識別符號即可定義函式。

使用者可以按照以下語法使用箭頭語法定義匿名函式，並瞭解為什麼它被稱為箭頭語法。

語法

let test: function_Type = (parameters): return_type => {
   // anonymous function code
}

在上面的語法中，test 是函式型別的普通變數。這裡，function_type 是箭頭函式的型別。之後，() => {} 是箭頭函式的語法。此外，我們可以在括號中為箭頭函式新增引數，並在花括號中編寫箭頭函式的程式碼。

示例

在下面的示例中，我們定義了 test 變數，它儲存匿名箭頭函式。箭頭函式在將傳遞的引數值乘以後返回數值。

我們使用 test 變數呼叫了箭頭函式，並將它的返回值儲存在 result 變數中。

// defining the test variable
// (value1: number) => number is the type of the test variable.
// In (value1: number): number, value1 is the parameter for the anonymous function,
// number after ':' defines the return type of anonymous function
let test: (valeu1: number) => number = (value1: number): number => {
   return 10 * value1;
};
// invoking the test function
let result = test(12);
console.log("The returned value from the test function is " + result);

編譯後，它將生成以下 JavaScript 程式碼：

// defining the test variable
// (value1: number) => number is the type of the test variable.
// In (value1: number): number, value1 is the parameter for the anonymous function,
// number after ':' defines the return type of anonymous function
var test = function (value1) {
   return 10 * value1;
};
// invoking the test function
var result = test(12);
console.log("The returned value from the test function is " + result);

輸出

以上程式碼將產生以下輸出：

The returned value from the test function is 120

透過使用以上語法和示例，我們學習瞭如何使用匿名函式。我們將在編寫即時程式碼時學習匿名函式的應用場景。

將匿名函式用作回撥函式

在使用 TypeScript 時，我們經常需要在呼叫任何方法或函式時呼叫回撥函式。我們可以將回調函式作為另一個函式的引數傳遞。我們可以使用匿名箭頭函式來保持回撥函式的語法簡潔。

使用者可以按照以下語法將箭頭函式用作回撥函式。

語法

Array.sort(()=>{
   // code for the callback function
})

在上面的語法中，我們使用了箭頭函式作為回撥函式。

示例

在此示例中，我們建立了一個數字陣列。之後，我們呼叫了 sort() 方法以遞減順序對數字陣列進行排序。sort() 方法接受一個返回數值以對陣列進行排序的回撥函式，而回調函式則是匿名箭頭函式。

// Creating the array of numbers
let numbers: Array<number> = [90, 64, 323, 322, 588, 668, 9, 121, 34, 1, 2];

// using the sort method to sort the numbers array
// To sort the numbers in the decreasing order, we need to pass callback function inside the sort method
// we have used the arrow function as a callback function inside the sort() method
numbers.sort((value1: number, value2: number): number => {
   return value1 < value2 ? 1 : -1;
});
// printing the sorted numbers array
console.log(numbers);

編譯後，它將生成以下 JavaScript 程式碼：

// Creating the array of numbers
var numbers = [90, 64, 323, 322, 588, 668, 9, 121, 34, 1, 2];
// using the sort method to sort the numbers array
// To sort the numbers in the decreasing order, we need to pass callback function inside the sort method
// we have used the arrow function as a callback function inside the sort() method
numbers.sort(function (value1, value2) {
   return value1 < value2 ? 1 : -1;
});
// printing the sorted numbers array
console.log(numbers);

輸出

以上程式碼將產生以下輸出：

[ 668, 588, 323, 322, 121, 90, 64, 34, 9, 2, 1 ]

我們學習瞭如何在 TypeScript 中使用匿名函式。我們可以透過兩種方式建立匿名函式，一種是僅使用 function 關鍵字，另一種是使用箭頭語法。但是，箭頭語法是最好的，因為它的語法非常簡潔。