React Components as TypeScript Generic Functions

Let’s say you want a component that will render a list of things. You want it to be flexible, to be able to render any sort of thing, like this:

Or this:

The implementation might look something like this:

The problem, of course, is that the type of the variable in the renderItem callback will be any.

So it failed to pick up on my proice typo that you spotted because you are a diligent code reader.

We could manually tell TypeScript that the object being passed to renderItem is…