Explain the arrow function syntax in TypeScript
Arrow functions in TypeScript are implemented similarly to JavaScript (ES6). The main addition in TypeScript is the inclusion of data types or return types in the function syntax, along with the types for the arguments passed into the function.
What is arrow function syntax in TypeScript?
Arrow functions in TypeScript offer a concise syntax for defining functions, supporting parameters and returning type annotations. They provide a shorter, clearer way to write functions compared to traditional syntax, enhancing readability and maintaining type safety.
Syntax
The following syntax we may use to implement Arrow functions in TypeScript.
let function_name = (
parameter_1 : data_type,
...
) : return_type => {
...
}Below the Examples of Arrow Functions in TypeScript
Example 1: Returning a String
In this example, we create a function that returns a string. The function takes a name as a parameter and returns it.
let getName = (name: string): string => {
return name;
};
console.log(getName("GeeksforGeeks"));
Output:
GeeksforGeeksExample 2: Adding Two Integers
In this example, we create a function to add two integers. The function takes two parameters of type number and returns their sum, also of type number
let addNumbers = (num1: number, num2: number): number => {
return num1 + num2;
};
console.log(addNumbers(100, 40)); // Output: 140
console.log(addNumbers(150, 30)); // Output: 180
console.log(addNumbers(120, 70)); // Output: 190
Output:
140
180
190Example 3: Using Multiple Data Types
In this example, we create a function that returns a string composed of three different data types. The function takes a number, a string, and an array of numbers as parameters, and returns a formatted string.
let formatData = (id: number, name: string, values: number[]): string => {
return `${id} - ${name} - ${values.join(", ")}`;
};
console.log(formatData(1, "ABC", [10, 20, 30]));
console.log(formatData(2, "APPLE", [50, 20, 30]));
console.log(formatData(3, "MANGO", [70, 90, 80]));
Output:
1- ABC- 10,20,30
2- APPLE- 50,20,30
3- MANGO- 70,90,80FAQs
How do you declare an arrow function in TypeScript?
An arrow function is declared with the following syntax
let functionName = (param1: type, param2: type): returnType => {
// function body
};
Can arrow functions have type annotations in TypeScript?
Yes, arrow functions can include type annotations for both parameters and return types, ensuring type safety and clarity.
What are the advantages of using arrow functions in TypeScript?
Arrow functions provide a shorter syntax, do not have their own this context, and support type annotations, making them useful for concise and type-safe code.
How do arrow functions handle the this keyword in TypeScript?
Arrow functions capture the this value of the enclosing context, meaning they do not have their own this context, which helps avoid common this binding issues.
Can arrow functions be used as methods in TypeScript classes?
While arrow functions can be assigned to class properties, they are not typically used as methods because they do not have their own this context.
