← Back to TypeScript Course | Chapter 7: Generics | Lesson 2 of 8

Generic Functions

Generic functions use type parameters to work safely with different types. They are especially useful when the relationship between input and output types should remain the same.

In this page:

  1. Creating a Generic Function
  2. Generic Functions with Arrays
  3. Generic Arrow Functions
  4. Generic Functions with Objects
  5. Explicit Type Arguments
Syntax
typescript 
function name<T>(param: T): T {
  return param;
}
name<type>(value);

Creating a Generic Function

Put a type parameter after the function name and use it in the parameter and return types; this is what actually connects the input type to the output type instead of writing the function once per concrete type.

Example: Creating a Generic Function

typescript 
function identity<T>(value: T): T {
  return value;
}
console.log(identity<number>(10));

Generic Functions with Arrays

Generic functions can accept arrays and return elements while preserving their element type, so calling the function on a string[] still gives back a string, not a value TypeScript has to widen to any.

Example: Generic Functions with Arrays

typescript 
function firstElement<T>(arr: T[]): T {
  return arr[0];
}
console.log(firstElement(["a", "b", "c"]));

Generic Arrow Functions

Arrow functions can also declare generic type parameters, and are useful for compact utility functions like a generic identity or comparator that need to stay short but still fully type-safe.

Example: Generic Arrow Functions

typescript 
const identity = <T,>(value: T): T => value;
console.log(identity(99));

Generic Functions with Objects

Generic functions can preserve the exact type of objects passed to them, so a function that just forwards or wraps a value doesn't accidentally erase useful information about that value's shape.

Example: Generic Functions with Objects

typescript 
function wrap<T>(value: T): { data: T } {
  return { data: value };
}
console.log(wrap({ name: "Nia" }));

Explicit Type Arguments

You can explicitly provide a type argument (like identity<string>(x)) when you want to make the intended type clear, or when TypeScript's inference genuinely can't determine it from the arguments alone.

Example: Explicit Type Arguments

typescript 
function identity<T>(value: T): T {
  return value;
}
console.log(identity<string>("explicit"));
Related Topics

Generic Interfaces · Generic Classes · Generic Constraints · Assertion Functions

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Putting the type parameter in the wrong place, like function<T> identity(value: T), when it goes after the function name: identity<T>.
  2. Using a generic parameter but never using T in the parameters or return type, so it adds nothing.
  3. In a .tsx file writing const f = <T>(x: T) => x, which is parsed as JSX; use <T,> or a function declaration.
🔒

Chapter Quiz — Complete all 8 topics to unlock

0/8 topics done

Complete these topics first:

← Previous Lesson Introduction to Generics Next Lesson → Generic Interfaces

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.