深入理解typescript中的infer关键字的使用
发布时间：2022-02-22 13:51:49 所属栏目：语言 来源：互联网
导读：这篇文章给大家分享的是有关typescript中的infer关键字怎么用的内容，下文有一些infer关键字的使用实例，对大家学习和理解infer关键字有一定的帮助，感兴趣的朋友接下来一起跟随小编看看吧。 infer infer 是在 typescript 2.8中新增的关键字。 infer 可以在
|
这篇文章给大家分享的是有关typescript中的infer关键字怎么用的内容，下文有一些infer关键字的使用实例，对大家学习和理解infer关键字有一定的帮助，感兴趣的朋友接下来一起跟随小编看看吧。 infer infer 是在 typescript 2.8中新增的关键字。 infer 可以在 extends 条件类型的字句中，在真实分支中引用此推断类型变量，推断待推断的类型。 例如：用infer推断函数的返回值类型 type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any; type fn = () => number type fnReturnType = ReturnType<fn> // number 在这个例子中， T extends U ? X : Y的形式为条件类型。 infer R代表待推断的返回值类型，如果T是一个函数(...args: any[]) => infer R，则返回函数的返回值R，否则返回any 案例：加深理解 反解 Promise // promise 响应类型 type PromiseResType<T> = T extends Promise<infer R> ? 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<typeof strPromise> // Promise<string> // 反解 type StrPromiseRes = PromiseResType<StrPromise> // str type PersonPromise = ReturnType<typeof personPromise> // Promise<Person> // 反解 type PersonPromiseRes = PromiseResType<PersonPromise> // Person 反解函数入参类型 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 转 union ，如：[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 操作符 // 获取参数类型 type ConstructorParameters<T extends new (...args: any[]) => any> = T extends new (...args: infer P) => any ? P : never; // 获取实例类型 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 // 定义 function useReducer<R extends Reducer<any, any>, I>( reducer: R, // ReducerState 推断类型 initializerArg: I & ReducerState<R>, initializer: (arg: I & ReducerState<R>) => ReducerState<R> ): [ReducerState<R>, Dispatch<ReducerAction<R>>]; // infer推断 type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never; // Reducer类型 type Reducer<S, A> = (prevState: S, action: A) => S; // 使用 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'] // 使用 const count = ref({ foo: ref('1'), bar: ref(2) }) // 推断出 const count: Ref<{ foo: string; bar: number; }> const count = ref(2) // Ref<number> const count = ref(ref(2)) // Ref<number> 关于Typescript中的infer关键字的使用就介绍到这，上述实例具有一定的借鉴价值，感兴趣的朋友可以参考学习，希望能对大家学习infer关键字的使用有帮助，想要了解更多大家可以关注群英网络其它相关文章。 （编辑：信阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
