When working with APIs in React, it's crucial to define the expected shape of the data you receive. TypeScript allows you to describe exactly what your code expects from an API response, making your code safer and easier to maintain. Suppose you fetch a list of users from an API. Start by defining a type that represents what a single user object looks like, and then use this type when working with fetch.

Begin by creating a type for the user data. For instance, if each user has an id, name, and email, you can define:

type User = {
  id: number;
  name: string;
  email: string;
};

Next, when you call fetch, tell TypeScript what type of data you expect to receive. After fetching and parsing the JSON, use the User[] type to annotate the data:

async function fetchUsers(): Promise<User[]> {
  const response = await fetch("https://api.example.com/users");
  const data: User[] = await response.json();
  return data;
}

Using this type, TypeScript will check that you only access properties that exist on the User type. If you make a typo—such as writing user.emal instead of user.email—TypeScript will catch the error before you run your code.

When you use this data in a React component, TypeScript will ensure you only use the properties that are actually returned by the API, and that you handle the data safely. This helps prevent bugs caused by unexpected or missing fields.

TypeScript prevents common mistakes when handling API data by enforcing the types you define. If you try to access a property that doesn't exist on your type, or if you treat the data as the wrong shape, TypeScript will show an error. This is especially helpful when API responses change or when you work with unfamiliar endpoints. TypeScript also helps you remember to handle cases where data might be missing or in the wrong format, reducing runtime errors. By using types for your fetch responses, you make your code more predictable and robust.