TypeScipt 每日类型挑战-medium-<MyReadonly2>

111 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第6天,点击查看活动详情

题目

实现一个通用MyReadonly2<T, K>,它带有两种类型的参数TK

K指定为T的属性的子集,对应的属性是只读(readonly)的。如果未提供K,则应使所有属性都变为只读,就像普通的Readonly<T>一样。

例如

interface Todo {
  title: string
  description: string
  completed: boolean
}

const todo: MyReadonly2<Todo, 'title' | 'description'> = {
  title: "Hey",
  description: "foobar",
  completed: false,
}

todo.title = "Hello" // Error: cannot reassign a readonly property
todo.description = "barFoo" // Error: cannot reassign a readonly property
todo.completed = true // OK

解答

回顾<Readonly>

要回答这个问题,首先需要回顾下Readonly类型的实现: Readonly是用来让所有属性变为只读,其用法为:

type Person = {
  readonly name: string;
  age: number;
}

// 结果:{ readonly name: string; readonly age: number; }
type ReadonlyResult = MyReadonly<Person>

实现方式

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

in关键字遍历T的属性所组成的联合类型keyof T,结合readonly关键字,将每个属性设置为只读的。

<MyReadonly2>实现思路

那么如何实现MyReadonly2呢?它是Readonly的进阶版本:可选的Readonly,将给定的属性设置为readonly,其他属性不变,如果没有给定要设置的属性,就默认将所有属性变为readonly,同<Readonly>类型。 根据上述分析: 首先对K进行限定,Ktypeof T,同时没有给定K时,默认K就是keyof T。 然后遍历K中的每一个属性,将其设定为只读的。

type MyReadonly2<T, K extends keyof T> = T & { readonly [P in K]: T[P] };

这种解法在ts v4.4+版本中能够正常工作,但是在ts v4.5+版本中就会报错,截至目前ts Playground显示的最新版本号是4.7.2. 直接给出修改后的解法:

type MyReadonly2<T, K extends keyof T> = Omit<T, K> & { readonly [P in K]: T[P] };

区别在于将原来解法中的T换成了Omit<T, K>,将要设置为readonly的对应属性剔除,然后再和设置为readonly的部分组成联合类型。

更多