解释 TypeScript 中的箭头函数语法

在本文中，我们将尝试了解如何在 TypeScript 中使用基本的箭头函数语法。箭头函数基本上是提供给所有用户的更短的方式，以便以更短的方式轻松实现长/传统函数语法。

在 JavaScript (ES6) 中实现的箭头函数也将以类似的方式在 TypeScript 中实现； ES6 在 TypeScript 中提供的原始语法中唯一添加的是数据类型或返回类型以及函数语法以及在该函数内部传递的参数。

语法：我们可以使用以下语法在 TypeScript 中实现箭头函数。

let function_name = (
    parameter_1 : data_type, 
    ...
) : return_type => {
    ...
}

现在到这里的事情可能看起来有点模棱两可，所以让我们通过使用以下一些图解示例可视化上述语法来使事情更清楚（为了运行这些示例，要么搜索在线 typescript 编译器，要么在本地 PC 上安装 typescript 并编译代码有效）-

示例 1：在此示例中，我们将简单地创建一个函数，该函数返回一个字符串名称，该字符串名称使用上述语法在函数内部作为参数本身传递。

Javascript

let display_name = (name : string) : string => {
    return name;
}
  
// Function call
console.log(display_name("GeeksforGeeks"));

输出：

GeeksforGeeks

示例 2：在本示例中，我们将使用一个函数简单地将两个整数相加，其中我们将传递两个数据类型为 number 的整数，并将函数的返回类型指定为 number 并在浏览器的控制台中打印相加结果。

Javascript

let addition = (number1 : number, number2 : number) : number => {
    return number1 + number2;
}
  
// Function call
console.log(addition(50, 90));
console.log(addition(90, 90));
console.log(addition(100, 90));

输出：

140
180
190

示例 3：在此示例中，我们将实现一个函数，其返回类型为字符串，由三个不同的数据类型变量组成，这些变量将打印它们指定的结果。

Javascript

let users_details = (
    rollno: number, 
    name: string, 
    scores_obtained: number[]
) : string => {
    let user_detail : string = rollno + "- " 
        + name + "- "+ scores_obtained;
    return user_detail;
}
  
// Function call
console.log(users_details(1, "ABC", [10 , 20 , 30]));
console.log(users_details(2, "APPLE", [50 , 20 , 30]));
console.log(users_details(3, "MANGO", [70 , 90 , 80]));

输出：

1- ABC- 10,20,30
2- APPLE- 50,20,30
3- MANGO- 70,90,80

参考： https://www.typescriptlang.org/docs/handbook/functions.html#this-and-arrow-functions