TypeScript Arrow Functions

Introduction

In this chapter, we will explore arrow functions in TypeScript. Arrow functions provide a more concise syntax for writing functions and do not have their own this context. Understanding how to use arrow functions is essential for writing modern and efficient TypeScript code.

Table of Contents

• Definition
• Arrow Function Syntax
• Basic Arrow Function
• Arrow Function with Parameters
• Arrow Function with Return Type
• Using Arrow Functions in Array Methods
• Lexical this in Arrow Functions
• Complete Example with Output
• Conclusion

Definition

An arrow function is a compact alternative to a traditional function expression. It does not have its own this, arguments, super, or new.target. Arrow functions are always anonymous.

Arrow Function Syntax

Syntax

(parameters) => {
  // code to be executed
}

Example

This example demonstrates a simple arrow function that adds two numbers and returns the result.

let add = (a: number, b: number): number => {
  return a + b;
};

console.log(add(5, 3)); // Output: 8

Output

8

Basic Arrow Function

Arrow functions can be used without parameters and can have an implicit return.

Example

This example demonstrates a basic arrow function that returns a greeting message.

let greet = (): string => "Hello, TypeScript!";

console.log(greet()); // Output: Hello, TypeScript!

Output

Hello, TypeScript!

Arrow Function with Parameters

Arrow functions can accept parameters just like traditional functions.

Example

This example demonstrates an arrow function that multiplies two numbers.

let multiply = (a: number, b: number): number => {
  return a * b;
};

console.log(multiply(4, 5)); // Output: 20

Output

20

Arrow Function with Return Type

You can explicitly specify the return type of an arrow function.

Example

This example demonstrates an arrow function with an explicit return type.

let divide = (a: number, b: number): number => {
  return a / b;
};

console.log(divide(10, 2)); // Output: 5

Output

5

Using Arrow Functions in Array Methods

Arrow functions are often used with array methods like map, filter, and reduce for concise and readable code.

Example

This example demonstrates using an arrow function with the map method to double the values in an array.

let numbers: number[] = [1, 2, 3, 4, 5];
let doubled = numbers.map(n => n * 2);

console.log(doubled); // Output: [2, 4, 6, 8, 10]

Output

[2, 4, 6, 8, 10]

Lexical this in Arrow Functions

Arrow functions do not have their own this context. Instead, they capture the this value of the enclosing context. This behavior is particularly useful when working with methods in classes or object literals.

Example

This example demonstrates the lexical this behavior of arrow functions within a class.

class Person {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  sayHello() {
    setTimeout(() => {
      console.log(`Hello, my name is ${this.name}`);
    }, 1000);
  }
}

let person = new Person("Ramesh");
person.sayHello(); // Output: Hello, my name is Ramesh

Output

Hello, my name is Ramesh

Complete Example with Output

In this section, we will combine the examples into a single TypeScript file, compile it to JavaScript, and run it to see the output.

TypeScript Code

You can test the following code in the TypeScript Playground.

// Basic Arrow Function
let greet = (): string => "Hello, TypeScript!";
console.log(greet()); // Output: Hello, TypeScript!

// Arrow Function with Parameters
let multiply = (a: number, b: number): number => {
  return a * b;
};
console.log(multiply(4, 5)); // Output: 20

// Arrow Function with Return Type
let divide = (a: number, b: number): number => {
  return a / b;
};
console.log(divide(10, 2)); // Output: 5

// Using Arrow Functions in Array Methods
let numbers: number[] = [1, 2, 3, 4, 5];
let doubled = numbers.map(n => n * 2);
console.log(doubled); // Output: [2, 4, 6, 8, 10]

// Lexical `this` in Arrow Functions
class Person {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  sayHello() {
    setTimeout(() => {
      console.log(`Hello, my name is ${this.name}`);
    }, 1000);
  }
}

let person = new Person("Ramesh");
person.sayHello(); // Output: Hello, my name is Ramesh

Conclusion

In this chapter, we covered arrow functions in TypeScript, including their syntax, how to use them with parameters and return types, using them in array methods, and understanding their lexical this behavior. We provided a complete example with its output to illustrate how arrow functions work in TypeScript. Understanding arrow functions is essential for writing modern and efficient TypeScript code.