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