TypeScript中实现类型属性只读化的通用映射类型

理解只读属性的需求

在typescript开发中，确保数据在初始化后不被意外修改是提高代码可靠性的重要实践。readonly修饰符是实现这一目标的核心工具。当我们将readonly应用于对象属性时，typescript编译器会阻止对该属性的任何后续赋值操作。

例如，当我们使用as const断言来声明一个对象字面量时，TypeScript会自动推断出该对象的所有属性都是只读的，并且其值类型会被推断为最窄的字面量类型：

const config = {
  port: 8080,
  host: 'localhost'
} as const;

// typeof config 的结果是：
// { readonly port: 8080; readonly host: 'localhost'; }

// 尝试修改只读属性会导致编译错误：
// config.port = 3000; // Error: Cannot assign to 'port' because it is a read-only property.

然而，在许多情况下，我们可能需要对一个已经存在的类型（例如，通过接口、类型别名或Record定义的类型）应用这种只读特性，而不是仅仅针对字面量。我们希望能够编写一个通用的类型，将任何给定类型的所有属性都标记为只读。

构建通用的只读映射类型

TypeScript的映射类型（Mapped Types）提供了一种强大的能力，允许我们基于现有类型来创建新类型，并对新类型的每个属性进行转换。我们可以利用这一特性来创建一个泛型类型，为输入类型T的所有属性添加readonly修饰符。

以下是实现这一功能的Modify类型定义：

type Modify<T> = {
  readonly [K in keyof T]: T[K];
};

让我们详细解析这个类型定义：

盘古大模型

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

35

查看详情

• [K in keyof T]: 这是映射类型的核心语法。
  • keyof T：这个操作符用于获取类型T的所有公共属性名（键）的联合类型。例如，如果T是{ name: string; age: number; }，那么keyof T的结果就是联合类型'name' | 'age'。
  • K in ...：表示我们将迭代keyof T中获取到的每一个键K，并为新类型创建相应的属性。
• readonly: 这是TypeScript提供的属性修饰符。它确保在新类型中，由K表示的每个属性都将是只读的，一旦初始化赋值后便不能再被修改。
• T[K]: 这部分指定了新类型中属性K的值类型。它将与原始类型T中属性K的值类型保持一致。这意味着Modify类型只会添加readonly修饰符，而不会改变属性的原始数据类型。

示例应用

现在，我们通过一个具体的例子来演示如何使用这个Modify类型。假设我们有一个基础类型MyType，它是一个Record<string, string>，表示一个键值对都是字符串的对象：

type MyType = Record<string, string>;
// MyType 可以表示类似 { userId: '123', userName: 'Alice' } 这样的对象。

我们可以使用Modify类型来创建一个新的类型ModifiedMyType，它将MyType的所有属性都变为只读：

type ModifiedMyType = Modify<MyType>;

// 现在，我们可以声明一个符合 ModifiedMyType 类型约束的对象
const userProfile: ModifiedMyType = {
  userId: '12345',
  userName: 'John Doe'
};

// 尝试修改 userProfile 的属性将导致编译错误：
// userProfile.userId = '67890'; // Error: Cannot assign to 'userId' because it is a read-only property.

需要强调的是，虽然ModifiedMyType成功地将userId和userName属性标记为只读，但它们的类型仍然是string，而不是字面量类型（如'12345'）。这是因为Modify<T>的设计目标是添加readonly修饰符，同时保留原始的属性类型T[K]。如果需要推断字面量类型，通常需要结合as const或更复杂的类型推断机制。然而，对于仅需添加readonly修饰符的场景，Modify<T>提供了一个简洁而有效的解决方案。

注意事项与扩展

1. 与 as const 的区别：
   • as const 是一个运行时断言，主要用于对象字面量，它会递归地将对象的所有属性及其嵌套属性变为只读，并将所有值类型推断为最窄的字面量类型。
   • Modify<T> 是一种编译时类型转换，它只在当前层级为属性添加 readonly 修饰符，并且保留原始的属性值类型。它不会自动递归处理嵌套对象（除非嵌套类型本身也被Modify处理）。
2. 应用场景：
   • 配置对象：当应用程序的配置在加载后不应被修改时，可以使用Modify<ConfigType>来强制其不可变性。
   • 状态管理：在某些状态管理模式（如Redux、Vuex）中，为了确保状态的不可变性，可以对状态类型应用Modify。
   • API响应数据：如果从API获取的数据在客户端不应被修改，可以将其类型包装在Modify中，以防止意外的数据篡改。
3. 其他映射类型修饰符：映射类型的功能远不止添加readonly。你还可以：
   • 移除只读属性：使用-readonly。例如，type Writable<T> = { -readonly [K in keyof T]: T[K]; };
   • 添加/移除可选属性：使用?或-?。例如，type Partial<T> = { [K in keyof T]?: T[K]; };（TypeScript内置的Partial就是这样实现的）。
   • 重映射键名：通过模板字面量类型（Template Literal Types）和as子句来改变属性名。

总结

通过本文，我们深入学习了如何利用TypeScript的映射类型机制，创建一个通用的Modify<T>类型。这个类型能够高效地为任何给定类型的所有属性添加readonly修饰符，从而在编译时强制实现对象的不可变性。理解Modify<T>与as const之间的关键区别，能帮助开发者更准确地选择适合特定场景的类型策略，从而编写出更加健壮、可维护的TypeScript代码。

以上就是TypeScript中实现类型属性只读化的通用映射类型的详细内容，更多请关注php中文网其它相关文章！