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 关键字，另一种是使用箭头语法。但是，箭头语法是最好的，因为它的语法非常简洁。

打印页面