TypeScript26(TS进阶用法Record & Readonly)

Readonly

Readonly与我们上一章节学的Partial 很相似，只是把? 替换成了 Readonly

// 源码
type Readonly = {
    readonly [P in keyof T]: T[P];
};

疑问：

keyof 是干什么的？

in 是干什么的？

Readonly 是将该属性变为只读？

T[P] 是干什么的？

解答：

1 keyof：将一个接口对象的全部属性取出来变成联合类型；

2 in ：我们可以理解成for in P 就是key 遍历 keyof T 就是联合类型的每一项；

3 Readonly ：这个操作就是将每一个属性变成只读

4 T[P] ：索引访问操作符，与 JavaScript 种访问属性值的操作类似

示例代码：

// 源码
type R = {
  readonly [P in keyof T]:T[P]
}
 
// 使用
type Person ={
  name:string,
  age:number,
  text:string
}
 
type man = R<Person>

把鼠标移至man上最终的显示如下：

 Record

源码

type Recordextends keyof any, T> = {
    [P in K]: T;
};

说明

1 keyof any ：返回 string number symbol 的联合类型

2 in ：我们可以理解成for in P 就是key 遍历 keyof any 就是string number symbol类型的每一项

3 extends：来约束我们的类型

4 T ：直接返回类型

做到了约束 对象的key 同时约束了 value

代码示例如下：

// 源码
type Recextends keyof any, T> = {
  [P in K]: T
}
 
// 使用
type Person ={
  name:string,
  age:number,
  text:string
}
 
// type  K = 'A' | 'B' | 'C'
//如果将K换成数字，那么obj:B中的key也必须换成相应的数字
type K = 1 | 2 | 3
 
type B = RecPerson>
 
// let obj:B = {
//   A:{name:'小剑', age:18, text:'123'},
//   B:{name:'小剑', age:19, text:'456'},
//   C:{name:'小剑', age:20, text:'789'}
// }
let obj:B = {
  1:{name:'小剑', age:18, text:'123'},
  2:{name:'小剑', age:19, text:'456'},
  3:{name:'小剑', age:20, text:'789'}
}