TypeScript Academy · Lesson

Generic Functions: Type Parameters

Add type parameters to functions for reusability.

Lesson 1 of 413 steps

Generic Functions: Type Parameters is a free TypeScript Academy lesson on CoddyKit. This is lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The TypeScript Academy course includes 4 lessons in total.

Welcome

Generics allow you to write functions that work with any type while preserving type safety. Instead of using `any`, you use a type parameter that is resolved when the function is called.

The Problem Generics Solve

A function returning `any` loses type information. Generics preserve the relationship between input and output types.

// Without generics — loses type info
function first(arr: any[]): any { return arr[0]; }

// With generics — type-safe
function first<T>(arr: T[]): T { return arr[0]; }

Type Parameter Syntax

Declare a type parameter with angle brackets `` before the parameter list. Use T in the parameters and return type.

function identity<T>(value: T): T {
  return value;
}
const n = identity(42);       // T is number
const s = identity('hello');  // T is string

Type Inference for Generic Functions

TypeScript infers the type argument from the actual argument. You rarely need to specify it explicitly.

function wrap<T>(val: T): T[] { return [val]; }
const nums = wrap(42);    // T inferred as number -> number[]
const strs = wrap('hi');  // T inferred as string -> string[]

Multiple Type Parameters

Functions can have multiple type parameters.

function pair<A, B>(a: A, b: B): [A, B] {
  return [a, b];
}
const p = pair(1, 'hello'); // [number, string]

Generic Array Functions

Generics are essential for array utility functions that work with any element type.

function filterNull<T>(arr: (T | null)[]): T[] {
  return arr.filter((x): x is T => x !== null);
}

Explicit Type Arguments

You can explicitly provide type arguments when TypeScript cannot infer them.

function create<T>(): T | null { return null; }
const user = create<User>(); // T cannot be inferred — must be explicit

Generic vs Any

Unlike `any`, generics maintain the relationship between types across the function. The return type is linked to the input type.

function echo<T>(val: T): T { return val; }
const n: number = echo(42);   // OK
// const s: string = echo(42); // Error — T is number

Generic Arrow Functions

Arrow functions use the same syntax but need a comma in .tsx files to disambiguate from JSX tags.

const identity = <T>(val: T): T => val;
// In .tsx files:
const identity2 = <T,>(val: T): T => val;

Returning a Different Type

Generic functions can use the type parameter in transformed ways.

function mapArray<T, U>(arr: T[], fn: (item: T) => U): U[] {
  return arr.map(fn);
}
const lengths = mapArray(['hello', 'world'], s => s.length);
// lengths: number[]

Generic Parameters with Defaults

Provide a default type for a type parameter to make it optional.

function createList<T = string>(): T[] { return []; }
const list = createList(); // T defaults to string

Quick Check

What is the return type of `identity(42)`?

Answer it in the interactive lesson

Recap

Generic functions use type parameters (T) to preserve type relationships between inputs and outputs. TypeScript infers type arguments automatically. Use generics instead of any to write reusable, type-safe utilities.

Free to start

Learn TypeScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 101
Lessons: 352

Start learning free View the full course

Frequently Asked Questions

Is the “Generic Functions: Type Parameters” lesson free?

Yes — the full text of “Generic Functions: Type Parameters” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO. The TypeScript Academy course includes 4 lessons in total.

What will I learn in “Generic Functions: Type Parameters”?

Add type parameters to functions for reusability. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

How long does the “Generic Functions: Type Parameters” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to TypeScript Academy