typescript中高级类型Record详解

 更新时间:2022年11月17日 11:25:55   作者:问白  
这篇文章主要介绍了typescript中高级类型Record,ts文档上对Record的介绍不多,但却经常用到,Record是一个很好用的工具类型,本文给大家详细讲解需要的朋友可以参考下

ts文档上对Record的介绍不多,但却经常用到,Record是一个很好用的工具类型。
他会将一个类型的所有属性值都映射到另一个类型上并创造一个新的类型,先看下Record的源码。

/**
 * Construct a type with a set of properties K of type T
 */
type Record<K extends keyof any, T> = {
    [P in K]: T;
};

好像源码也比较简单,即将K中的每个属性([P in K]),都转为T类型。常用的格式如下:

type proxyKType = Record<K,T>

会将K中的所有属性值都转换为T类型,并将返回的新类型返回给proxyKType,K可以是联合类型、对象、枚举…
看几个demo.
demo1:

type petsGroup = 'dog' | 'cat' | 'fish';
interface IPetInfo {
    name:string,
    age:number,
}

type IPets = Record<petsGroup, IPetInfo>;

const animalsInfo:IPets = {
    dog:{
        name:'dogName',
        age:2
    },
    cat:{
        name:'catName',
        age:3
    },
    fish:{
        name:'fishName',
        age:5
    }
}

可以看到 IPets 类型是由 Record<petsGroup, IPetInfo>返回的。将petsGroup中的每个值(‘dog’ | ‘cat’ | ‘fish’)都转为 IPetInfo 类型。
当然也可以自己在第一个参数后追加额外的值,看下面demo2

type petsGroup = 'dog' | 'cat' | 'fish';
interface IPetInfo {
    name:string,
    age:number,
}

type IPets = Record<petsGroup | 'otherAnamial', IPetInfo>;

const animalsInfo:IPets = {
    dog:{
        name:'dogName',
        age:2
    },
    cat:{
        name:'catName',
        age:3
    },
    fish:{
        name:'fishName',
        age:5
    },
    otherAnamial:{
        name:'otherAnamialName',
        age:10
    }
}

可以看到在demo1的基础上,demo2在
type IPets = Record<petsGroup | ‘otherAnamial’, IPetInfo>; 中除了petsGroup的值之外,还追加了 'otherAnamial’这个值。
下面看一个略复杂的例子,用axios将http的几个请求封装一下,使用Record定义每个请求方法的形状。

enum IHttpMethods {
    GET = 'get',
    POST = 'post',
    DELETE = 'delete',
    PUT = 'put',
}

const methods = ["get", "post", "delete", "put"];

interface IHttpFn {
    <T = any>(url: string, config?: AxiosRequestConfig): Promise<T>
}

type IHttp = Record<IHttpMethods, IHttpFn>;

const httpMethods: IHttp = methods.reduce((map: any, method: string) => {
    map[method] = (url: string, options: AxiosRequestConfig = {}) => {
        const { data, ...config } = options;
        return (axios as any)[method](url, data, config)
            .then((res: AxiosResponse) => {
                if (res.data.errCode) {
                    //todo somethins
                } else {
                    //todo somethins
                }
            });
    }
    return map
}, {})

export default httpMethods;

上面这个demo就先枚举除了几个常见的http请求的方法名,而每个方法都接受请求的url以及可选参数config,然后每个方法返回的都是一个Promise。这种业务常见使用Record再合适不过了。使用下面的方式定义了每个方法的形状。

type IHttp = Record<IHttpMethods, IHttpFn>;

最后只需要遍历一下几个方法,对每个方法有各自的具体实现即可。这里是用了reduce的特性,遍历了一下数据,然后将所有的方法体放在一个对象中,最终结果用 httpMethods接受,再将httpMethods对外暴露出去,那么外面就可直接调用了。这里把一些业务的部分抽离出去了(比如设置请求头、设置token之类的),只是为了简单说明一个比较合适使用Record的业务场景。

到此这篇关于typescript中高级类型Record的文章就介绍到这了,更多相关typescript高级类型Record内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Iframe thickbox2.0使用的方法

    Iframe thickbox2.0使用的方法

    一个小项目中用到,奉命进行修改,定位到
    2009-03-03
  • JavaScript统计字符出现次数

    JavaScript统计字符出现次数

    这篇文章主要为大家详细介绍了JavaScript字符统计出现次数,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • json实现添加、遍历与删除属性的方法

    json实现添加、遍历与删除属性的方法

    这篇文章主要介绍了json实现添加、遍历与删除属性的方法,结合简单实例形式分析了json常见的添加、遍历与删除操作相关技巧,需要的朋友可以参考下
    2016-06-06
  • 微信小程序计算器实例详解

    微信小程序计算器实例详解

    这篇文章主要为大家详细介绍了微信小程序计算器实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • 详解JavaScript中关于this指向的4种情况

    详解JavaScript中关于this指向的4种情况

    这篇文章主要介绍了JavaScript中关于this指向的4种情况,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 为超链接加上disabled后的故事

    为超链接加上disabled后的故事

    为超链接加上disabled后的故事,学习js的朋友可以参考下对超链接的一些控制。
    2010-12-12
  • bootstrap模态框消失问题的解决方法

    bootstrap模态框消失问题的解决方法

    这篇文章主要为大家详细整理了bootstrap模态框消失不消失各种问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 微信小程序开发之路由切换页面重定向问题

    微信小程序开发之路由切换页面重定向问题

    这篇文章主要介绍了微信小程序开发之路由切换页面重定向问题,又通过实例代码给大家介绍了微信小程序的路由跳转方法,需要的朋友可以参考下
    2018-09-09
  • js深度合并两个数组对象的实现

    js深度合并两个数组对象的实现

    这篇文章主要介绍了js深度合并两个数组对象的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • JavaScript中这6个新特性你都了解了吗

    JavaScript中这6个新特性你都了解了吗

    作为一门不断演进的语言,JavaScript每年都会引入新特性,这篇文章主要为大家整理了一些个人认为特别有用的新JavaScript特性,以及一些补充的实例代码,希望对大家有所帮助
    2024-01-01

最新评论