In-depth understanding of the use of the infer keyword in typescript

In-depth understanding of the use of the infer keyword in typescript

Make a note of the keyword infer to avoid forgetting it later. It's a bit hard to understand.

infer

infer is a new keyword added in TypeScript 2.8.

infer can be used in the extends clause of the conditional type to reference this inferred type variable in the real branch to infer the type to be inferred.

For example: Use infer to infer the return value type of a function

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

type fn = () => number
type fnReturnType = ReturnType<fn> // number

In this example,

The form T extends U ? X : Y is a conditional type.

infer R represents the return value type to be inferred. If T is a function (...args: any[]) => infer R, it returns the return value R of the function, otherwise it returns any.

Case: Deepen your understanding

Unwinding a Promise

// promise response type type PromiseResType<T> = T extends Promise<infer R> ? R : T

// Verify async function strPromise() {
  return 'string promise'
}

interface Person {
  name: string;
  age: number;
}
async function personPromise() {
  return {
    name: 'p',
    age: 12
  } as Person
}

type StrPromise = ReturnType<typeof strPromise> // Promise<string>
// Inverse type StrPromiseRes = PromiseResType<StrPromise> // str

type PersonPromise = ReturnType<typeof personPromise> // Promise<Person>
// Inverse type PersonPromiseRes = PromiseResType<PersonPromise> // Person

Inverse function input type

type Fn<A extends any[]> = (...args: A) => any
type FnArgs<T> = T extends Fn<infer A> ? A : any

function strFn (name: string) {

}

type StrFn = FnArgs<typeof strFn> // [string]

Tuple to union, such as: [string, number] -> string | number

type ElementOf<T> = T extends Array<infer E> ? E : never

type TTuple = [string, number];

type ToUnion = ElementOf<ATuple>; // string | number

new Operator

// Get parameter type type ConstructorParameters<T extends new (...args: any[]) => any> = T extends new (...args: infer P) => any ? P : never;

// Get instance type type InstanceType<T extends new (...args: any[]) => any> = T extends new (...args: any[]) => infer R ? R : any;

class TestClass {

  constructor(
    public name: string,
    public string: number
  ) {}
}

type Params = ConstructorParameters<typeof TestClass>; // [string, numbder]

type Instance = InstanceType<typeof TestClass>; // TestClass

React - Reducer

//Define function useReducer<R extends Reducer<any, any>, I>(
  reducer: R,
  // ReducerState inferred type initializerArg: I ​​& ReducerState<R>,
  initializer: (arg: I ​​& ReducerState<R>) => ReducerState<R>
): [ReducerState<R>, Dispatch<ReducerAction<R>>];

// infer infers type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any>
  ? S
  : never;
// Reducer type type Reducer<S, A> = (prevState: S, action: A) => S;


// Using reducer
const reducer = (x: number) => x + 1;
const [state, dispatch] = useReducer(reducer, '');
// Argument of type "" is not assignable to parameter of type 'number'.

vue3 - ref

export interface Ref<T = any> {
  [isRefSymbol]: true
  value: T
}

export function ref<T>(value: T): T extends Ref ? T : Ref<UnwrapRef<T>>

export type UnwrapRef<T> = {
  cRef : T extends ComputedRef<infer V> ? UnwrapRef<V> : T
  ref: T extends Ref<infer V> ? UnwrapRef<V> : T
  array: T
  object: { [K in keyof T]: UnwrapRef<T[K]> }
}[T extends ComputedRef<any>
  ? 'cRef'
  : T extends Array<any>
    ? 'array'
    : T extends Ref | Function | CollectionTypes | BaseTypes
      ? 'ref' // bail out on types that shouldn't be unwrapped
      : T extends object ? 'object' : 'ref']


// Using const count = ref({
  foo: ref('1'),
  bar: ref(2)
})

// Inferred const count: Ref<{
  foo: string;
  bar: number;
}>

const count = ref(2) // Ref<number>

const count = ref(ref(2)) // Ref<number>

refer to

Understanding the infer keyword in TypeScript

Vue3 Follow You Yuxi to learn TypeScript Ref type from scratch

Using TypeScript (V) ---- infer

This concludes this article on in-depth understanding of the use of the infer keyword in typescript. For more related typescript infer keyword content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • React+TypeScript project construction case explanation
  • TypeScript function definition and use case tutorial
  • Learn about TypeScript data types in one article
  • Detailed explanation of as, question mark and exclamation mark in Typescript
  • Teach you how to use webpack to package and compile TypeScript code
  • Why TypeScript's Enum is problematic
  • A tutorial on how to install, use, and automatically compile TypeScript
  • TypeScript interface definition case tutorial

<<:  Tutorial on installing and configuring Tomcat on Alibaba Cloud Server and adding external network access ports

>>:  A brief discussion on the differences between the three major databases: Mysql, SqlServer, and Oracle

Recommend

How to handle super large form examples with Vue+ElementUI

Recently, due to business adjustments in the comp...

The pitfalls and solutions caused by the default value of sql_mode in MySQL 5.7

During normal project development, if the MySQL v...

Explanation of the working principle and usage of redux

Table of contents 1. What is redux? 2. The princi...

Implementation of Nginx forwarding matching rules

1. Regular expression matching ~ for case-sensiti...

How to add interface listening mask in Vue project

1. Business Background Using a mask layer to shie...

Docker-compose image release process analysis of springboot project

Introduction The Docker-Compose project is an off...

MySQL 8.0.13 installation and configuration method graphic tutorial under win10

I would like to share the installation and config...

Docker deploys mysql remote connection to solve 2003 problems

Connecting to MySQL Here I use navicat to connect...

How InnoDB implements serialization isolation level

Serialization implementation InnoDB implements se...

How to install Mysql5.7 in Centos6

environment Centos 6.6 MySQL 5.7 Install If the s...

Discuss the development trend of Baidu Encyclopedia UI

<br />The official version of Baidu Encyclop...