TypeScript Arrow Functions with Generics: Syntax and Examples

By the end of this page, you will understand how to write generic arrow functions in TypeScript, how their syntax compares to regular generic functions, where they are commonly used, and which mistakes beginners often make when combining generics, arrow functions, and type annotations.

Generics in TypeScript let you write functions that work with many types while still preserving type safety.

For example, this regular function:

function identity<T>(arg: T): T {
  return arg;
}

says:

• T is a type placeholder
• whatever type comes in as arg
• the same type comes back out

This is useful because the function is reusable without losing information about types.

Arrow functions support generics too. The generic type parameter is written before the parameter list:

const identity = <T>(arg: T): T => {
  return arg;
};

Here is the structure:

const functionName = <T>(param: T): T => {
  // logic
};

This matters in real programming because arrow functions are used everywhere in modern TypeScript code:

• utility functions
• callbacks
• React code
• functional patterns like map, filter, and reduce
• small reusable helpers

So if you know generics but only for function declarations, learning the arrow version helps you write the same type-safe logic in the style most codebases use today.

Think of a generic as a label slot on a machine.

• A normal function machine can have a slot labeled T
• An arrow function machine can have the same slot
• You plug in a type when you use it, and the machine keeps that type consistent

So this:

function identity<T>(arg: T): T

and this:

const identity = <T>(arg: T): T =>

are just two differently shaped machines with the same type slot.

The important idea is: the generic belongs to the function itself, not to the variable name.

Basic syntax

A generic arrow function in TypeScript looks like this:

const identity = <T>(arg: T): T => {
  return arg;
};

This is the arrow-function version of:

function identity<T>(arg: T): T {
  return arg;
}

Example: identity function

const identity = <T>(arg: T): T => arg;

const a = identity<string>("hello");
const b = identity<number>(42);
const c = identity(true);

What happens here?

• identity<string>("hello") returns a string
• identity<number>(42) returns a number
• identity(true) lets TypeScript infer as

Consider this example:

const identity = <T>(arg: T): T => arg;

const value = identity("TypeScript");

Step by step:

1. identity is assigned an arrow function.
2. <T> declares a generic type parameter named T.
3. (arg: T) means the parameter arg must be of type T.
4. : T after the parameter list means the function returns the same type T.
5. => arg returns the argument unchanged.
6. When calling identity("TypeScript"), TypeScript infers that T is string.
7. So the function becomes effectively:

const value: string = ();

Generic arrow functions appear often in practical TypeScript code.

1. Reusable utility helpers

const toArray = <T>(value: T): T[] => [value];

Useful for data transformation utilities.

2. Safe data selection

const getFirst = <T>(items: T[]): T | undefined => items[0];

Common in list processing, API data handling, and UI state logic.

3. Wrapping values in objects

const createResponse = <T>(data: T) => ({ data, success: true });

Useful in APIs, services, and helper layers.

4. Generic event or callback helpers

const callTwice = <T>(value: T, fn: (item: T) => void): void => {
  fn(value);
  fn(value);
};

In real codebases, generic arrow functions are usually used for small, composable helpers rather than large standalone functions.

Common patterns

Guard-style transformation helpers

const ensureArray = <T>(value: T | T[]): T[] => {
  return Array.isArray(value) ? value : [value];
};

This pattern normalizes input into a predictable shape.

Data mapping helpers

const pluck = <T, K extends keyof T>(obj: T, key: K): T[K] => obj[key];

This is common when working with objects and typed configuration.

Validation wrappers

const withDefault = <T>(value: T | undefined, fallback: T): T => {
  return value === undefined ? fallback : value;
};

Useful in configuration loading and API parsing.

Generic callbacks stored in constants

const identity = <T>(x: T):  x;

1. Putting the generic in the wrong place

Incorrect:

const identity = (arg: T): T => arg;

Problem:

• T is used, but never declared

Correct:

const identity = <T>(arg: T): T => arg;

2. Confusing variable type annotation with function generics

You may also see this style:

const identity: <T>(arg: T) => T = (arg) => arg;

This is valid, but it means:

• the variable identity is given a generic function type
• the implementation is assigned to that variable

Beginners often mix this up with the direct syntax.

Direct syntax is usually easier to read:

const identity = <T>(: T):  arg;

Generic regular function vs generic arrow function

Direct generic arrow syntax vs typed variable syntax

Generic arrow function syntax

const fn = <T>(arg: T): T => {
  return arg;
};

Multiple type parameters

const fn = <T, U>(a: T, b: U): [T, U] => [a, b];

Constraint syntax

const fn = <T extends { length: number }>(value: T): number => value.length;

Generic function type on a variable

const fn: <T>(arg: T) => T = (arg) => arg;

In .tsx files

Prefer:

const fn = <T,>(arg: T):  => arg;

What is the syntax for a generic arrow function in TypeScript?

Use this pattern:

const identity = <T>(arg: T): T => arg;

Can TypeScript infer the generic type in an arrow function?

Yes. In many cases you do not need to write the type argument explicitly.

const result = identity(123);

Here, T is inferred as number.

Why does <T> sometimes fail in a .tsx file?

Because the parser may interpret <T> as JSX instead of a generic type parameter. A common fix is:

const identity = <T,>(arg: T): T => arg;

Is a generic arrow function different from a generic regular function?

Not in capability. Both can use generics. The main difference is syntax and how they behave with things like this and hoisting.

Can arrow functions have more than one generic type?

Generic functions

The core idea behind using type parameters like T in reusable functions.

Type inference

Important because TypeScript often figures out generic types automatically.

Type constraints

Useful when a generic function needs specific properties, such as length.

Function type annotations

Related because you can type a variable as a generic function instead of putting generics directly on the arrow function.

Arrow functions

Essential background for understanding the syntax and behavior of => functions.

TSX and JSX parsing

Relevant because generic arrow functions can be parsed differently in .tsx files.

keyof and indexed access types

Often used with generic helper functions that work with object keys and values.