Make a note of the keyword infer to avoid forgetting it later. It's a bit hard to understand. inferinfer 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 toUnderstanding 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:
|
Recently, due to business adjustments in the comp...
During normal project development, if the MySQL v...
Table of contents 1. What is redux? 2. The princi...
1. Regular expression matching ~ for case-sensiti...
Installation path: /application/mysql-5.5.56 1. P...
Effect: css: .s_type { border: none; border-radiu...
1. Business Background Using a mask layer to shie...
Write configuration files in server.xml and conte...
The JavaScript hasOwnProperty() method is the pro...
Introduction The Docker-Compose project is an off...
I would like to share the installation and config...
Connecting to MySQL Here I use navicat to connect...
Serialization implementation InnoDB implements se...
environment Centos 6.6 MySQL 5.7 Install If the s...
<br />The official version of Baidu Encyclop...