TypeScript Tips Every React Developer Should Know

TypeScript has become the de facto standard for serious React development. Here are tips that will level up your TypeScript game.

1. Generic Components

Create flexible, reusable components with generics:

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return <ul>{items.map(renderItem)}</ul>;
}

// Usage
<List 
  items={users} 
  renderItem={(user) => <li key={user.id}>{user.name}</li>} 
/>

2. Discriminated Unions for State

Use discriminated unions to model complex state:

type RequestState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: Error };

3. Utility Types

Master built-in utility types:

4. Const Assertions

Use as const for literal types:

const COLORS = ['red', 'green', 'blue'] as const;
type Color = typeof COLORS[number]; // 'red' | 'green' | 'blue'

Conclusion

TypeScript isn't just about catching errors—it's about designing better APIs and creating self-documenting code.