How do I handle API response types in TypeScript using fetch?

How do I handle API response types in TypeScript using fetch?

You can define response types using TypeScript interfaces. For example, if your API returns a user object, you can create an interface like this:

interface User {
  id: number;
  name: string;
  email: string;
}

How do I use this interface with the fetch API?

You can use the interface in your fetch call like this:

async function fetchUser(userId: number): Promise<User> {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data: User = await response.json();
  return data;
}

What if the API response can have different shapes?

In that case, you can use union types or create a base interface and extend it for different response shapes. For example:

interface BaseResponse {
  success: boolean;
}

interface UserResponse extends BaseResponse {
  data: User;
}

interface ErrorResponse extends BaseResponse {
  error: string;
}

type ApiResponse = UserResponse | ErrorResponse;