What is the use of Infer Keyword in TypeScript ?

The infer keyword in TypeScript is primarily associated with conditional types and is used to capture and assign a type to a type parameter within the scope of a conditional type. It allows TypeScript to infer the type from a given expression and use it within the definition of a more complex type.

Use Case: Conditional Types

Example without infer: This example shows without using infer, we would need to explicitly specify the type of R in the conditional type, losing the ability to dynamically capture the return type of exampleFunction.

Javascript

type ExtractReturnTypeWithoutInfer<T> = T extends
    (...args: any[]) => infer R ? R : never;

function exampleFunction(): string {
    return "Hello, TypeScript!";
}

type ResultWithoutInfer =
    ExtractReturnTypeWithoutInfer<typeof exampleFunction>;
// ResultWithoutInfer is 'string' in this case

Expected Behavior: The ResultWithoutInfer type is inferred to be 'string' because exampleFunction returns a string.

Example with infer: In this example, the infer keyword allows TypeScript to automatically deduce and assign the return type of exampleFunction to the type parameter R. This makes the ExtractReturnTypeWithInfer type more flexible and capable of adapting to different functions.

Javascript

type ExtractReturnTypeWithInfer<T> = T extends
    (...args: any[]) => infer R ? R : never;

function exampleFunction(): string {
    return "Hello, TypeScript!";
}

type ResultWithInfer =
    ExtractReturnTypeWithInfer<typeof exampleFunction>;
// ResultWithInfer is 'string' in this case

Expected Behavior: Similar to the previous example, the ResultWithInfer type is also inferred to be 'string' because the infer keyword allows TypeScript to automatically deduce and assign the return type of exampleFunction to the type parameter R.

Advantages:

1. Dynamic Inference:
   • The infer keyword enables TypeScript to dynamically infer and assign types based on the structure of the code.
2. Conditional Typing:
   • infer is commonly used in conditional types to capture and use types within the scope of the condition.
3. Flexible Type Inference:
   • It provides a level of flexibility by allowing TypeScript to infer types in a way that adapts to the actual structure and context of the code.

Use Case: Template Literal Types

The infer keyword in TypeScript extends its capabilities beyond conditional types, allowing for dynamic extraction and manipulation of types within template literal types. By leveraging infer within template literal types, developers can create sophisticated type mappings and transformations, enhancing type safety and expressiveness in TypeScript.

Example: Utilizing infer within a template literal type to extract substrings from a given string literal type.

JavaScript

type ExtractWords<S extends string> = S extends `${infer Word} 
    ${infer Rest}` ? [Word, ...ExtractWords<Rest>] : [S];
type MyString = "Hello TypeScript World";

// Extracting words from MyString
type Words = ExtractWords<MyString>; 

Expected Behavior: The ExtractWords type recursively extracts individual words from the input string literal type S using infer, resulting in an array of words.

Advantages:

1. Fine-Grained Type Manipulation: infer within template literal types allows for fine-grained manipulation of string literal types, enabling complex type transformations.
2. Dynamic Typing: Developers can dynamically derive and assign types within template literal types, enhancing type inference and adaptability.
3. Enhanced Readability: By utilizing template literal types with infer, code becomes more expressive and readable, facilitating understanding and maintenance.