一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第22天，点击查看活动详情
🎉前言
这是学习 TypeScript 的基础进阶的第四章节，我将会把我学习到的知识总结起来供大家参考。
之前已经学习了泛型的基本用法，接下来我们拓展一下对于泛型的其他知识点。
🐣 Partial
Partial 用于将一个类型中的所有属性转变为可选属性。
看例子：
interface Animal {
name: string;
age: number;
}
const dog1: Animal={
name:'阿黄',
age: 4
}
// 报错， 缺少age属性
const dog2: Animal={
name:'阿黄',
}
使用 Partial 修改例子：
const dog2:Partial<Animal> = {
name: '阿黄', // ok
}
原理：
type Partial<T> = { [P in keyof T]?: T[P]; }
在上述例子中，我们使用 Partial 将我们传入的类型事先通过 keyof 获取对应的属性名，之后使用 in 关键字进行遍历，将对应的属性类型赋值给 P ，添加可选符号 ?，让属性成为可选属性。
🐥 Required
啊哈~~ 可以把所有属性变成可选的，那肯定就有方法让所有属性变成必选的啦。
在 Vue 中我们实现一个子组件时，为了让它的某个 props 属性一定要传值时，我们会加入 required：true 属性进行声明。
//element-ui中form.vue
props: {
model: {
type: Object,
required: true
}
}
如果不传入 model 就会报错：[Vue warn]: Missing required prop: "model"
好了，有所了解之后，我们在 TypeScript 中看看如何使用。
看例子：
interface Animal {
name: string;
age?: number; // age可选
}
// ok
const dog:Animal={
name:'阿黄'
}
使用 Required 修改例子：
// 报错；类型 "{ name: string; }" 中缺少属性 "age"，但类型 "Required<Animal>" 中需要该属性。ts(2741)
const dog:Required<Animal> ={
name:'阿黄'
}
原理：
type Required<T> = { [P in keyof T]-?: T[P]; }
跟之前的 Partial 有点像，不同的是这里的 ? 变成了 -? ，意思是将可选属性的 ? 符号去掉，变为必选属性。
🐤 Readonly
Readonly 用于将一个类型中的属性转换为可读属性，也即是后续不能修改这些属性值。
在 TypeScript 中，还有一个 readonly，它是给一个接口声明可读属性，而这个 Readonly 则是给一个接口里的所有属性声明可读属性。
看例子：
// readonly 例子
interface Animal {
readonly name: string;
age: number;
}
const dog:Animal ={
name:'阿黄',
age: 4
}
dog1.name = "小黑"; // error
dog1.age = 18; // ok
// Readonly 例子
interface Animal2 {
name: string;
age: number;
}
const dog2:Readonly<Animal2> ={
name:'小黑',
age: 4
}
dog2.name = "小白"; // error
dog2.age = 18; // error
原理：
type Readonly<T> = { readonly [P in keyof T]: T[P]; }
其实就是 Readonly 将我们传入的类型事先通过 keyof 获取对应的属性名，之后使用 in 关键字进行遍历，将对应的属性类型赋值给 P ，再给所有的属性加上 readonly 就好了。
✨总结
以上就是本次分享的全部内容~~
如果觉得文章写得不错，对你有所启发的，请不要吝啬 点个 赞 和 关注 并在 评论区 留下你宝贵的意见哦~~😃
