Progress

So far we've made a silly little app in typescript and you've learned how to use Typescript with useState, Event handlers, API response data, and Functional Component Props.

Let's get a little more advanced. I've created a mock API here

It has two endpoints: and You can check out the responses in the browser to see the structure of each response. Just like before- you can turn those into types or interfaces. I've gone ahead and done that here- but expanded on the concepts a bit:

interface BaseDB {
  id: number;
  createdAt: Date;
}
interface StoreItem extends BaseDB {
  tag: "store";
  name: string;
  price: number;
  description: string;
}
interface VehicleItem extends BaseDB {
  tag: "car";
  model: string;
  color: string;
  make: string;
  type: VehicleType;
}
export type VehicleType =
  | "Sedan"
  | "SUV"
  | "Coupe"
  | "Convertible"
  | "Hatchback";

Here I've used the 'extends' keyword. If you're familiar with classes, this immediately makes sense. If not- then don't worry. It's a simple concept. extends BaseDB, which means has all the types inside of PLUS everything we've outlined inside of itself. I did this because our responses have overlap. Both of our endpoints have a 'createdAt' and 'id' column. So instead of writing it twice- you can just 'extend' another interface.

You'll see we have a which is a 'union type' that can only be "Sedan", "Suv", "Coupe", "Convertible", or "Hatchback". If we know the available options ahead of time- it can be useful and nice for autocomplete to fill these types of union types out. It can prevent you from inserting invalid data- or searching for values that don't exist.

You'll also see a key in each Item type. This will let us create a 'tagged union'. The 'tag' is a harcoded value that you can use inside your functions when dealing with these types. This should be used sparingly- but can be useful.

Here's how we can use this 'tagged union' and 'tag' key in a function:

// Create the tagged union
export type Item = StoreItem | VehicleItem;

export async function getItemById<T extends Item>(
  endpoint: T["tag"],
  id: number
): Promise<T> {
  const baseUrl = "https://64dc6aade64a8525a0f6740e.mockapi.io/api/v1/";
  const url = `${baseUrl}${endpoint}/${id}`;
  const response = await fetch(url);
  const item = await response.json();
  return item;
}

This creates a 'Generic' function that we can use for both the and type. This gives us autocomplete for the endpoint:

And if we properly type the Generic, typescript can give us autocomplete for the return value, too:

That's an interesting feature- but we could also do it a better way with overloads instead of 'tags':

async function getItem( endpoint:"store",id:number): Promise<StoreItem>;
async function getItem( endpoint:"car",id:number): Promise<VehicleItem>;

async function getItem(endpoint: any,id:number) {
  const baseUrl = "https://64dc6aade64a8525a0f6740e.mockapi.io/api/v1/";
  const url = `${baseUrl}${endpoint}/${id}`;
  const response = await fetch(url);
  const item = await response.json();
  return item;
}

Overloads let us describe different ways a function can take shape. The first way we described was with an 'endpoint' argument of and a return value of Promise<StoreItem>. The second was was with an endpoint of and a return value of Promise<VehicleItem>.

Then we write the actual function. Now whenever that function is used, Typescript will know based on the 'endpoint' argument, what type of return type to expect.

Overloading functions is a feature of vanilla Javascript- but becomes even more powerful with typescript.

Now we don't even need to be explicit with the Generic type when we call the function- but we still get all the benefits: