Mastering TypeScript: Advanced Types and Patterns for React Development

TypeScript has become an essential tool for modern React development, providing type safety and enhanced developer experience. In this comprehensive guide, we'll explore advanced TypeScript patterns that will elevate your React applications to the next level.

Advanced TypeScript Patterns

1. Conditional Types

Conditional types allow you to create types that depend on other types:

// API Response wrapper
type APIResponse<T> = T extends string
  ? { message: T }
  : T extends object
  ? { data: T }
  : never;

// Usage
type StringResponse = APIResponse<string>; // { message: string }
type ObjectResponse = APIResponse<User>; // { data: User }

2. Mapped Types and Template Literals

Create dynamic types based on object keys:

// Generate event handlers
type EventHandlers<T> = {
  [K in keyof T as `on${Capitalize<string & K>}`]: (value: T[K]) => void;
};

interface FormData {
  name: string;
  email: string;
  age: number;
}

// Generates: onName, onEmail, onAge handlers
type FormHandlers = EventHandlers<FormData>;

3. Generic Constraints

Use constraints to ensure type safety:

// Component that requires an id field
interface HasId {
  id: string;
}

function ListComponent<T extends HasId>(props: {
  items: T[];
  onSelect: (item: T) => void;
}) {
  return (
    <div>
      {props.items.map((item) => (
        <button key={item.id} onClick={() => props.onSelect(item)}>
          {item.id}
        </button>
      ))}
    </div>
  );
}

React-Specific TypeScript Patterns

1. Component Props with Variants

Create flexible component APIs with discriminated unions:

type ButtonProps = 
  | {
      variant: 'primary';
      size?: 'small' | 'medium' | 'large';
      children: React.ReactNode;
    }
  | {
      variant: 'icon';
      icon: React.ReactNode;
      'aria-label': string;
    };

function Button(props: ButtonProps) {
  if (props.variant === 'primary') {
    return (
      <button className={`btn-primary btn-${props.size ?? 'medium'}`}>
        {props.children}
      </button>
    );
  }
  
  return (
    <button className="btn-icon" aria-label={props['aria-label']}>
      {props.icon}
    </button>
  );
}

2. Custom Hooks with Generics

Build reusable, type-safe hooks:

function useAPI<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchData = useCallback(async () => {
    setLoading(true);
    setError(null);
    
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error('Failed to fetch');
      
      const result: T = await response.json();
      setData(result);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error');
    } finally {
      setLoading(false);
    }
  }, [url]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return { data, loading, error, refetch: fetchData };
}

// Usage with type inference
const { data, loading, error } = useAPI<User[]>('/api/users');

3. Event Handler Types

Properly type event handlers:

interface FormProps {
  onSubmit: (data: FormData) => void;
  onChange: (field: keyof FormData, value: string) => void;
}

function Form({ onSubmit, onChange }: FormProps) {
  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    // Type-safe form handling
  };

  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    onChange(e.target.name as keyof FormData, e.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" onChange={handleInputChange} />
    </form>
  );
}

Utility Types and Helpers

1. Deep Readonly

Make nested objects immutable:

type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
};

interface Config {
  api: {
    baseUrl: string;
    timeout: number;
  };
  features: {
    darkMode: boolean;
  };
}

type ReadonlyConfig = DeepReadonly<Config>;
// All properties and nested properties are readonly

2. Optional Properties

Create flexible update interfaces:

type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

interface User {
  id: string;
  name: string;
  email: string;
  createdAt: Date;
}

// Make id and createdAt optional for updates
type UpdateUser = PartialBy<User, 'id' | 'createdAt'>;

3. Type Guards

Create runtime type checking:

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

function isUser(obj: unknown): obj is User {
  return (
    typeof obj === 'object' &&
    obj !== null &&
    'id' in obj &&
    'name' in obj &&
    isString((obj as User).id) &&
    isString((obj as User).name)
  );
}

// Usage in components
function UserProfile({ data }: { data: unknown }) {
  if (!isUser(data)) {
    return <div>Invalid user data</div>;
  }

  // TypeScript knows data is User type here
  return <div>Welcome, {data.name}!</div>;
}

Best Practices

1. Strict Configuration

Always use strict TypeScript configuration:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  }
}

2. Interface vs Type Aliases

• Use interfaces for object shapes that might be extended
• Use type aliases for unions, primitives, and computed types

// Use interface for extensible object shapes
interface BaseProps {
  className?: string;
}

interface ButtonProps extends BaseProps {
  onClick: () => void;
}

// Use type for unions and computed types
type Status = 'loading' | 'success' | 'error';
type ComponentProps<T> = T extends 'button' ? ButtonProps : DivProps;

3. Gradual Adoption

When adding TypeScript to existing projects:

1. Start with strict: false
2. Add types to new code first
3. Gradually enable strict checks
4. Use // @ts-expect-error for known issues during migration

Conclusion

Mastering advanced TypeScript patterns enables you to build more robust, maintainable React applications. These patterns provide compile-time guarantees that catch errors early and improve the overall developer experience.

Key takeaways:

• Leverage TypeScript's type system for better API design
• Use generics and constraints for reusable, type-safe components
• Implement proper error handling with discriminated unions
• Always configure TypeScript strictly for maximum benefit