When building React components with TypeScript, you often need to describe data that can be of multiple types, as well as define the shape of props and state. Union types, interfaces, and type aliases are the primary tools for this job.

Union types allow you to specify that a value can be one of several types. This is especially useful in React for conditional rendering, where a prop or state might represent different possible values. For example, imagine a status indicator component that displays different content based on whether the status is "loading", "success", or "error":

type Status = "loading" | "success" | "error";

function StatusMessage({ status }: { status: Status }) {
  if (status === "loading") {
    return <p>Loading...</p>;
  } else if (status === "success") {
    return <p>Success!</p>;
  } else {
    return <p>Error occurred.</p>;
  }
}

Here, the Status type is a union of string literals, ensuring that the status prop can only be one of the specified values. This helps prevent bugs and improves code clarity.

Interfaces and type aliases are both used to describe the shape of objects, such as props and state in React components. For example, you might define props for a UserCard component like this:

interface UserProps {
  id: number;
  name: string;
  isActive: boolean;
}

function UserCard({ id, name, isActive }: UserProps) {
  return (
    <div>
      <h2>{name}</h2>
      <p>ID: {id}</p>
      <p>Status: {isActive ? "Active" : "Inactive"}</p>
    </div>
  );
}

You can achieve the same result using a type alias:

type UserProps = {
  id: number;
  name: string;
  isActive: boolean;
};

Both interface and type work for describing object shapes, but they have some differences. Interfaces are best when you want to extend or merge types, such as when building component hierarchies or working with third-party libraries. Type aliases are more flexible and can describe unions, intersections, and primitives, but they cannot be merged or extended in the same way as interfaces.

In React, you generally use interfaces for props and state when you expect to extend them, and type aliases when you need to compose more complex types, such as unions or intersections. Consider the following comparison:

• Use an interface when:
  • You want to extend or merge types;
  • You are describing object shapes for props or state that may be extended;
• Use a type alias when:
  • You need unions, intersections, or mapped types;
  • You want to describe primitive types or tuples.

Understanding when to use each will help you write more maintainable and scalable React components with TypeScript.