What is the syntax for Typescript arrow functions with generics?

When creating arrow functions with generics in TypeScript, you place the generic type parameters before the parameter list, similar to how you’d do with regular functions. A common pattern is:

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

Below are more examples showing multiple type parameters, constraints, and inline usage.

1. Basic Single Generic

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

let strVal = identity("Hello"); // T is inferred as string
let numVal = identity(123);     // T is inferred as number

Explanation

• <T>: Declares a generic type parameter named T.
• (arg: T): T: The function parameter is of type T, and the return type is also T.
• => { ... }: The arrow function body.

2. Multiple Generic Parameters

const combine = <A, B>(val1: A, val2: B): [A, B] => {
  return [val1, val2];
};

const result = combine("Hello", 42);
// result is [string, number]

Explanation

• <A, B>: Two type parameters, A and B.
• The function returns a tuple [A, B].

3. Generic Constraints

interface HasLength {
  length: number;
}

const logLength = <T extends HasLength>(item: T): T => {
  console.log(item.length);
  return item;
};

logLength("Hello!");  // string has .length
logLength([1, 2, 3]); // array has .length
// logLength(123);    // Error: number does not have a .length

Explanation

• <T extends HasLength> restricts T to types that have a length property.
• Useful if your function requires certain properties on the generic type.

4. Inline Arrow Function Usage

Sometimes you see inline arrow function usage with generics, e.g., as callbacks:

function processItems<T>(items: T[], cb: <U>(item: T, extra: U) => void) {
  // ...
}

processItems([1, 2, 3], <U>(num: number, extra: U) => {
  console.log(num, extra);
});

• The callback <U>(num: number, extra: U) => void is itself a generic arrow function.

Common Syntax Patterns

1. Named Arrow Function

   const funcName = <T>(param: T): T => {
     // ...
     return param;
   };

2. Anonymous Arrow in a Variable

   let func = <T>(param: T): T => param;

3. Constraints

   const constrained = <T extends object>(value: T): T => value;

4. Multiple Generics

   const doBoth = <X, Y>(x: X, y: Y): [X, Y] => [x, y];

Summary

• Arrow functions with generics look much like normal arrow functions, except you include type parameters <T> (or multiple like <T, U>) before the parameter list.
• You can constrain these type parameters with extends if you need specific properties.
• This pattern allows type-safe functional programming and callback usage in TypeScript.

Bonus: Strengthen Your JavaScript & TypeScript Foundations

If you’re looking to sharpen your JavaScript knowledge—which underpins TypeScript—consider Grokking JavaScript Fundamentals by DesignGurus.io. It covers core JS concepts like closures, prototypes, and async/await, helping you write more effective TypeScript arrow functions and advanced generics.