TypeScript Conditional Types

Understanding Conditional Types in TypeScript

Conditional types in TypeScript enable you to create types that depend on other types, similar to how if-else statements work in JavaScript.

They're a powerful feature that allows for sophisticated type transformations and type - level programming.

Key Concepts

Type-level logic

Type inference

Composition

Utility types

Common Use Cases

Type-safe function overloading

API response type transformations

Complex type validations

Building reusable type utilities

Advanced type inference

Basic Conditional Type Syntax

Conditional types use the form

// Usage examples type Result1 = IsString<string>;  // true type Result2 = IsString<number>;  // false type Result3 = IsString<"hello">; // true (literal types extend their base types)

// We can use this with variables too let a: IsString < string >; // a has type 'true'

let b: IsString<number>; // b has type 'false'

Conditional Types with Unions

Distributive Conditional Types

// When used with a union type, it applies to each member of the union type StringOrNumberArray = ToArray<string | number>;

// This becomes ToArray < string > | ToArray < number >

// We can also extract specific types from a union type ExtractString < T > = T extends string ? T : never;

type StringsOnly = ExtractString<string | number | boolean | "hello">;
// Result: string | "hello"

Type Inference with infer

Extracting Types from Complex Structures

Example

// Extract the return type of a function type type ReturnType < T > = T extends (...args: any[]) => infer R ? R : never;

// Examples function greet() { return "Hello, world!"; }
function getNumber() { return 42; }
type GreetReturnType = ReturnType<typeof greet>;   // string type NumberReturnType = ReturnType<typeof getNumber>; // number

// Extract element type from array type ElementType < T > = T extends (infer U)[] ? U : never;

type NumberArrayElement = ElementType<number[]>; // number type StringArrayElement = ElementType<string[]>; // string

Built-in Conditional Types

Standard Library Utilities

TypeScript includes several built - in conditional types in its standard library:

Example

// Extract < T, U > - Extracts types from T that are assignable to U

type OnlyStrings = Extract<string | number | boolean, string>; // string

// Exclude < T, U > - Excludes types from T that are assignable to U

type NoStrings = Exclude<string | number | boolean, string>; // number | boolean

// NonNullable < T > - Removes null and undefined from T

type NotNull = NonNullable<string | null | undefined>; // string
// Parameters<T> - Extracts parameter types from a function type type Params = Parameters<(a: string, b: number) => void>; // [string, number]
// ReturnType<T> - Extracts the return type from a function type type Return = ReturnType<() => string>; // string

Advanced Patterns and Techniques

Recursive Conditional Types