深入理解typescript中的infer关键字的使用深入理解typescript中的infer关键

【深入理解typescript中的infer关键字的使用】infer 这个关键字，整理记录一下，避免后面忘记了。有点难以理解呢。
infer
infer 是在 typescript 2.8中新增的关键字。
infer 可以在 extends 条件类型的字句中，在真实分支中引用此推断类型变量，推断待推断的类型。
例如：用infer推断函数的返回值类型

type ReturnType = T extends (...args: any[]) => infer R ? R : any; type fn = () => numbertype fnReturnType = ReturnType // number

在这个例子中，
T extends U ? X : Y的形式为条件类型。
infer R代表待推断的返回值类型，如果T是一个函数(...args: any[]) => infer R，则返回函数的返回值R，否则返回any
案例：加深理解
反解 Promise

// promise 响应类型type PromiseResType = T extends Promise ? R : T// 验证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 // Promise// 反解type StrPromiseRes = PromiseResType // strtype PersonPromise = ReturnType // Promise// 反解type PersonPromiseRes = PromiseResType // Person

反解函数入参类型

type Fn = (...args: A) => anytype FnArgs = T extends Fn ? A : anyfunction strFn (name: string) {}type StrFn = FnArgs // [string]

tuple 转 union ，如：[string, number] -> string | number

type ElementOf = T extends Array ? E : nevertype TTuple = [string, number]; type ToUnion = ElementOf; // string | number

new 操作符

// 获取参数类型type ConstructorParameters any> = T extends new (...args: infer P) => any ? P : never; // 获取实例类型type InstanceType any> = T extends new (...args: any[]) => infer R ? R : any; class TestClass {constructor(public name: string,public string: number) {}}type Params = ConstructorParameters; // [string, numbder]type Instance = InstanceType; // TestClass

react - reducer

// 定义function useReducer(reducer: R,// ReducerState 推断类型initializerArg: I & ReducerState,initializer: (arg: I & ReducerState) => ReducerState): [ReducerState, Dispatch>]; // infer推断type ReducerState = R extends Reducer? S: never; // Reducer类型type Reducer = (prevState: S, action: A) => S; // 使用 reducerconst 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 {[isRefSymbol]: truevalue: T}export function ref(value: T): T extends Ref ? T : Ref>export type UnwrapRef = {cRef: T extends ComputedRef ? UnwrapRef : Tref: T extends Ref ? UnwrapRef : Tarray: Tobject: { [K in keyof T]: UnwrapRef }}[T extends ComputedRef? 'cRef': T extends Array? 'array': T extends Ref | Function | CollectionTypes | BaseTypes? 'ref' // bail out on types that shouldn't be unwrapped: T extends object ? 'object' : 'ref']// 使用const count = ref({foo: ref('1'),bar: ref(2)})// 推断出const count: Ref<{foo: string; bar: number; }>const count = ref(2) // Refconst count = ref(ref(2)) // Ref

参考理解TypeScript中的infer关键字
Vue3 跟着尤雨溪学 TypeScript 之 Ref 类型从零实现
巧用 TypeScript（五）---- infer
到此这篇关于深入理解typescript中的infer关键字的使用的文章就介绍到这了,更多相关typescript infer关键字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！