Know when to use generics

it's sometimes hard to work out if you should use a generic or if you shouldn't.

The first question I want you to ask yourself when you get to that point is are all the elements known when I make the function? Here in this getDisplayName function we take in an Animal and we return a displayName based on the animal's name.

interface Animal {
  name: string
}

interface Human {
  firstName: string
  lastName: string
}

export const getDisplayName = (item: Animal): { displayName: string } => {
  return {
    displayName: item.name,
  }
}

But what if we add a bit of dynamism here? Let's make it take in either an Animal or a Human

export const getDisplayName = (
  item: Animal | Human
): { displayName: string } => {
  return {
    displayName: item.name,
  }
}

But really, we still know all the elements and their types before we get into the function call. So what you'd probably do is this:

export const getDisplayName = (
  item: Animal | Human
): { displayName: string } => {
  if ("name" in item) {
    return {
      displayName: item.name,
    }
  }
}

And we'd do the same thing for the Human firstName and lastName and concatenate them together.

When you start needing a generic is when you truly don't know what type is going to be passed into the function or you have things inside the function that rely on knowing that type

Let's imagine that we do need to add a generic here in getDisplayName. We'll use TItem and extend Animal or Human.

export const getDisplayName = <TItem extends Animal | Human>( 

Then in the return type we'll say TItem extends Human and returns a humanName. Otherwise, we'll return an animalName. And then inside the function body we'll return the animalName.

export const getDisplayName = <TItem extends Animal | Human>(
  item: Animal | Human
): TItem extends Human ? { humanName: string } : { animal: string } => {
  if ("name" in item) {
    return {
      animalName: item.name,
    }
  }
}

What that means is we get a different return type based on what we pass in. So when we pass in a name we get an animalName, and when we pass in a firtName and lastName we get a humanName back.

This is where you actually need a generic. Inside the function it has to decide what it returns. If we just did a union type, it wouldn't repsond to what gets passed in.

So this is a way to really hack TypeScript's inference and get that information so you can use it in your return types.