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： 在这个示例中，我们将简单地使用一个函数添加两个整数，我们将传递两个整数的数据类型和函数的返回类型也指定为数字类型，并在浏览器的控制台中打印加法结果。

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