Understanding Typescript Infer

This article explains how the infer keyword is used in TypeScript to find a type from another type using conditional types. The article includes code snippets and examples to demonstrate the usage of infer.

Typescripts infer

The infer keyword in TypeScript is used in conditional types to find a type from another type. This way, you can take a type from a group of types and use it in some other part of the type definition. This can be handy for making general types that work with many different input types.

In my previous article on conditional types in typescript, there were some example snippets like:

type UnArray<T> = T extends any[] ? T[number] : T

The above snippet defines a generic type called UnArray that takes a type T as input. If T is an array type, then the type of its elements is returned. Otherwise, the input type T is returned. A key piece of the snippet is that T[number] is an indexed access type. This allows the user to extract a specific element type from an array or a tuple type by indexing it with the number type. Indexed access types are a powerful feature of TypeScript that can be used to extract specific types from other types.

However, there is a cleaner approach to extracting the type of an array with the infer keyword:

type UnArray<T> = T extends Array<infer U> ? U : T;

type Users = {
	name: string,
	age: number,
	city: string
}[]
type User = UnArray<Users> 
/**  {
	name: string,
	age: number,
	city: string
} */
type Str = UnArray<string> // string

The UnArray type is similar to the one in the previous example. It takes a type T as input. We use the [extends keyword](https://medium.com/@developer.olly/typescript-extends-keyword-explained-101b1636c8e4) to check if T is an array type. If it is, we use the infer keyword to capture the type of the array's elements in a new type variable U which we define as the type(s) inside the array. We then return this type variable as the result of the conditional type. If T is not an array type, we simply return T itself as the result of the conditional type. Let’s take another example from the last article:

[type Args<T> = T extends new (...args: any) => any
  ? ConstructorParameters<T>
  : T;](<https://www.notion.so/Understanding-Typescript-Infer-d33f089bfee74cbcba9322a9134679e3>)

Args is a generic type that takes a type T as a parameter. The conditional type checks whether T extends a constructor function that takes any number of arguments ...args and returns any type. If the condition is true, then the type evaluates to the tuple of argument types [ConstructorParameters<T>](https://www.typescriptlang.org/docs/handbook/utility-types.html#constructorparameterstype) of this constructor function. Otherwise, it evaluates to T. We can refactor this using infer to:

type Args<T> = T extends new (...args: infer P) => any ? P : never

class MyClass {
  constructor(name: string, age: number) {}
}
type MyClassArgs = Args<typeof MyClass>; // [string, number]

In this case, rather than using any on args, we infer args’ type to P and return P if the condition is true.

To sum up, the inferkeyword in TypeScript is a useful feature. It allows developers to extract types from other types, making code simpler and more reusable. The examples in this article demonstrate how to infer can be used in conditional types to find a type from another type. Use the infer keyword in your code to improve your TypeScript. Thanks for reading