TypeScript Record 类型用法与源码解析

Record 类型概述与源码解析

在 TypeScript 官方文档中，对 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;
};

从源码来看，Record 的实现逻辑相对直观：它遍历键类型 K 中的每一个属性 [P in K]，并将它们统一转换为类型 T。其标准使用格式通常如下所示：

type proxyKType = Record<K,T>

Record 基础用法与示例

该机制会将键类型 K 中的所有属性值转换为指定的类型 T，并返回构建好的新类型给变量 proxyKType。这里的 K 可以是联合类型、对象接口或枚举等多种形式。接下来通过几个具体示例进行说明。示例 1 如下：

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
    }
}

从示例 1 可以看出，IPets 类型是由 Record<petsGroup, IPetInfo> 生成的。这一步骤将 petsGroup 枚举中的每个成员（'dog' | 'cat' | 'fish'）都映射为 IPetInfo 类型的实例。当然，开发者也可以在第一个参数后追加额外的键值，具体操作见示例 2。

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
    }
}

对比示例 1，示例 2 在类型定义 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;

Record 在 HTTP 封装中的实际应用

上述示例首先枚举了常见的 HTTP 请求方法名，并定义每个方法接收请求 URL 及可选的 config 参数，最终返回一个 Promise 对象。这种业务场景非常适合使用 Record 类型来规范方法形状，具体定义方式如下：

type IHttp = Record<IHttpMethods, IHttpFn>;

最后，只需遍历这些预定义的方法，并为每个方法编写具体的实现逻辑即可。此处利用了 reduce 方法的特性遍历数据，将所有方法体整合到一个对象中，最终由 httpMethods 接收并对外暴露，以便外部直接调用。为了简化说明，文中省略了设置请求头、Token 验证等业务细节，旨在展示 Record 在合适业务场景下的应用价值。

至此，关于 TypeScript 中高级类型 Record 的介绍已接近尾声。如需了解更多相关高级类型知识，建议查阅本站过往文章或继续阅读后续相关内容。感谢大家的支持！

TypeScript 中高级类型 Record 详解

Record 类型概述与源码解析

Record 基础用法与示例

Record 在 HTTP 封装中的实际应用

实用工具推荐