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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript实现颜色查看器

    JavaScript实现颜色查看器

    这篇文章主要为大家详细介绍了JavaScript实现颜色查看器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • js sort 二维数组排序的用法小结

    js sort 二维数组排序的用法小结

    我们知道在js中默认提供了sort函数,但是这个函数默认是按照数组内容的ascii码升序进行排列的,如果我们要对二维数组排序要如何做呢
    2014-01-01
  • 关于js中e.preventDefault()的具体使用

    关于js中e.preventDefault()的具体使用

    本文主要介绍了关于js中e.preventDefault()的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • JS获取IP、MAC和主机名的五种方法

    JS获取IP、MAC和主机名的五种方法

    javascript获取客户端IP的小程序,下面的代码是我在所有windowsNT5.0及以上的系统上都测试通过的,喜欢的朋友可以收藏下
    2013-11-11
  • 根据身份证号自动输出相关信息(籍贯,出身日期,性别)

    根据身份证号自动输出相关信息(籍贯,出身日期,性别)

    为了减少客户的在页面的输入,做了这个效果,他可以根据用户输入的身份证号输出籍贯、出身日期、性别的相关信息,需要的朋友可以参考下
    2013-11-11
  • 深入解析JS实现3D标签云的原理与方法

    深入解析JS实现3D标签云的原理与方法

    这篇文章主要介绍了深入解析JS实现3D标签云的原理与方法,结合实例形式详细分析了3D标签云原理、实现技巧与相关操作注意事项,需要的朋友可以参考下
    2019-08-08
  • JavaScript变量or循环中的var和let详解

    JavaScript变量or循环中的var和let详解

    这篇文章主要介绍了JavaScript变量or循环中的var和let详解,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下
    2022-09-09
  • iframe窗口高度自适应的又一个巧妙实现思路

    iframe窗口高度自适应的又一个巧妙实现思路

    这篇文章主要介绍了实现iframe窗口高度自适应的又一个巧妙思路,需要的朋友可以参考下
    2014-04-04
  • JavaScript数组及常见操作方法小结

    JavaScript数组及常见操作方法小结

    这篇文章主要介绍了JavaScript数组及常见操作方法,结合实例形式总结分析了JavaScript数组的基本获取、添加、删除、排序、翻转等相关操作技巧,需要的朋友可以参考下
    2019-11-11
  • TypeScript中正确使用interface和type的方法实例

    TypeScript中正确使用interface和type的方法实例

    在ts中定义类型由两种方式:接口(interface)和类型别名(type alias),interface只能定义对象类型,下面这篇文章主要给大家介绍了关于TypeScript中正确使用interface和type的相关资料,需要的朋友可以参考下
    2021-09-09

最新评论