【类型挑战】实现 Readonly，难度⭐️

2024-01-02 12:51:58

各位读者好，今天我们一起来了解类型挑战里的一个简单挑战——实现 Readonly 类型。

任务目标

在这个挑战中，我们需要实现一个 Readonly 类型，它可以将一个类型的所有属性标记为只读。这对于防止意外修改对象非常有用，例如：

interface User {
  name: string;
  age: number;
}

const user: User = {
  name: 'John',
  age: 30,
};

// 意外地修改了对象的属性
user.name = 'Jane';

使用 Readonly 类型，我们可以防止这种意外的修改：

interface User {
  name: string;
  age: number;
}

const user: Readonly<User> = {
  name: 'John',
  age: 30,
};

// 编译器会报错，因为无法修改只读属性
user.name = 'Jane';

实现 `Readonly` 类型

我们可以使用 Readonly<T> 语法来实现 Readonly 类型，其中 T 是我们要标记为只读的类型。例如：

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

这段代码使用了 TypeScript 的映射类型来遍历 T 类型的每个属性 P，并返回一个新的对象类型，其中所有属性都标记为只读。

使用 `Readonly` 类型

我们可以通过两种方式使用 Readonly 类型：

将其用于变量的类型注解：

interface User {
  name: string;
  age: number;
}

const user: Readonly<User> = {
  name: 'John',
  age: 30,
};

将其用于函数的参数类型注解：

function printUser(user: Readonly<User>) {
  console.log(user.name);
  console.log(user.age);
}

const user = {
  name: 'John',
  age: 30,
};

printUser(user);