Log in to GraphQL Editor
Advanced typescript tutorial - infer
Artur

Artur Czemiel

12/5/2018

Advanced typescript tutorial - infer

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

infer

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

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

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

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
};

Intellisense for props works like this: intellisense.webp

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

Check out our other blogposts

Apollo + GraphQL Codegen implementation into a React Native application
Marcin Falkowski
Marcin Falkowski
Apollo + GraphQL Codegen implementation into a React Native application
6 min read
12 days ago
Elide - Opinionated APIs for web & mobile
Tomek Poniatowicz
Tomek Poniatowicz
Elide - Opinionated APIs for web & mobile
2 min read
over 3 years ago
GraphQL Server under 5 minutes - TypeScript
Tomek Poniatowicz
Tomek Poniatowicz
GraphQL Server under 5 minutes - TypeScript
11 min read
over 4 years ago

Ready for take-off?

Elevate your work with our editor that combines world-class visual graph, documentation and API console

Get Started with GraphQL Editor