TypeScript Utility Types - Readonly: TypeScript 实用类型 - Readonly

发表于 分类于

Readonly<Type> 可将一个类型中所有属性转换为只读属性。以 User 类型为例：

1
2
3
4
5
type User = {
  name: string;
  age: number;
  gender: string;
}

经 Readonly<Type> 转换后得到：

1
2
3
4
5
6
7
8
9
type ReadonlyUser = Readonly<User>;
const readonlyUser: ReadonlyUser = {
  /** `name` 属性是只读的 */
  name: 'Olive',
  /** `age` 属性是只读的 */
  age: 18,
  /** `gender` 属性是只读的 */
  gender: 'female',
}

转换后的 ReadonlyUser 类型与下面的类型是等价的：

1
2
3
4
5
type ReadonlyUser = {
  readonly name: string;
  readonly age: number;
  readonly gender: string;
};

Readonly<Type> 是如何转换类型的呢？

1
2
3
4
/** * Make all properties in T readonly */
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};
  • 遍历类型 T，将类型 T 中的属性作为 key；
  • 在属性 key 前面加 readonly 修饰符，使其转换为只读属性；
  • 只读属性的值为 T 类型中对应属性的值，即 T[P]。

Playground Link