Advanced TypeScript patterns every React dev should know

Why static typing matters in complex apps

As applications grow, keeping track of prop interfaces, API responses, and global state becomes prone to human errors. TypeScript acts as a compile-time safety net, documenting your code as you write it.

Advanced patterns to know

Using Discriminated Unions helps construct APIs where the presence of certain props depends on the value of another prop.

// Example of discriminated union
type ButtonProps = 
  | { variant: 'link'; href: string; children: React.ReactNode }
  | { variant: 'button'; onClick: () => void; children: React.ReactNode };

export function Button(props: ButtonProps) {
  if (props.variant === 'link') {
    return <a href={props.href}>{props.children}</a>;
  }
  return <button onClick={props.onClick}>{props.children}</button>;
}

Using Template Literal Types

Template literal types allow you to build dynamic string values based on specific patterns, which is perfect for theme tokens, spacing values, or event handlers.