🎯 Conditional Types: Type-Level Programming Magic

🎯 Introduction

Welcome to the fascinating world of conditional types! 🎉 Think of conditional types as the “if-else” statements of TypeScript’s type system - they let your types make smart decisions based on other types.

You’re about to unlock one of TypeScript’s most powerful features. Whether you’re building libraries 📚, creating type-safe APIs 🌐, or just want to level up your TypeScript skills 🚀, conditional types will transform how you think about types.

By the end of this tutorial, you’ll be writing types that adapt, decide, and transform like magic! ✨ Let’s dive into this incredible journey! 🏊‍♂️

📚 Understanding Conditional Types

🤔 What are Conditional Types?

Conditional types are like smart filters 🎨 that examine a type and choose different outcomes based on what they find. Think of them as TypeScript’s crystal ball 🔮 - they look at types and predict what should happen next!

In simple terms: “If this type matches that pattern, then give me this result, otherwise give me that result”

// 🎯 Basic conditional type syntax
type MyConditional<T> = T extends string ? "It's a string! 📝" : "Not a string 🤷‍♀️";

// 🧪 Let's test it out!
type Test1 = MyConditional<string>;     // "It's a string! 📝"
type Test2 = MyConditional<number>;     // "Not a string 🤷‍♀️"
type Test3 = MyConditional<boolean>;    // "Not a string 🤷‍♀️"

💡 The Magic Formula

The conditional type syntax follows this pattern:

T extends U ? X : Y

This reads as: “Does T extend U? If yes, give me X. If no, give me Y.”

• 🎯 T: The type we’re checking
• 🔍 U: The type we’re comparing against
• ✅ X: What to return if T extends U (true case)
• ❌ Y: What to return if T doesn’t extend U (false case)

🔧 Basic Syntax and Usage

📝 Your First Conditional Types

Let’s start with some friendly examples:

// 🎨 Check if a type is an array
type IsArray<T> = T extends any[] ? true : false;

// 🧪 Testing our array detector
type Test1 = IsArray<string[]>;   // true ✅
type Test2 = IsArray<number>;     // false ❌
type Test3 = IsArray<boolean[]>;  // true ✅

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

// 🎮 Let's see it in action!
type ProductType = ArrayElement<string[]>;     // string
type ScoreType = ArrayElement<number[]>;       // number
type MysteryType = ArrayElement<boolean>;      // never

💡 Pro Tip: The infer keyword is like a detective 🕵️‍♀️ - it captures and extracts type information!

🎯 Practical Everyday Examples

// 🚀 Remove null and undefined from types
type NonNullable<T> = T extends null | undefined ? never : T;

// 🧪 Testing our null remover
type CleanString = NonNullable<string | null>;      // string
type CleanNumber = NonNullable<number | undefined>; // number
type SuperClean = NonNullable<boolean | null | undefined>; // boolean

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

// 🎮 Testing with different functions
type LoginResult = ReturnType<() => boolean>;                    // boolean
type UserData = ReturnType<(id: string) => { name: string }>;   // { name: string }
type VoidResult = ReturnType<(x: number) => void>;              // void

💡 Practical Examples

🛒 Example 1: Smart E-Commerce Types

Let’s build a type-safe shopping system:

// 🏪 Define our product types
interface Product {
  id: string;
  name: string;
  price: number;
  category: "electronics" | "clothing" | "books";
}

interface DigitalProduct extends Product {
  downloadLink: string;
  fileSize: number;
}

interface PhysicalProduct extends Product {
  weight: number;
  dimensions: { width: number; height: number; depth: number };
}

// 🎯 Smart shipping calculator that adapts to product type
type ShippingMethod<T> = T extends DigitalProduct 
  ? "instant-download 📧" 
  : T extends PhysicalProduct 
    ? "standard-shipping 📦" 
    : "unknown 🤷‍♀️";

// 🧪 Let's test our smart shipping!
type EbookShipping = ShippingMethod<DigitalProduct>;    // "instant-download 📧"
type BookShipping = ShippingMethod<PhysicalProduct>;    // "standard-shipping 📦"

// 🎨 Smart price calculator
type PriceDisplay<T> = T extends DigitalProduct 
  ? { price: number; currency: string; instant: true }
  : T extends PhysicalProduct 
    ? { price: number; currency: string; shippingCost: number }
    : { price: number; currency: string };

// 🎮 Usage example
class ShoppingCart<T extends Product> {
  constructor(private product: T) {}
  
  // 🚀 Method that adapts based on product type
  getShippingInfo(): ShippingMethod<T> {
    return (this.product as any).downloadLink 
      ? ("instant-download 📧" as ShippingMethod<T>)
      : ("standard-shipping 📦" as ShippingMethod<T>);
  }
}

// ✨ The magic happens here!
const digitalCart = new ShoppingCart<DigitalProduct>({
  id: "1",
  name: "TypeScript Mastery Course",
  price: 49.99,
  category: "books",
  downloadLink: "https://course.com/download",
  fileSize: 2048
});

console.log(digitalCart.getShippingInfo()); // "instant-download 📧"

🎮 Example 2: Game State Management

Let’s create an adaptive game system:

// 🏆 Game state interfaces
interface MenuState {
  type: "menu";
  currentMenu: "main" | "settings" | "leaderboard";
  backgroundMusic: boolean;
}

interface PlayingState {
  type: "playing";
  level: number;
  score: number;
  lives: number;
  powerUps: string[];
}

interface PausedState {
  type: "paused";
  savedState: PlayingState;
  pauseTime: Date;
}

interface GameOverState {
  type: "gameOver";
  finalScore: number;
  newHighScore: boolean;
  achievements: string[];
}

// 🎯 Smart UI components based on game state
type GameUI<T> = T extends MenuState
  ? { showMenu: true; showGame: false; showPause: false }
  : T extends PlayingState
    ? { showMenu: false; showGame: true; showPause: false }
    : T extends PausedState
      ? { showMenu: false; showGame: true; showPause: true }
      : T extends GameOverState
        ? { showMenu: true; showGame: false; showPause: false; showGameOver: true }
        : never;

// 🎨 Smart actions based on state
type AvailableActions<T> = T extends MenuState
  ? "startGame" | "openSettings" | "viewLeaderboard"
  : T extends PlayingState
    ? "pause" | "useItem" | "move" | "attack"
    : T extends PausedState
      ? "resume" | "mainMenu" | "restart"
      : T extends GameOverState
        ? "restart" | "mainMenu" | "shareScore"
        : never;

// 🚀 Game manager class
class GameManager<T extends MenuState | PlayingState | PausedState | GameOverState> {
  constructor(private state: T) {}
  
  // 🎯 UI configuration adapts to current state
  getUIConfig(): GameUI<T> {
    switch (this.state.type) {
      case "menu":
        return { showMenu: true, showGame: false, showPause: false } as GameUI<T>;
      case "playing":
        return { showMenu: false, showGame: true, showPause: false } as GameUI<T>;
      case "paused":
        return { showMenu: false, showGame: true, showPause: true } as GameUI<T>;
      case "gameOver":
        return { showMenu: true, showGame: false, showPause: false, showGameOver: true } as GameUI<T>;
      default:
        throw new Error("Unknown game state 😱");
    }
  }
  
  // 💡 Available actions adapt to state
  getAvailableActions(): AvailableActions<T>[] {
    // Implementation would return appropriate actions based on state
    return [] as AvailableActions<T>[];
  }
}

// 🎮 Usage examples
const menuManager = new GameManager<MenuState>({
  type: "menu",
  currentMenu: "main",
  backgroundMusic: true
});

const playingManager = new GameManager<PlayingState>({
  type: "playing",
  level: 5,
  score: 15000,
  lives: 3,
  powerUps: ["🚀 Speed Boost", "🛡️ Shield", "💥 Double Damage"]
});

console.log("🎯 Menu UI:", menuManager.getUIConfig());
console.log("🎮 Playing UI:", playingManager.getUIConfig());

🚀 Advanced Concepts

🧙‍♂️ Nested Conditional Types

When you’re ready to level up, try chaining conditionals:

// 🎨 Multi-level type checking
type DeepTypeCheck<T> = 
  T extends string 
    ? T extends `${string}@${string}.${string}` 
      ? "Valid email! 📧" 
      : "String but not email 📝"
    : T extends number
      ? T extends 0
        ? "Zero! 🚫"
        : "Non-zero number! 🔢"
      : T extends boolean
        ? T extends true
          ? "Truthy! ✅"
          : "Falsy! ❌"
        : "Unknown type! 🤷‍♀️";

// 🧪 Testing our deep checker
type EmailTest = DeepTypeCheck<"[email protected]">;  // "Valid email! 📧"
type StringTest = DeepTypeCheck<"hello">;            // "String but not email 📝"
type ZeroTest = DeepTypeCheck<0>;                    // "Zero! 🚫"
type NumberTest = DeepTypeCheck<42>;                 // "Non-zero number! 🔢"
type BooleanTest = DeepTypeCheck<true>;              // "Truthy! ✅"

🏗️ Building Custom Utility Types

Create your own TypeScript superpowers:

// 🎯 Extract all function property names from an object
type FunctionPropertyNames<T> = {
  [K in keyof T]: T[K] extends Function ? K : never;
}[keyof T];

// 🛒 Extract all non-function property names
type NonFunctionPropertyNames<T> = {
  [K in keyof T]: T[K] extends Function ? never : K;
}[keyof T];

// 🎨 Create function-only and data-only types
type FunctionProperties<T> = Pick<T, FunctionPropertyNames<T>>;
type NonFunctionProperties<T> = Pick<T, NonFunctionPropertyNames<T>>;

// 🧪 Testing with a user class
class User {
  name: string = "Alice";
  age: number = 30;
  email: string = "[email protected]";
  
  greet(): string { return `Hello, I'm ${this.name}! 👋`; }
  getAge(): number { return this.age; }
  updateEmail(newEmail: string): void { this.email = newEmail; }
}

// ✨ The magic in action!
type UserMethods = FunctionProperties<User>;
// Result: { greet(): string; getAge(): number; updateEmail(newEmail: string): void; }

type UserData = NonFunctionProperties<User>;
// Result: { name: string; age: number; email: string; }

// 🚀 Advanced: Extract promise return types
type PromiseType<T> = T extends Promise<infer U> ? U : T;

// 🎮 Testing promise extraction
type ApiResponse = PromiseType<Promise<{ data: string[] }>>;  // { data: string[] }
type DirectValue = PromiseType<string>;                      // string

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: The “Distributed” Trap

// ❌ This might not work as expected with union types!
type BadExample<T> = T extends string ? "string" : "not string";

// 🧪 Testing with union type
type UnionTest = BadExample<string | number>;  // "string" | "not string" (distributed!)

// ✅ Prevent distribution with brackets
type GoodExample<T> = [T] extends [string] ? "string" : "not string";

type BetterUnionTest = GoodExample<string | number>;  // "not string" (not distributed)

💡 Explanation: Conditional types distribute over union types by default. Use brackets [T] to prevent this behavior!

🤯 Pitfall 2: Infinite Recursion

// ❌ Dangerous - can cause infinite recursion!
type BadRecursive<T> = T extends any[] 
  ? BadRecursive<T[0]>  // 💥 This might never end!
  : T;

// ✅ Safe recursive types with depth limits
type SafeRecursive<T, Depth extends readonly any[] = []> = 
  Depth['length'] extends 10  // 🛡️ Stop at depth 10
    ? T
    : T extends any[]
      ? SafeRecursive<T[0], [...Depth, any]>
      : T;

// 🧪 Testing our safe recursion
type DeepArrayTest = SafeRecursive<string[][][]>;  // string (safely extracted)

🔍 Pitfall 3: The never Mystery

// ❌ Forgetting about the never case
type IncompleteType<T> = T extends string ? string : T extends number ? number : boolean;

// 🧪 What happens with other types?
type SymbolTest = IncompleteType<symbol>;  // boolean (probably not what we wanted!)

// ✅ Handle all cases explicitly
type CompleteType<T> = T extends string 
  ? string 
  : T extends number 
    ? number 
    : T extends boolean 
      ? boolean 
      : never;  // 🎯 Explicit handling of unexpected types

type BetterSymbolTest = CompleteType<symbol>;  // never (much clearer!)

🛠️ Best Practices

1. 🎯 Be Explicit: Always handle the false case clearly
2. 📝 Use Meaningful Names: IsArray<T> is better than Check<T>
3. 🛡️ Prevent Infinite Recursion: Set depth limits for recursive types
4. 🎨 Leverage Distribution: Understand when unions distribute and when they don’t
5. ✨ Keep It Simple: Don’t over-engineer your conditional types
6. 🔍 Test Edge Cases: Always test with never, unknown, and union types

🧪 Hands-On Exercise

🎯 Challenge: Build a Smart API Response Type System

Create a type system that handles different API response patterns:

📋 Requirements:

• ✅ Success responses with data
• ❌ Error responses with error messages
• 📊 Paginated responses with metadata
• 🔍 Loading states
• 🎨 Each response type needs appropriate properties!

🚀 Bonus Points:

• Add request method detection (GET, POST, etc.)
• Create response validators
• Build a type-safe API client interface

💡 Solution

// 🎯 API Response Types
interface ApiSuccess<T = any> {
  status: "success";
  data: T;
  timestamp: string;
}

interface ApiError {
  status: "error";
  message: string;
  code: number;
  details?: string[];
}

interface ApiPaginated<T = any> {
  status: "success";
  data: T[];
  pagination: {
    page: number;
    limit: number;
    total: number;
    hasMore: boolean;
  };
}

interface ApiLoading {
  status: "loading";
  progress?: number;
}

// 🚀 Smart response type detector
type ApiResponse<T> = ApiSuccess<T> | ApiError | ApiPaginated<T> | ApiLoading;

// 🎨 Extract data type from response
type ResponseData<T> = T extends ApiSuccess<infer U>
  ? U
  : T extends ApiPaginated<infer U>
    ? U[]
    : T extends ApiError
      ? never
      : T extends ApiLoading
        ? never
        : never;

// 🛡️ Type guards for runtime checking
const isSuccess = <T>(response: ApiResponse<T>): response is ApiSuccess<T> => 
  response.status === "success" && "data" in response && !("pagination" in response);

const isError = <T>(response: ApiResponse<T>): response is ApiError => 
  response.status === "error";

const isPaginated = <T>(response: ApiResponse<T>): response is ApiPaginated<T> => 
  response.status === "success" && "pagination" in response;

const isLoading = <T>(response: ApiResponse<T>): response is ApiLoading => 
  response.status === "loading";

// 🎯 Smart API client
class SmartApiClient {
  async get<T>(url: string): Promise<ApiResponse<T>> {
    try {
      // 📡 Simulate API call
      const mockResponse: ApiSuccess<T> = {
        status: "success",
        data: { message: "Hello TypeScript! 🎉" } as T,
        timestamp: new Date().toISOString()
      };
      
      return mockResponse;
    } catch (error) {
      return {
        status: "error",
        message: "Request failed 😢",
        code: 500
      };
    }
  }
  
  // 🎮 Smart response handler
  handleResponse<T>(response: ApiResponse<T>): void {
    if (isSuccess(response)) {
      console.log("✅ Success:", response.data);
      console.log("🕐 Timestamp:", response.timestamp);
    } else if (isError(response)) {
      console.log("❌ Error:", response.message);
      console.log("🔢 Code:", response.code);
    } else if (isPaginated(response)) {
      console.log("📊 Data:", response.data);
      console.log("📄 Page:", response.pagination.page);
      console.log("📈 Total:", response.pagination.total);
    } else if (isLoading(response)) {
      console.log("⏳ Loading...");
      if (response.progress) {
        console.log("📊 Progress:", `${response.progress}%`);
      }
    }
  }
}

// 🧪 Testing our smart API client
const apiClient = new SmartApiClient();

// 🎮 Type-safe usage
type UserData = { id: number; name: string; email: string };

apiClient.get<UserData>("/users/123").then(response => {
  // TypeScript knows exactly what response can be!
  apiClient.handleResponse(response);
  
  // 🎯 Type-safe data extraction
  if (isSuccess(response)) {
    // TypeScript knows response.data is UserData
    console.log(`👤 User: ${response.data.name}`);
    console.log(`📧 Email: ${response.data.email}`);
  }
});

// ✨ Advanced: Extract response data type
type ExtractedUserData = ResponseData<ApiSuccess<UserData>>;  // UserData
type ExtractedErrorData = ResponseData<ApiError>;            // never

🎓 Key Takeaways

You’ve conquered conditional types! Here’s what you can now do:

• ✅ Create smart, adaptive types that make decisions 💪
• ✅ Build custom utility types for your specific needs 🛡️
• ✅ Handle complex type transformations with confidence 🎯
• ✅ Debug type-level logic like a pro 🐛
• ✅ Leverage TypeScript’s most powerful features 🚀

Remember: Conditional types are like having a crystal ball 🔮 for your types - they can predict and adapt to any situation!

🤝 Next Steps

Congratulations! 🎉 You’ve mastered conditional types!

Here’s what to explore next:

1. 💻 Practice with the exercise above - try different API patterns
2. 🏗️ Build a library using advanced conditional types
3. 📚 Move on to our next tutorial: Distributed Conditional Types: Advanced Patterns
4. 🌟 Share your conditional type creations with the community!

You’re now equipped with one of TypeScript’s most powerful weapons. Use it wisely, and remember - every type wizard was once a beginner! Keep experimenting, keep learning, and most importantly, have fun with types! 🚀✨

Happy type-level programming! 🎉🔮✨