How to Use Arrow Functions in TypeScript

Use arrow functions in TypeScript when you want shorter function syntax, lexical this, and strong parameter and return typing. They are perfect for callbacks, utility helpers, React handlers, and inline transformations.

What you’ll build or solve

You’ll learn how to use arrow functions in TypeScript with typed parameters, return values, and inferred types. You’ll also know when arrow functions are better than standard function declarations.

When this approach works best

This approach is the right choice when the function is small, local, or depends on lexical this.

Common real-world scenarios include:

• Array callbacks
• React event handlers
• Utility helpers
• Promise chains
• Object method bindings

This is a bad idea when the function needs hoisting or should exist as a named reusable declaration across a module.

Prerequisites

You only need:

• Basic TypeScript syntax
• Understanding of functions
• Familiarity with type annotations

Step-by-step instructions

Step 1: Write a typed arrow function

The basic pattern is:

const functionName = (param: Type): ReturnType => {
  return value;
};

Example:

const double = (value: number): number => {
  return value * 2;
};

This gives typed input and output.

TypeScript can also infer the return type.

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

This stays strongly typed without extra annotations.

What to look for:

• Parameters use normal TypeScript types
• Return types are optional but helpful
• Great for local helpers
• Lexical this avoids rebinding issues
• Cleaner for callbacks

Examples you can copy

Multiply

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

Greeting

const greet = (name: string): string => `Hi ${name}`;

Array map

const ids = users.map((user) => user.id);

Common mistakes and how to fix them

Mistake 1: Forgetting parameter types

What the reader might do:

const double = (value) => value * 2;

Why it breaks: the parameter becomes any in loose setups.

Corrected approach:

Add the parameter type.

Mistake 2: Confusing object return syntax

What the reader might do:

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

Why it breaks: braces are treated as a function body.

Corrected approach:

Wrap the object in parentheses.

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

Mistake 3: Using arrow functions for object methods that need dynamic this

What the reader might do:

Use arrow methods in prototypes expecting dynamic context.

Why it breaks: arrow functions lock lexical this.

Corrected approach:

Use method shorthand or standard functions.

Troubleshooting

If this behaves unexpectedly, remember arrow functions use lexical scope.

If the return type looks wrong, add an explicit annotation.

If object returns fail, wrap the object in parentheses.

If the function should be hoisted, use a function declaration instead.

Quick recap

• Arrow functions use shorter syntax
• Add parameter types for safety
• Return types can be explicit or inferred
• Great for callbacks and helpers
• Use lexical this intentionally