Welcome back! I am Mihir, and in this lesson we will learn arrow functions in TypeScript.

Arrow functions are a shorter way to write functions. TypeScript adds type safety to their parameters and return values.

Basic Arrow Function

JavaScript arrow function:

const greet = (name: string): string => {
  return `Hello, ${name}`;
};

The parameter type is:

name: string

The return type is:

: string

Short Return Syntax

If the function returns one expression, you can write it shorter.

const add = (a: number, b: number): number => a + b;

This is the same as:

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

Return Type Inference

TypeScript can infer arrow function return types.

const multiply = (a: number, b: number) => a * b;

TypeScript infers the return type as number.

For simple arrow functions, inference is usually clean.

Explicit Function Type

You can type the whole function variable.

const subtract: (a: number, b: number) => number = (a, b) => {
  return a - b;
};

TypeScript knows a and b are numbers from the function type.

Type Alias for Arrow Functions

type MathOperation = (a: number, b: number) => number;

const divide: MathOperation = (a, b) => {
  return a / b;
};

This keeps repeated function shapes readable.

Arrow Functions as Callbacks

Arrow functions are commonly used as callbacks.

const names = ["Mihir", "Aarav", "Riya"];

const upperNames = names.map((name) => name.toUpperCase());

TypeScript knows name is a string because names is string[].

This is contextual typing.

Arrow Functions with Object Parameters

type Product = {
  title: string;
  price: number;
};

const printProduct = (product: Product): void => {
  console.log(`${product.title}: ${product.price}`);
};

You can also destructure:

const printProduct = ({ title, price }: Product): void => {
  console.log(`${title}: ${price}`);
};

Returning Objects

When returning an object directly, wrap it in parentheses.

const createUser = (name: string): { name: string } => ({
  name,
});

Without parentheses, JavaScript may treat {} as a function body.

Arrow Functions with void

Use void when the arrow function does not return useful data.

const logMessage = (message: string): void => {
  console.log(message);
};

This is common for event handlers and callbacks.

Arrow Functions with Union Types

const formatId = (id: string | number): string => {
  if (typeof id === "string") {
    return id.toUpperCase();
  }

  return id.toString();
};

The union is narrowed before using type-specific behavior.

Common Mistake: Forgetting Parameter Types

const greet = (name) => {
  return `Hello, ${name}`;
};

With strict mode, TypeScript warns that name implicitly has an any type.

Correct:

const greet = (name: string): string => {
  return `Hello, ${name}`;
};

Quick Reference Summary

Practice

Create typed arrow functions:

type User = {
  name: string;
  age: number;
};

const isAdult = (user: User): boolean => user.age >= 18;

const formatUser = (user: User): string => {
  return `${user.name} is ${user.age} years old`;
};

Try returning a number from formatUser and see what TypeScript says.

What You've Learned

You now understand:

• How arrow functions work in TypeScript
• How to type arrow function parameters
• How to write arrow function return types
• How return type inference works
• How to type whole function variables
• How arrow functions work as callbacks
• How to return objects from arrow functions
• How void and union types work with arrows

What's Next?

In the next lesson, we will learn Function Overloading in TypeScript.

We will define functions that support multiple call signatures safely.

Need Help?

• Have questions, confusion, or want to know more? Contact me

Arrow functions keep syntax compact, and TypeScript keeps the contract clear.