首先看一下readme:
不要使用内置的Readonly<T>
,自己实现一个。
泛型 Readonly<T>
会接收一个 泛型参数,并返回一个完全一样的类型,只是所有属性都会是只读 (readonly) 的。
也就是不可以再对该对象的属性赋值。
例如:
interface Todo {
title: string
description: string
}
const todo: MyReadonly<Todo> = {
title: "Hey",
description: "foobar"
}
todo.title = "Hello" // Error: cannot reassign a readonly property
todo.description = "barFoo" // Error: cannot reassign a readonly property
第二步看下单元测试要求和原题目给的信息:
单元测试:
import type { Equal, Expect } from '@type-challenges/utils'
type cases = [
Expect<Equal<MyReadonly<Todo1>, Readonly<Todo1>>>,
]
interface Todo1 {
title: string
description: string
completed: boolean
meta: {
author: string
}
}
原题目信息:
type MyReadonly<T> = any
第三步开始进行我们JS对比和TS操作:
type MyReadonly<T> = {
//[P in T] T为一个接口无法直接遍历
//[P in keyof T] keyof将T接口中所有数据key遍历返回
// interface Todo{
// a:string
// b:string
// }
// type r = keyof Todo //["a","b"]
// const rv :r = "" //写""就会显示 a, b 证明keyof之后,是ab两个 。可以用这种方式测试
readonly [P in keyof T] : T[P];//加上readonly方法:直接加
};
// interface User = {
// readonly name:string
// }
// const xiaohong :User = {
// name:"小红"
// }
// //想让用户不能改变name ,那就在类型旁边加上readonly
// xiaohong.name = "123";//readonly加上了就会报错了
//对比学习法 JS逻辑
function readonly(obj) {
const result = {};
for (const key in obj) {
result["readonly" + key] = obj[key];
}
return result;
}
//1.返回一个对象
//2.遍历Obj (js里是对象 TS里面应该是接口) in -> mapped keyof ->looKup
//3.加上readonly关键字 新的知识点
//4.通过Key来获取Obj(接口)里面的值 indexed
最后可以看到通过了我们的单测case:
以上案例均上传到github TDL仓库中
TS体操-github地址:https://github.com/type-challenges/type-challenges
本人github仓库地址:https://github.com/zclsx/TDL-TS
关于配套视频教程可以参考阿崔cxr:bilibili 阿崔cxr