TypeScript 泛型实战：高效转换对象属性类型为 any 的两种方法

在 typescript 的类型系统中，我们经常会遇到需要基于现有类型派生出新类型的情况。有时，我们希望保留原有类型的结构（即属性名），但需要将所有属性的类型统一修改为 any。这种需求在处理动态数据、api 响应或构建灵活的配置对象时尤为常见。本文将介绍两种实现此目标的专业方法：使用映射类型和利用内置的 record 工具类型。

1. 深入理解映射类型 (Mapped Types)

映射类型是 TypeScript 中一种强大的类型转换机制，它允许我们通过迭代一个联合类型（通常是某个对象类型的所有属性键）来构建一个新的对象类型。其基本语法是 [P in K]: Type，其中 K 是一个联合类型，P 是迭代变量，Type 是每个属性的新类型。

要实现将所有属性类型转换为 any 的目标，我们可以结合 keyof 操作符和映射类型。keyof T 会返回类型 T 的所有公共属性名的联合类型。

实现方式

我们可以定义一个泛型类型 Transmuted<T> 如下：

type Transmuted<T> = {
    [Key in keyof T]: any;
};

代码解析：

• Transmuted<T>：这是一个泛型类型，它接受一个类型参数 T。
• keyof T：这个操作符用于获取类型 T 的所有属性键，并将其表示为一个字符串字面量联合类型。例如，如果 T 是 { foo: string; bar: number }，那么 keyof T 就是 'foo' | 'bar'。
• [Key in keyof T]：这部分是映射类型的核心。它会遍历 keyof T 所代表的每一个属性键（例如 Key 会依次是 'foo'、'bar'）。
• : any;：对于遍历到的每一个属性键 Key，我们都将其对应的属性值类型设置为 any。

示例

假设我们有一个 Foo 类：

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

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

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

/*
   TransmutedFoo 的类型将是：
   {
       foo: any;
       bar: any;
       baz: any;
   }
*/

// 验证
const myTransmutedFoo: TransmutedFoo = {
    foo: "hello",
    bar: 123,
    baz: new Date(),
    // 允许任何类型的值
};

const anotherTransmutedFoo: TransmutedFoo = {
    foo: 100, // string 变成了 number，但类型检查通过
    bar: "world", // number 变成了 string，但类型检查通过
    baz: true, // Date 变成了 boolean，但类型检查通过
};

console.log(myTransmutedFoo);
console.log(anotherTransmutedFoo);

通过这种方式，Transmuted<T> 成功地创建了一个新类型，它保留了 T 的所有属性名，但将所有属性的类型都统一设置为 any。

2. 巧用 Record 工具类型

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

从本质上讲，Record<Keys, Type> 内部也是通过映射类型实现的，其定义大致如下：

type Record<K extends string | number | symbol, T> = {
    [P in K]: T;
};

这与我们上面手动创建 Transmuted 类型的方式非常相似。

盘古大模型

华为云推出的一系列高性能人工智能大模型

35

查看详情

实现方式

利用 Record 工具类型，我们可以更简洁地实现相同的目标：

type Transmuted<T> = Record<keyof T, any>;

代码解析：

• Record<keyof T, any>：这里我们将 keyof T 作为 Record 的第一个类型参数 Keys，它提供了所有属性键。
• any 作为 Record 的第二个类型参数 Type，指定了所有属性的值类型为 any。

示例

沿用之前的 Foo 类：

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

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

// 应用 Record 工具类型
type TransmutedFoo = Record<keyof Foo, any>;

/*
   TransmutedFoo 的类型同样是：
   {
       foo: any;
       bar: any;
       baz: any;
   }
*/

// 验证方式与映射类型示例相同
const myTransmutedFoo: TransmutedFoo = {
    foo: "hello",
    bar: 123,
    baz: new Date(),
};
console.log(myTransmutedFoo);

使用 Record 类型的好处在于其简洁性和可读性，尤其是在需要将所有属性类型统一设置为某个特定类型时。

3. 应用场景与最佳实践

将对象属性类型统一转换为 any 的泛型在以下场景中非常有用：

• 处理动态或不确定结构的 API 响应： 当后端 API 返回的数据结构可能与预期的 TypeScript 类型不完全匹配，或者某些字段的类型在运行时才能确定时，可以使用 Transmuted 类型作为临时接口，以便在获取数据后进行进一步的类型断言或验证。
• 创建“模板”或“占位符”对象： 在某些测试或初始化场景中，你可能需要一个与现有对象结构一致，但其属性值可以任意填充的对象。
• 部分类型擦除： 在需要将某个复杂对象传递给一个不关心具体类型细节的函数或组件时，Transmuted 类型可以提供一个更宽松的接口。
• 构建配置对象： 允许用户提供一个结构化的配置，但其中的某些值可以是任何类型，然后在内部进行处理。

注意事项

尽管 any 类型提供了极大的灵活性，但过度或不恰当地使用 any 会削弱 TypeScript 的核心优势——类型安全。在决定使用 Transmuted<T> 类型时，请务必注意以下几点：

• 类型安全风险： any 类型会绕过 TypeScript 的所有类型检查。这意味着在运行时，你可能会遇到类型不匹配的错误，而这些错误在编译时无法被捕获。
• 可读性和可维护性： 大量使用 any 会降低代码的可读性，并使未来的维护变得困难，因为开发者无法从类型定义中获得关于数据结构的有用信息。
• 明确使用意图： 只有当你确实无法在编译时确定某个属性的具体类型，或者你需要暂时忽略类型检查以实现某些特定功能时，才应该考虑使用 Transmuted<T> 这种将所有类型设为 any 的泛型。在使用后，应尽可能快地将数据转换回具有明确类型的结构。

总结

本文详细介绍了在 TypeScript 中创建 Transmuted<T> 泛型类型的两种有效方法：

1. 使用映射类型： type Transmuted<T> = { [Key in keyof T]: any; }; 这种方法灵活且强大，适用于各种复杂的类型转换场景。
2. 使用 Record 工具类型： type Transmuted<T> = Record<keyof T, any>; 这种方法更加简洁，尤其适合将所有属性类型统一设置为某个特定类型的情况。

在实际开发中，当需要将现有对象的属性键保持不变，但统一其所有属性的值类型为 any 时，这两种方法都非常实用。选择哪种方法取决于个人偏好和具体上下文，但通常 Record 提供了更简洁的语法。同时，务必牢记 any 类型的潜在风险，并谨慎使用，以维护代码的类型安全和可维护性。

以上就是TypeScript 泛型实战：高效转换对象属性类型为 any 的两种方法的详细内容，更多请关注php中文网其它相关文章！