持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第6天,点击查看活动详情
题目
实现一个通用MyReadonly2<T, K>,它带有两种类型的参数T和K。
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进行限定,K是typeof 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的部分组成联合类型。