TypeScript Tutorial: Advanced Types
Mapped types, conditional types, template literal types, and infer keyword.
Mapped Types
Transform every property in a type:
```typescript
type Optional<T> = {
[K in keyof T]?: T[K];
};
type Nullable<T> = {
[K in keyof T]: T[K] | null;
};
interface User { id: number; name: string; email: string; }
type OptionalUser = Optional<User>; // same as Partial<User>
type NullableUser = Nullable<User>; // all props can be null
```
---
Conditional Types
Types that depend on a condition:
```typescript
type IsString<T> = T extends string ? "yes" : "no";
type A = IsString<string>; // "yes"
type B = IsString<number>; // "no"
// Unwrap array element type
type Unarray<T> = T extends Array<infer Item> ? Item : T;
type N = Unarray<number[]>; // number
type S = Unarray<string>; // string (not an array — returns T)
```
---
Template Literal Types
Combine string literals with types:
```typescript
type EventName = "click" | "focus" | "blur";
type Handler = `on${Capitalize<EventName>}`;
// "onClick" | "onFocus" | "onBlur"
type Getters<T> = {
[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
```
---
The infer Keyword
Extract a type from within a conditional:
```typescript
type UnpackPromise<T> = T extends Promise<infer U> ? U : T;
type StringResult = UnpackPromise<Promise<string>>; // string
type NumberResult = UnpackPromise<Promise<number>>; // number
type PlainValue = UnpackPromise<boolean>; // boolean
type FirstArg<T> = T extends (arg: infer A, ...rest: unknown[]) => unknown ? A : never;
type F = FirstArg<(x: number, y: string) => void>; // number
```
---
Combining It All
```typescript
// Build event emitter types automatically from an interface
interface AppEvents {
login: { userId: number };
logout: void;
error: { message: string };
}
type EventHandlers = {
[K in keyof AppEvents]: AppEvents[K] extends void
? () => void
: (payload: AppEvents[K]) => void;
};
```
---
What's Next?
You've completed the TypeScript track! Practice what you've learned in the **Interview Prep** section or earn your **TypeScript Certificate**.
What you'll learn in this TypeScript advanced types tutorial
This interactive TypeScript tutorial has 12 hands-on exercises. Estimated time: 20 minutes.
- Mapped types — transform every property — A mapped type iterates over the keys of an existing type and produces a new type. This is how `Partial<T>`, `Required<T>…
- Conditional types — types that depend on conditions — Conditional types choose between two types based on a condition: `T extends U ? TypeIfTrue : TypeIfFalse`. They're used …
- Template literal types — string pattern types — Template literal types combine string literal types to produce new string types. They're used for typed event names, CSS…
- infer keyword — extract types from generics — The `infer` keyword declares a type variable within a conditional type. TypeScript infers what that variable must be to …
- Recursive types — deeply nested structures — TypeScript supports recursive type definitions. Types can reference themselves, enabling types for JSON, tree structures…
- Distributive conditional types — apply to union members — When a conditional type's check is on a naked type parameter, it distributes over union types — applying separately to e…
- Variadic tuple types — typed rest elements — Variadic tuples let you spread types in tuple positions. This enables precise typing for functions that concatenate or s…
- Nominal types with branding — type-safe IDs — TypeScript uses structural typing — two types with the same shape are interchangeable. Branding adds a phantom property …
- Intersection types for mixins — Intersection types (`A & B`) require a value to satisfy ALL constraints simultaneously. Combined with generic constraint…
- Template literal types with Capitalize — TypeScript includes `Capitalize`, `Uncapitalize`, `Uppercase`, `Lowercase` built-in type utilities for template literal …
- Covariance and contravariance — TypeScript is structurally typed with covariance for return types and contravariance for parameter types. Understanding …
- Type-level programming — complex type utilities — TypeScript's type system is Turing-complete. You can write complex type-level programs using conditional types, mapped t…
TypeScript Advanced Types concepts covered
- Mapped Types
- Conditional Types
- Template Literal Types
- The infer Keyword
- Combining It All
- What's Next?