Mastering TypeScript: Advanced Types

TypeScript's type system is one of the most powerful features of the language, offering developers the ability to write safer, more maintainable code. In this deep dive, we'll explore advanced typing concepts that can elevate your TypeScript skills.

Understanding advanced types is crucial for building robust applications. We'll cover conditional types, which allow you to create types that depend on other types, mapped types for transforming existing types, and utility types that come built into TypeScript.

We'll also explore practical use cases where these advanced types can solve real-world problems and make your code more maintainable.

Conditional Types

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

// Examples
type A = IsString<string>; // true
type B = IsString<number>; // false

// Practical Example
type ArrayOrSingle<T> = T extends any[] ? T : T[];

function ensureArray<T>(item: T): ArrayOrSingle<T> {
  return Array.isArray(item) ? item : [item];
}

This example demonstrates conditional types in TypeScript. The IsString type checks if a type extends string, while ArrayOrSingle is a practical utility that ensures a value is always an array.

Mapped Types

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

interface User {
  name: string;
  age: number;
}

type ReadonlyUser = Readonly<User>;

// All properties are now readonly
const user: ReadonlyUser = {
  name: 'John',
  age: 30,
};

Mapped types allow you to create new types based on existing ones. This example shows how to create a readonly version of an existing type.

We'll also explore practical use cases where these advanced types can solve real-world problems and make your code more maintainable.

Conditional Types

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

// Examples
type A = IsString<string>; // true
type B = IsString<number>; // false

// Practical Example
type ArrayOrSingle<T> = T extends any[] ? T : T[];

function ensureArray<T>(item: T): ArrayOrSingle<T> {
  return Array.isArray(item) ? item : [item];
}

This example demonstrates conditional types in TypeScript. The IsString type checks if a type extends string, while ArrayOrSingle is a practical utility that ensures a value is always an array.

Mapped Types

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

interface User {
  name: string;
  age: number;
}

type ReadonlyUser = Readonly<User>;

// All properties are now readonly
const user: ReadonlyUser = {
  name: 'John',
  age: 30,
};

Mapped types allow you to create new types based on existing ones. This example shows how to create a readonly version of an existing type.