Conditional type with generics in Typescript - Deep Dive

Overview - Conditional type with generics

What is it?

Conditional types with generics in TypeScript let you create types that change based on other types. They work like 'if-else' statements but for types, deciding which type to use depending on a condition. Generics allow these conditions to be flexible and work with many types instead of just one. This helps write code that is both safe and reusable.

Why it matters

Without conditional types and generics, you would have to write many similar types for different cases, making code long and error-prone. They let you write smart types that adapt automatically, catching mistakes early and saving time. This makes your programs more reliable and easier to maintain.

Where it fits

Before learning this, you should understand basic TypeScript types and generics. After this, you can explore advanced type manipulation like mapped types, type inference, and utility types to write even more powerful type-safe code.

Mental Model

Core Idea

Conditional types with generics choose one type or another based on a test about the generic type, like a type-level if-else.

Think of it like...

It's like choosing what to wear based on the weather: if it's cold, wear a coat; if it's warm, wear a t-shirt. The generic is the weather, and the conditional type picks the right clothing.

Generic Type (T)
      ↓
  ┌───────────────┐
  │ Condition on T│
  └──────┬────────┘
         │true
         ↓
   Type A (if true)
         │
         │false
         ↓
   Type B (if false)

Build-Up - 7 Steps

1

Foundation

Understanding basic generics

Concept: Generics let you write flexible types that work with many types instead of one fixed type.

Example: function identity(value: T): T { return value; } Here, T is a placeholder for any type. When you call identity with a number, T becomes number; with a string, T becomes string.

Result

The function works for any type, keeping the type information safe.

Understanding generics is key because conditional types use generics to decide which type to pick.

2

Foundation

What are conditional types?

Concept: Conditional types let you pick one type or another based on a condition about a type.

Syntax: type Example = T extends string ? number : boolean; If T is a string, Example becomes number; otherwise, it becomes boolean.

Result

Example is number, Example is boolean.

Conditional types let types behave like if-else statements, making types smarter and adaptable.

3

Intermediate

Combining generics with conditional types

🤔Before reading on: do you think conditional types can use generics to test any type or only specific ones? Commit to your answer.

Concept: You can use generics inside conditional types to test and choose types dynamically.

Example: type IsString = T extends string ? 'yes' : 'no'; IsString is 'yes', IsString is 'no'. This works for any type T you give.

Result

The type changes based on the generic type you provide.

Knowing that generics can be tested inside conditional types unlocks powerful type logic.

4

Intermediate

Using conditional types for type filtering

🤔Before reading on: do you think conditional types can remove unwanted types from a union? Commit to your answer.

Concept: Conditional types can filter types out of unions by returning never for unwanted types.

Example: type FilterString = T extends string ? T : never; FilterString becomes string because number becomes never and is removed.

Result

You get only the string types from the union.

Understanding filtering with conditional types helps you manipulate complex types safely.

5

Intermediate

Distributive property of conditional types

🤔Before reading on: do you think conditional types apply to each member of a union separately or to the whole union at once? Commit to your answer.

Concept: Conditional types automatically apply to each member of a union type separately, distributing over the union.

Example: type ToArray = T extends any ? T[] : never; ToArray becomes string[] | number[]. This happens because the conditional type runs on each union member.

Result

You get a union of arrays, one for each original type.

Knowing this distributive behavior is crucial to predict how conditional types transform unions.

6

Advanced

Using infer keyword inside conditional types

🤔Before reading on: do you think conditional types can extract parts of a type? Commit to your answer.

Concept: The infer keyword lets conditional types capture and reuse parts of a type inside the condition.

Example: type ReturnType = T extends (...args: any[]) => infer R ? R : never; ReturnType<() => string> is string. Here, infer R captures the return type of the function type T.

Result

You can extract and reuse parts of complex types.

Understanding infer unlocks advanced type extraction and manipulation.

7

Expert

Conditional types with generics in real-world patterns

🤔Before reading on: do you think conditional types with generics can help create safer APIs or just simple type checks? Commit to your answer.

Concept: Conditional types with generics enable complex, safe, and reusable type patterns used in libraries and frameworks.

Example: React's built-in types use conditional types with generics to infer props and state types safely. Also, utility types like Partial, Required use conditional types internally. These patterns help catch bugs early and improve developer experience.

Result

You write code that adapts to many cases while keeping type safety.

Knowing these real-world uses shows how conditional types with generics power modern TypeScript development.

Under the Hood

At runtime, TypeScript types do not exist; they are erased. Conditional types work purely at compile time by the TypeScript compiler analyzing the generic type parameters. The compiler checks if the generic type extends (matches) another type and then selects the appropriate branch. This happens recursively and distributively over unions, allowing complex type transformations before code runs.

Why designed this way?

TypeScript was designed to add static type safety to JavaScript without changing runtime behavior. Conditional types with generics provide a flexible, expressive way to describe types that depend on other types. This design balances power and simplicity, avoiding runtime overhead while enabling advanced type logic.

Generic Type T
    │
    ▼
[Check if T extends Condition]
    ├── Yes ──▶ Use Type A
    └── No ───▶ Use Type B

If T is a union: T1 | T2 | T3
    ▼
Apply check to each member:
  T1 → Type A or B
  T2 → Type A or B
  T3 → Type A or B

Combine results into a union

Myth Busters - 4 Common Misconceptions

Quick: Do conditional types run at runtime or compile time? Commit to your answer.

Common Belief: Conditional types run when the program runs, deciding types dynamically.

Reality: Conditional types only exist at compile time; they do not affect runtime code.

Why it matters: Thinking they run at runtime leads to confusion about performance and debugging.

Quick: Does a conditional type always treat a union as a whole or separately? Commit to your answer.

Common Belief: Conditional types treat unions as a single type, not separately.

Reality: Conditional types distribute over unions, applying the condition to each member separately.

Why it matters: Misunderstanding this causes wrong assumptions about type results and bugs in type logic.

Quick: Can conditional types only test simple types like string or number? Commit to your answer.

Common Belief: Conditional types only work with simple types like string or number.

Reality: Conditional types can test complex types, including functions, objects, and even extract parts using infer.

Why it matters: Underestimating their power limits how you use TypeScript's type system.

Quick: Does the infer keyword create new types at runtime? Commit to your answer.

Common Belief: infer creates new types that exist at runtime.

Reality: infer only works at compile time to capture parts of types; it has no runtime effect.

Why it matters: Confusing infer with runtime code leads to misunderstandings about TypeScript's type system.

Expert Zone

1

Conditional types distribute over naked type parameters but not over wrapped ones, which affects how unions are processed.

2

Using never in conditional types effectively removes types from unions, enabling powerful filtering patterns.

3

Complex conditional types can cause performance issues in the TypeScript compiler if overused or deeply nested.

When NOT to use

Avoid conditional types when simple union types or mapped types suffice, as conditional types can increase complexity and slow down compilation. For runtime decisions, use normal JavaScript logic instead.

Production Patterns

In production, conditional types with generics are used to create utility types like Partial, Readonly, and ReturnType. They also enable safe API design by inferring types from function arguments and responses, improving developer experience and reducing bugs.

Connections

Polymorphism in Object-Oriented Programming

Both allow behavior or structure to change based on type or class.

Understanding conditional types helps grasp how polymorphism adapts behavior, but at the type level instead of runtime.

Mathematical Logic (If-Then-Else Statements)

Conditional types are a type-level form of logical if-then-else expressions.

Knowing this connection clarifies how type systems can encode logic similar to math and computer science.

Biological Gene Expression

Just like genes express traits based on environmental signals, conditional types express different types based on input types.

This cross-domain link shows how systems adapt outputs based on inputs, whether in biology or programming.

Common Pitfalls

#1 Expecting conditional types to affect runtime behavior.

Wrong approach:

type Result = T extends string ? console.log('string') : console.log('not string');

Correct approach:

type Result = T extends string ? 'string' : 'not string';

Root cause:

Confusing TypeScript's compile-time type system with JavaScript's runtime code.

#2 Not realizing conditional types distribute over unions, causing unexpected results.

Wrong approach:

type Check = T extends string ? 'yes' : 'no';
type Result = Check; // expecting 'no'

Correct approach:

type Check = T extends string ? 'yes' : 'no';
type Result = Check; // actually 'yes' | 'no'

Root cause:

Missing the distributive property of conditional types over unions.

#3 Using conditional types without infer when extraction is needed.

Wrong approach:

type ReturnType = T extends (...args: any[]) => any ? any : never;

Correct approach:

type ReturnType = T extends (...args: any[]) => infer R ? R : never;

Root cause:

Not using infer to capture and reuse parts of types.

Key Takeaways

Conditional types with generics let you write flexible, smart types that change based on input types.

They work like if-else statements but at the type level, helping catch errors before running code.

Conditional types distribute over unions, applying conditions to each member separately.

The infer keyword inside conditional types lets you extract parts of complex types for reuse.

These features power many real-world TypeScript utilities and improve code safety and maintainability.