When working with APIs in React, you often deal with complex data structures. Defining clear, reusable types or interfaces for API responses helps you write safer and more maintainable code. For example, you might receive a list of users from an API, each with several fields. Instead of using any, you should create a User interface or type alias so that your components know exactly what to expect.

// A reusable interface for a user API response
interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

// Example of a type for a paginated API response
type PaginatedResponse<T> = {
  data: T[];
  total: number;
  page: number;
  pageSize: number;
};

This approach lets you reuse these types across your app, making it easier to refactor and catch errors early. If your API returns a paginated list of users, you can simply use PaginatedResponse<User> as the type.

APIs often have optional or nested fields. For optional fields, add a question mark (?) after the field name. For nested objects, define a separate type or interface and reference it. This keeps your types readable and flexible, especially as APIs evolve.

// Optional and nested fields in API response types
interface Profile {
  bio?: string;
  avatarUrl?: string;
}

interface UserWithProfile {
  id: number;
  name: string;
  email: string;
  profile?: Profile; // profile is optional
}

With this structure, you can safely handle cases where profile or its fields might be missing, and TypeScript will help you avoid runtime errors.