用最简单的话讲解Utility Types-Readonly

314 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

尬聊

大家好,我是梅利奥猪猪,最近因为rte大会,加班比较多,都没时间更新水文,不知道有没有XD期待我的更新(哈哈其实写的太水,我自己也没怎么期待,但只是记录学习的笔记还是有意义的,理直气壮ing)。今天工作日的第一天,满满的正能量,早上忙里偷闲搞一发,所以水文讲解Readonly开始!

正文

讲到tsreadonly,大家都知道,实际就是被 readonly 标记的属性只能在声明时或类的构造函数中赋值。

之后将不可改(即只读属性),否则会抛出错误。

它与 ES6 中的 const 很相似,但 readonly 只能用在类(TS 里也可以是接口)中的属性上,相当于一个只有 getter 没有 setter 的属性的语法糖。 下面请看官方例子,看我讲解一下就懂的那种

官方例子

先来看下官方的例子,以及说明

Constructs a type with all properties of Type set to readonly, meaning the properties of the constructed type cannot be reassigned.

interface Todo {
  title: string;
}
 
const todo: Readonly<Todo> = {
  title: "Delete inactive users",
};
 
todo.title = "Hello"; // Cannot assign to 'title' because it is a read-only property.

之前可能没和大家细讲个东西,就是我们为什么要用Utility Types,直接在原本的接口上加readonly不香吗,其实我自己的理解,就是不想改变原有的接口,可以把他理解成一个装饰器,用了Utility Types,就变成了个新的接口,以前的接口不受影响!好像扯的有点远,我们现在就来解读下官方的例子! 首先接口Todo,有个title字段,是个必选的字段,而且我可以随意改title属性,现在我们的需求,就是让title变成只读,让它不能更改!且我们不能在原先接口上加readonly!所以满足我们需求的大哥Readonly<Todo>就登场了,注意这个会把接口里所有的字段都会变成只读,之后带大家看源码就知道了。最后官方的例子非常贴心的贴出了它尝试修改title的属性,然后报错了!

源码讲解

直接上源码

/**
 * Make all properties in T readonly
 */
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

贴心的注释又告诉了我们所有的属性都会是readonly,依旧是那熟悉的配方,遍历所有的字段,加上readonly关键字,然后获取每个字段的类型,并标记。今天愉快的水文就结束了,time!

参考