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

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

---

知识运用：

1. 认识什么是readonly，和常量的区别是什么？
2. Indexed Access Types：索引访问类型；
3. Keyof 类型运算符；
4. Mapped Types 映射类型；

题目分析：

题目地址：7-easy-readonly 如图所示我们需要设计一个通用类型工具MyReadonly接收传入的Todo接口并遍历每一条属性去设置为只能读取不能编辑，并返回这样的类型结构，功能同Readonly。

题目解答：

测试用例：

1. 测试用例很简单，就是比较我们实现的类型工具和内置Readonly类型工具的到的结果是否一致；
2. 当然我们也可以声明一个变量并约束类型为我们实现的类型工具返回的类型，重新赋值后看是否成功。

/* _____________ 测试用例 _____________ */
// 完整测试用例可见 type-challenges项目，点击题目链接可转到
import { 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
  }
}

答案及解析：

目标是对传入的接口的每一条属性增加readonly属性

1. 返回的结果始终是一个对象来表示
2. 实现的格式：readonly key：value，key指的是Todo的属性，value指的是Todo的属性对应的类型
3. 如何得到value：通过索引类型访问T[key]的形式获取
4. 如何遍历接口类型的每一条属性：通过映射类型关键词in，形式为[key in 类型字符串集合]
5. 如何得到接口每一条属性组成的类型字符串集合：使用keyof来得到

/* _____________ 答案 _____________ */
 
type MyReadonly<T> = {
  readonly [key in keyof T]: T[key]
}

在演练场验证答案

接下来的一题是：【类型挑战】元组转换为对象，难度⭐️

推荐：GFE前端团队，欢迎各位XD点赞，评论，关注~

---

欢迎关注我的公众号“前端小鑫同学”，原创技术文章第一时间推送。