DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Lucas Paganini
Lucas Paganini

Posted on • Originally published at lucaspaganini.com

TypeScript infer Keyword

TypeScript infer Keyword with examples


See this and many other articles at lucaspaganini.com

In this article, I'll show you how we can use the infer keyword to extract types from generics. Let's use Promise as an example.

type UnpackPromise<P> = ✨magic✨

UnpackPromise<Promise<string>> // <- string
UnpackPromise<Promise<number>> // <- number
UnpackPromise<Promise<boolean>> // <- boolean
Enter fullscreen mode Exit fullscreen mode

If P is a subset of a Promise of T, we want to return T. Otherwise, we return never, which represents something that should never happen.

type UnpackPromise<P> = P extends Promise<T> ? T : never;
Enter fullscreen mode Exit fullscreen mode

But that doesn't work, because T doesn't exist yet.

Let's compare that to a function, and you'll see what I mean.

const UnpackPromise = (P) =>
  P === Promise<T>
    ? T
    : never
Enter fullscreen mode Exit fullscreen mode

P is an argument, but where is T coming from?

In a regular function, you would solve this by creating a variable called T. Something like this:

const UnpackPromise = (P) =>
  P === Promise<var T>
    ? T
    : never
Enter fullscreen mode Exit fullscreen mode

And that's where the infer keyword comes into play. It works kinda like a type variable declaration.

type UnpackPromise<P> = P extends Promise<infer T> ? T : never;
Enter fullscreen mode Exit fullscreen mode

If P is a subset of Promise, we tell TypeScript to infer the inner type of that Promise and save it in a type called T. Then, we return T.

type UnpackPromise<P> =
  P extends Promise<infer T>
    ? T
    : never

UnpackPromise<Promise<string>> // <- string
UnpackPromise<Promise<number>> // <- number
UnpackPromise<Promise<boolean>> // <- boolean
UnpackPromise<Promise<Array<Date>>> // <- Array<Date>
UnpackPromise<Promise<boolean | string>> // <- boolean | string
Enter fullscreen mode Exit fullscreen mode

Conclusion

References are below.

There's a lot more to the infer keyword, but that's what I could fit in a one-minute video. If you want to dive deeper into TypeScript, I have a series about TypeScript narrowing. You can read the full series, for free, on my blog.

Leave a like, have a great day and see you soon.

References

  1. Inferring Within Conditional Types TypeScript Documentation
  2. The never type TypeScript Documentation

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›