Explicar la sintaxis de la función de flecha en TypeScript

En este artículo intentaremos entender cómo usar la sintaxis básica de la función de flecha en TypeScript . Las funciones de flecha son básicamente la forma más corta proporcionada a todos los usuarios para implementar la sintaxis de función larga/tradicional de una manera mucho más corta con facilidad.

Las funciones de flecha implementadas en JavaScript (ES6), también se implementarán de manera similar en TypeScript; la única adición en la sintaxis original proporcionada por ES6 aquí en TypeScript es la adición de tipos de datos o tipos de devolución junto con la sintaxis de la función y también junto con los argumentos pasados ​​dentro de esa función.

Sintaxis: siguiendo la sintaxis que podemos usar para implementar funciones de flecha en TypeScript.

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

Ahora, las cosas hasta aquí pueden parecer un poco ambiguas, así que aclaremos las cosas visualizando la sintaxis anterior usando algunos de los siguientes ejemplos ilustrados (para ejecutar estos ejemplos, busque el compilador de TypeScript en línea o instale TypeScript en su PC local y compile los códigos efectivamente)-

Ejemplo 1: en este ejemplo, simplemente crearemos una función que devuelva un nombre de string que se pasa dentro de la función como un parámetro en sí mismo utilizando la sintaxis ilustrada anteriormente.

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

Producción:

GeeksforGeeks

Ejemplo 2: En este ejemplo, simplemente sumaremos dos enteros usando una función en la que pasaremos dos enteros del tipo de datos número y también especificaremos el tipo de función de retorno como número e imprimiremos el resultado de la suma en la consola del navegador.

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

Producción:

140
180
190

Ejemplo 3: En este ejemplo, implementaremos una función cuyo tipo de retorno es una string que consta de tres variables de tipos de datos diferentes que imprimirán sus resultados especificados.

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]));

Producción:

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

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