当前位置：极客教程 > TypeScript > TypeScript 教程 > TypeScript 创建匿名函数

TypeScript 创建匿名函数

TypeScript 创建匿名函数

在TypeScript中，我们可以使用函数关键字来声明函数。它是一个执行某些操作的代码块，我们可以通过调用函数来重复使用函数代码。

有两种类型的函数。一个是命名函数，另一个是匿名函数。命名函数意味着我们可以用唯一的标识符来识别它，而标识符对于匿名函数来说并不存在。

我们将在本教程中深入讨论匿名函数。正如 “匿名函数 “这个词所说，它意味着一个没有任何名称或标识符的函数定义。我们可以简单地将匿名函数存储在变量中，并可以使用该变量识别该函数。

使用Function关键字创建一个匿名函数

用户可以看到在TypeScript中创建一个函数的一般语法。

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

demo是上述函数中的标识符。我们可以通过删除demo这个标识符来使上述函数成为匿名函数。我们可以只使用函数关键字来定义匿名函数，并在后面的括号中加入参数。此外，我们还可以将匿名函数存储在变量中。

用户可以按照下面的语法在TypeScript中创建一个匿名函数。

语法

我们在下面的语法中把demo()函数转换为匿名的。

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

现在，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");
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");
TypeScript

输出

上述代码将产生以下输出 —

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

使用箭头函数创建一个匿名函数

箭头函数是另一种类型的匿名函数。使用箭头语法，我们可以不使用函数关键字和函数标识符来定义函数。

用户可以按照下面的语法，用箭头语法定义匿名函数，并了解为什么它被称为箭头语法。

语法

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

在上述语法中，测试是一个函数类型的正常变量。这里，function_type是箭形函数的一个类型。之后，（）=>{}是箭头函数的语法。此外，我们还可以在小括号中添加箭头函数的参数，并可以在大括号中编写箭头函数的代码。

示例

在下面的例子中，我们定义了测试变量，它存储了匿名的箭头函数。箭头函数在与作为参数传递的数值相乘后返回数值。

我们使用测试变量调用了箭头函数，并将其返回值存储在结果变量中。

// 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);
TypeScript
// 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);
TypeScript

输出

上述代码将产生以下输出 —

The returned value from the test function is 120
TypeScript

利用以上的语法和例子，我们已经学会了如何使用匿名函数。我们将学习在编写实时代码时匿名函数的使用。

使用匿名函数作为回调函数

在使用TypeScript时，我们经常需要在调用任何方法或函数时调用一个回调函数。我们可以将回调函数作为另一个函数的参数来传递。我们可以使用匿名箭头函数来保持回调函数的语法排序。

用户可以按照下面的语法来使用箭头函数作为回调函数。

语法

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

在上面的语法中，我们使用了箭头函数作为回调函数。

示例

在这个例子中，我们已经创建了一个数字数组。之后，我们调用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);
TypeScript
// 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);
TypeScript

输出

上述代码将产生以下输出 —

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

我们学会了在TypeScript中使用匿名函数。我们可以用两种方式创建匿名函数，一种是只使用函数关键字，另一种是使用箭头语法。然而，箭头语法是最好的，因为它的语法非常简短。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

TypeScript 教程

登录

找回密码？

注册