TypeScript Best Practices for React Development

TypeScript has become an essential tool for React development, providing type safety and better developer experience. Here are some best practices to follow.

Component Props and Types

Define Clear Interface Boundaries

interface ButtonProps {
  variant: "primary" | "secondary" | "danger";
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  onClick: () => void;
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({ variant, size = "md", ...props }) => {
  // Component implementation
};

Use Discriminated Unions

For components with different states, use discriminated unions to ensure type safety:

type LoadingState =
  | { status: "loading" }
  | { status: "success"; data: any[] }
  | { status: "error"; error: string };

Advanced Patterns

Generic Components

Create 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((item, index) => (
        <li key={index}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

Conclusion

Following these TypeScript best practices will help you build more maintainable and robust React applications.