快捷導(dǎo)航

typescript中高級(jí)類型Record詳解

更新時(shí)間：2022年11月17日 11:25:55 作者：?jiǎn)柊?

這篇文章主要介紹了typescript中高級(jí)類型Record,ts文檔上對(duì)Record的介紹不多，但卻經(jīng)常用到，Record是一個(gè)很好用的工具類型，本文給大家詳細(xì)講解需要的朋友可以參考下

ts文檔上對(duì)Record的介紹不多，但卻經(jīng)常用到，Record是一個(gè)很好用的工具類型。
他會(huì)將一個(gè)類型的所有屬性值都映射到另一個(gè)類型上并創(chuàng)造一個(gè)新的類型，先看下Record的源碼。

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

好像源碼也比較簡(jiǎn)單，即將K中的每個(gè)屬性([P in K]),都轉(zhuǎn)為T類型。常用的格式如下：

type proxyKType = Record<K,T>

會(huì)將K中的所有屬性值都轉(zhuǎn)換為T類型，并將返回的新類型返回給proxyKType，K可以是聯(lián)合類型、對(duì)象、枚舉…
看幾個(gè)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中的每個(gè)值(‘dog’ | ‘cat’ | ‘fish’)都轉(zhuǎn)為 IPetInfo 類型。
當(dāng)然也可以自己在第一個(gè)參數(shù)后追加額外的值，看下面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的基礎(chǔ)上，demo2在
type IPets = Record<petsGroup | ‘otherAnamial’, IPetInfo>; 中除了petsGroup的值之外，還追加了 'otherAnamial’這個(gè)值。
下面看一個(gè)略復(fù)雜的例子，用axios將http的幾個(gè)請(qǐng)求封裝一下，使用Record定義每個(gè)請(qǐng)求方法的形狀。

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;

上面這個(gè)demo就先枚舉除了幾個(gè)常見的http請(qǐng)求的方法名，而每個(gè)方法都接受請(qǐng)求的url以及可選參數(shù)config,然后每個(gè)方法返回的都是一個(gè)Promise。這種業(yè)務(wù)常見使用Record再合適不過了。使用下面的方式定義了每個(gè)方法的形狀。

type IHttp = Record<IHttpMethods, IHttpFn>;

最后只需要遍歷一下幾個(gè)方法，對(duì)每個(gè)方法有各自的具體實(shí)現(xiàn)即可。這里是用了reduce的特性，遍歷了一下數(shù)據(jù)，然后將所有的方法體放在一個(gè)對(duì)象中，最終結(jié)果用 httpMethods接受，再將httpMethods對(duì)外暴露出去，那么外面就可直接調(diào)用了。這里把一些業(yè)務(wù)的部分抽離出去了(比如設(shè)置請(qǐng)求頭、設(shè)置token之類的)，只是為了簡(jiǎn)單說明一個(gè)比較合適使用Record的業(yè)務(wù)場(chǎng)景。

到此這篇關(guān)于typescript中高級(jí)類型Record的文章就介紹到這了,更多相關(guān)typescript高級(jí)類型Record內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: