DEV Community

loading...
Cover image for TypeScript Tutorial - 'infer' keyword

TypeScript Tutorial - 'infer' keyword

aexol profile image Artur Czemiel Originally published at blog.graphqleditor.com Updated on ・2 min read

Hello, this is starting the article for advanced TypeScript tutorial series. Today I'll cover basic usage of:

infer
Enter fullscreen mode Exit fullscreen mode

For me, it was hard to understand at the beginning what I can really do with infer. Let's start with a really basic example.

type FlattenIfArray<T> = T extends (infer R)[] ? R : T
Enter fullscreen mode Exit fullscreen mode

So let's analyze this code:

  1. We check if our generic Type is the array
  2. If it is array extract the real type from it
  3. If it does not leave it as is

Still, it is not clear what infer is doing, so let's proceed with another example

type Unpromisify<T> = T extends Promise<infer R> ? R : T
Enter fullscreen mode Exit fullscreen mode

This one looks more clear as it doesn't have parenthesis:

  1. We check if type extends Promise
  2. If it does we extract the type from the promise
  3. If it does not leave it as is

See? If you use extends only just to check if the type is a promise you would use

type Unpromisify<T> = T extends Promise<any> ? T : never
Enter fullscreen mode Exit fullscreen mode

And in infer instead of any keyword, you infer the value from type. Let's try with more advanced types then:

type FuncWithOneObjectArgument<P extends { [x: string]: any }, R> = (
  props: P
) => R;

type DestructuredArgsOfFunction<
  F extends FuncWithOneObjectArgument<any, any>
> = F extends FuncWithOneObjectArgument<infer P, any> ? P : never;

const myFunction = (props: { x: number; y: number }): string => {
  return "OK";
};

const props: DestructuredArgsOfFunction<typeof myFunction> = {
  x: 1,
  y: 2
};
Enter fullscreen mode Exit fullscreen mode

Intellisense for props works like this:

You can make use of it inferring React Component props for example or another function that uses destructured params.

Discussion

pic
Editor guide
Collapse
marzelin profile image
Marcin Zielinski

If you want the type for the first argument to a function, this code does the job:

type Arg1<T extends Function> = T extends (a1: infer A1) => any ? A1 : never;
Enter fullscreen mode Exit fullscreen mode
Collapse
noriste profile image
Stefano Magni

Thanks, Artur! Clear and effective article!