TypeScript 泛型实战：将对象属性统一映射为 any 的方法详解-js教程-PHP中文网

TypeScript 泛型实战：将对象属性统一映射为 any 的方法详解

碧海醫心

发布： 2025-09-12 12:26:42

原创

302人浏览过

TypeScript 泛型实战：将对象属性统一映射为 any 的方法详解

本文详细介绍了在 TypeScript 中如何创建一个泛型类型 Transmuted<T>，该类型能够接收任意对象类型 T，并返回一个新类型，新类型拥有与 T 相同的属性键，但所有属性值类型都被统一设置为 any。文章将通过映射类型（Mapped Types）和内置的 Record 工具类型两种方法进行深入讲解和示例，帮助开发者高效处理类型转换场景。

统一对象属性类型至 any 的需求场景

在 typescript 开发中，我们有时会遇到这样的需求：需要基于一个已有的对象类型（例如一个类的实例类型），创建一个新的类型，该新类型保留原有类型的所有属性键，但将其所有属性的值类型统一设置为 any。这种转换在某些动态处理或与非强类型数据交互的场景中非常有用。

例如，给定一个 Foo 类：

class Foo {
   foo: string;
   bar: number;
   baz: Date;

   constructor() {
       this.foo = "";
       this.bar = 0;
       this.baz = new Date();
   }
}

登录后复制

我们的目标是定义一个泛型类型 Transmuted<T>，使其在应用于 Foo 时，能够生成如下的 TransmutedFoo 接口：

interface TransmutedFoo {
   foo: any;
   bar: any;
   baz: any;
}

登录后复制

接下来，我们将探讨两种实现这种泛型类型的方法。

方法一：使用映射类型 (Mapped Types)

映射类型是 TypeScript 中一项强大的功能，它允许我们以声明式的方式，基于现有类型创建新类型。其基本语法是 [Key in K]: Type;，其中 K 是一个联合类型，表示新类型中属性键的集合。

为了实现我们的目标，我们可以利用 keyof T 来获取类型 T 的所有属性键，然后将这些键映射到 any 类型。

/**
 * Transmuted<T> 泛型类型
 * 将输入类型 T 的所有属性键保留，并将其对应的属性值类型统一设置为 any。
 * @template T - 任意对象类型
 */
type Transmuted<T> = {
    [Key in keyof T]: any;
};

登录后复制

代码解析：

[Key in keyof T]：这部分遍历了类型 T 的所有属性键。keyof T 会生成一个包含 T 所有属性名（字符串字面量）的联合类型。Key in ... 语法则表示为这个联合类型中的每个成员创建一个新的属性。
: any;：这部分指定了新创建属性的类型。在这里，我们将其统一设置为 any。

应用示例：

Kits AI

Kits.ai 是一个为音乐家提供一站式AI音乐创作解决方案的网站，提供AI语音生成和免费AI语音训练

413

查看详情

class Foo {
    foo: string;
    bar: number;
    baz: Date;

    constructor() {
        this.foo = "";
        this.bar = 0;
        this.baz = new Date();
    }
}

// 使用映射类型定义 Transmuted
type Transmuted<T> = {
    [Key in keyof T]: any;
};

// 应用 Transmuted 到 Foo 类型
type TransmutedFoo = Transmuted<Foo>;

// 验证 TransmutedFoo 的类型
// type TransmutedFoo = {
//     foo: any;
//     bar: any;
//     baz: any;
// }

// 我们可以创建一个 TransmutedFoo 类型的对象
const myTransmutedFoo: TransmutedFoo = {
    foo: "hello",
    bar: 123,
    baz: new Date()
};

console.log(myTransmutedFoo);

登录后复制

方法二：使用 Record 工具类型

TypeScript 提供了一系列实用的内置工具类型（Utility Types），Record<Keys, Type> 就是其中之一。Record 工具类型用于构造一个对象类型，其属性键由 Keys 指定，而所有属性值都具有相同的 Type。

Record 的定义实际上也是基于映射类型实现的：type Record<K extends keyof any, T> = { [P in K]: T; };。因此，它非常适合我们当前的需求。

我们可以将 keyof T 作为 Record 的第一个类型参数 Keys，将 any 作为第二个类型参数 Type。

/**
 * Transmuted<T> 泛型类型 (使用 Record 工具类型实现)
 * 将输入类型 T 的所有属性键保留，并将其对应的属性值类型统一设置为 any。
 * @template T - 任意对象类型
 */
type Transmuted<T> = Record<keyof T, any>;

登录后复制

代码解析：

Record<keyof T, any>：keyof T 提供了所有属性键的联合类型，any 指定了所有属性的值类型。Record 会自动为这些键构建一个新类型，其中每个键都映射到 any 类型。

应用示例：

class Foo {
    foo: string;
    bar: number;
    baz: Date;

    constructor() {
        this.foo = "";
        this.bar = 0;
        this.baz = new Date();
    }
}

// 使用 Record 工具类型定义 Transmuted
type Transmuted<T> = Record<keyof T, any>;

// 应用 Transmuted 到 Foo 类型
type TransmutedFoo = Transmuted<Foo>;

// 验证 TransmutedFoo 的类型
// type TransmutedFoo = {
//     foo: any;
//     bar: any;
//     baz: any;
// }

const anotherTransmutedFoo: TransmutedFoo = {
    foo: "world",
    bar: true, // 即使原始类型是 number，这里也可以是 any
    baz: null  // 即使原始类型是 Date，这里也可以是 any
};

console.log(anotherTransmutedFoo);

登录后复制

总结与注意事项

映射类型 (Mapped Types)：提供了最灵活的机制来转换现有类型。当您需要对每个属性的类型进行更复杂的转换（例如，将所有属性变为可选 ?，或将属性类型包装在 Promise<T> 中）时，映射类型是首选。
Record 工具类型：当您需要创建一个所有属性值都具有相同类型的对象类型时，Record 提供了一种更简洁、更具可读性的方式。在我们的例子中，由于所有属性值都统一为 any，Record<keyof T, any> 是一个非常优雅的解决方案。

两种方法都能有效地实现将一个对象类型的所有属性值统一映射为 any 的目标。在实际开发中，如果目标是统一所有属性的类型，推荐使用 Record 工具类型，因为它更简洁明了。如果需要更精细或更复杂的类型转换逻辑，则应直接使用映射类型。理解这两种方法有助于您更灵活地处理 TypeScript 中的类型转换需求。

以上就是TypeScript 泛型实战：将对象属性统一映射为 any 的方法详解的详细内容，更多请关注php中文网其它相关文章！