快捷導(dǎo)航

typescript中高級類型Record詳解

更新時間：2022年11月17日 11:25:55 作者：問白

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

ts文檔上對Record的介紹不多，但卻經(jīng)常用到，Record是一個很好用的工具類型。
他會將一個類型的所有屬性值都映射到另一個類型上并創(chuàng)造一個新的類型，先看下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]),都轉(zhuǎn)為T類型。常用的格式如下：

type proxyKType = Record<K,T>

會將K中的所有屬性值都轉(zhuǎn)換為T類型，并將返回的新類型返回給proxyKType，K可以是聯(lián)合類型、對象、枚舉…
看幾個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’)都轉(zhuǎn)為 IPetInfo 類型。
當(dāng)然也可以自己在第一個參數(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’這個值。
下面看一個略復(fù)雜的例子，用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以及可選參數(shù)config,然后每個方法返回的都是一個Promise。這種業(yè)務(wù)常見使用Record再合適不過了。使用下面的方式定義了每個方法的形狀。

type IHttp = Record<IHttpMethods, IHttpFn>;

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

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

您可能感興趣的文章: