---
title: Advanced Types
description: Covers mapped types, conditional types, and template literal types in TypeScript.
tokens: ~356
---

# Advanced Types

Quick-return cheat sheet for generics, mapped types, conditional types, and template literal types.

## Generics

```typescript
function identity<T>(value: T): T { return value; }

function first<T extends { length: number }>(arr: T): T { return arr; }

function create<T = string>(value?: T): T { /* ... */ }

interface Box<T> { value: T; }

type Pair<A, B = A> = { first: A; second: B };
```

## Mapped Types

Mapped types iterate over keys of an existing type with `[K in keyof T]` to produce a new type. You can add or remove modifiers (`readonly`, `?`) and remap keys with `as`.

```typescript
type Mutable<T> = { -readonly [K in keyof T]: T[K] };

type Optional<T> = { [K in keyof T]?: T[K] };

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
```

## Conditional Types

Conditional types choose between two branches based on an `extends` check: `T extends U ? A : B`. Combined with `infer`, they can extract types from structures — and they distribute automatically over unions.

```typescript
type IsString<T> = T extends string ? true : false;

type Flatten<T> = T extends (infer U)[] ? U : T;

type UnwrapPromise<T> = T extends Promise<infer R> ? UnwrapPromise<R> : T;
```

## Template Literal Types

```typescript
type Event = `on${Capitalize<"click" | "focus">}`; // "onClick" | "onFocus"

type Path = `/${string}`;

type CSSValue = `${number}${"px" | "rem" | "em"}`;
```