When building React components with TypeScript, you will frequently use a handful of core types to ensure your JSX logic is both clear and safe. The most common primitive types you will encounter are string, number, and boolean. These types represent simple values: string for text, number for numeric values, and boolean for true/false logic. For instance, a component prop that holds a user's name would typically be typed as string, while a prop representing an age would use number.

Arrays and objects are also essential in React development. The array type allows you to express lists of items, such as an array of user names (string[]) or a list of numbers (number[]). Objects group related values together. For example, a user prop might be typed as { name: string; age: number }, ensuring any object passed in has both a name (as a string) and an age (as a number).

Consider these practical examples:

type User = {
  name: string;
  age: number;
  isActive: boolean;
};

const users: User[] = [
  { name: "Alice", age: 30, isActive: true },
  { name: "Bob", age: 25, isActive: false }
];

function UserList(props: { users: User[] }) {
  return (
    <ul>
      {props.users.map(user => (
        <li key={user.name}>
          {user.name} ({user.age}) - {user.isActive ? "Active" : "Inactive"}
        </li>
      ))}
    </ul>
  );
}

In this example, User is an object type with three properties, and users is an array of User objects. The UserList component receives an array of users and safely renders their information, with TypeScript ensuring that every user has the correct structure and types.

Using these types in your JSX logic allows TypeScript to catch errors before they reach the browser. For example, if you accidentally try to access a property that doesn't exist on a User, or pass a number where a string is expected, TypeScript will alert you during development.

TypeScript's static type checking helps prevent many common bugs in React components. By specifying the expected types for props, state, and variables, you reduce the risk of runtime errors caused by unexpected values. This is especially important in larger codebases or when working in a team, as clear types make it easier to understand and maintain your components.