TypeScript - 匿名函式

匿名函式

在 TypeScript 中，匿名函式是指沒有特定名稱的函式。這些函式是在執行時動態建立的。我們可以將它們儲存在變數中，並使用這些變數呼叫它們。

我們可以將匿名函式定義為函式表示式。

我們可以使用函式宣告和函式表示式在 TypeScript 中定義函式。

函式宣告定義了一個命名函式。而要定義匿名函式，則使用函式表示式。

函式表示式可以命名，但當函式表示式未命名時，則稱為匿名函式。

使用 function 關鍵字定義匿名函式

您可以看到在 TypeScript 中建立命名函式的通用語法。

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

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

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

語法

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

var funcName: (param1: string, param2: string) => void = function (
   param1: string,
   param2: string
): 
void {
   // code for anonymous function
};

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

示例

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

在此示例中，我們建立了一個數字陣列。之後，我們呼叫 sort() 方法以按降序對數字陣列進行排序。sort() 方法接受一個回撥函式，該函式返回數字值以對陣列進行排序，並且回撥函式是匿名箭頭函式。

var funcName: (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);
};
funcName("TutorialsPoint", "TypeScript");

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

var funcName = 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);
};
funcName("TutorialsPoint", "TypeScript");

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

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

使用箭頭函式定義匿名函式

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

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

語法

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

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

示例

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

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

var test: (valeu1: number) => number = (value1: number): number => {
   return 10 * value1;
};
var result = test(12);
console.log("The returned value from the test function is " + result);

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

var test = function (value1) {
   return 10 * value1;
};
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
})

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

示例

var numbers: Array<number> = [90, 64, 323, 322, 588, 668, 9, 121, 34, 1, 2];
numbers.sort((value1: number, value2: number): number => {
   return value1 < value2 ? 1 : -1;
});
console.log(numbers);

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

var numbers = [90, 64, 323, 322, 588, 668, 9, 121, 34, 1, 2];
numbers.sort(function (value1, value2) {
   return value1 < value2 ? 1 : -1
});
console.log(numbers);

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

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

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

列印頁面