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

 更新时间:2021年06月27日 10:27:18   作者:ESnail  
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关键字

Vue3 跟着尤雨溪学 TypeScript 之 Ref 类型从零实现

巧用 TypeScript(五)---- infer

到此这篇关于深入理解typescript中的infer关键字的使用的文章就介绍到这了,更多相关typescript infer关键字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • window.open以post方式将内容提交到新窗口

    window.open以post方式将内容提交到新窗口

    最近在做web项目,碰到需要跨页面传递参数的功能,就是那种需要把当前页面的内容带到新开的子窗体中,以前的做法是传一个id过去,然后在新窗口中去读数据库的内容;比较有意思的是直接通过调用form的submit方法不能触发onsubmit事件,查看了帮助文档,必须手动的触发,否则只能看到页面刷新而没有打开新窗口
    2012-12-12
  • 基于insertBefore制作简单的循环插空效果

    基于insertBefore制作简单的循环插空效果

    这是一个基于insertBefore制作简单的循环插空效果,实现的数字下面循环插空效果,给需要的朋友分享。
    2015-09-09
  • 分享一个原生的JavaScript拖动方法

    分享一个原生的JavaScript拖动方法

    本文给大家分享的是基于JavaScript的setCapture方法实现的拖动效果,非常的简单实用,有需要的小伙伴可以参考下
    2016-09-09
  • 最常见和最有用的字符串相关的方法详解

    最常见和最有用的字符串相关的方法详解

    本文主要介绍了最常见和最有用的字符串相关的方法,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • js实现音乐播放器

    js实现音乐播放器

    这篇文章主要为大家详细介绍了js实现音乐播放器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • jQuery $.data()方法使用注意细节

    jQuery $.data()方法使用注意细节

    前段时间同事在群里对jQuery里的.data()方法大发牢骚,接下来介绍jQuery $.data()方法使用注意细节,需要了解的朋友可以参考下
    2012-12-12
  • JS实现三个层重叠点击互相切换的方法

    JS实现三个层重叠点击互相切换的方法

    这篇文章主要介绍了JS实现三个层重叠点击互相切换的方法,涉及JavaScript动态操作页面定位属性的相关技巧,需要的朋友可以参考下
    2015-10-10
  • babel7按需加载polyfill示例详解

    babel7按需加载polyfill示例详解

    这篇文章主要为大家介绍了babel7按需加载polyfill示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • js中flexible.js实现淘宝弹性布局方案

    js中flexible.js实现淘宝弹性布局方案

    这篇文章主要为大家详细介绍了js中flexible.js实现淘宝弹性布局方案,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 微信小程序实现本地分页加载

    微信小程序实现本地分页加载

    这篇文章主要为大家详细介绍了微信小程序实现本地分页加载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08

最新评论