【九月打卡】第2天 TypeScript学习 9-25章
2022/9/9 3:23:14
本文主要是介绍【九月打卡】第2天 TypeScript学习 9-25章,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
课程名称: 晋级TypeScript高手,成为抢手的前端开发人才
课程章节: 9-25 【高级类型Required] 融合Vue3源码+ 多级接口掌握Required +ReadOnly,Partial作业
课程讲师: keviny79
课程内容:
本章节主要讲解三个 ts高级类型Partial、Required、ReadOnly和作业
-
Partial
对象中属性一次性全部变成可选
语法:
type Partial<T> = { [P in keyof T]?: T[P] }
解析:
- [P in keyof T] 遍历 泛型T,得到 key
- T[P] 得到key,获取 泛型T 对象中对应 key 的 value
- ? 变为可选属性
- 使用 大括号{} 包含 key?:value 组成新的对象类型
使用:
// 1.定义Partial语法 type Partial<T> = { [P in keyof T]?: T[P]; }; // 2.声明一个对象,对象中属性都是必填项 interface Todo { title: string; completed: boolean; description: string; } // 3. 使用 Partial把Todo中对象中属性转为不是必选项 type PTodo = Partial<Todo>; // 4.使用Partial和不使用Partial对比 let test: PTodo = {}; // 这里使用Partial不会提示错误 let test2: Todo = {}; // 这里没有使用Partial会提示错误,表示对象中缺少必填项
-
Required
Required 与 Partial 相反 对象中属性一次性全部变成必选选项
语法:
type Required<T> = { [P in keyof T]-?: T[P] }
解析:
- [P in keyof T] 遍历 泛型T,得到 key
- T[P] 得到key,获取 泛型T 对象中对应 key 的 value
- -? 减去对象中可选选项,变为必选选项
- 把对象中可选选项,转为必选选项后使用 大括号{} 包含 key:value 组成新的对象类型
使用:
// 1.定义Required语法 type Required<T> = { [P in keyof T]-?: T[P]; }; // 2.声明一个对象,对象中混合有必选和没有必选项 interface Todo { title: string; completed: boolean; description: string; other?: string; //其他信息 date?: Date; // 日期 } // 3. 使用 Required 把 Todo 中对象中属性转为是必选项 type RTodo = Required<Todo>; // 4.使用 Required 和不使用 Required 对比 let test: RTodo = {}; // 这里需要填五个必选项 let test2: Todo = {}; // 这里只需要添三个必选项
使用场景:
有些时候我们需要把对象中的 不是必填属性 转为 是必填属性,但有时候不需要转,这时就可以使用 Required,在使用时可以更好的得到属性提示 -
ReadOnly
对象中属性一次性全部变成可读选项
语法:
type ReadOnly<T> = { readonly [P in keyof T]: T[P] }
解析:
- readonly ts中关键字 表示只读
- [P in keyof T] 遍历 泛型T,得到 key
- T[P] 得到key,获取 泛型T 对象中对应 key 的 value
- 使用 大括号{} 包含 readonly key:value 组成新的对象类型
使用:
// 1.定义 ReadOnly 语法 type ReadOnly<T> = { readonly [P in keyof T]: T[P]; }; // 2.声明一个对象,对象中属性都是必填项 interface Todo { title: string; completed: boolean; description: string; } // 3. 使用 ReadOnly 把 Todo 中对象中属性转为只读属性 type ROTodo = ReadOnly<Todo>; // 4.使用 ReadOnly 和不使用 ReadOnly 对比 let test: ROTodo = { title: "标题", completed: true, description: "描述", }; let test2: Todo = { title: "标题", completed: true, description: "描述", }; // 5.修改 test 和 test2 中属性做比对 test.title = "修改"; // 这里会提示错误,表示它是只读属性不能修改 test2.title = "修改"; // 这里表示修改成功,没有提示错误
使用场景:
有些场景下我们不需要对象中的属性可以修改,就可以使用 ReadOnly
作业
interface Error { name: string; message: string; stack?: string; } interface SyntaxError extends Error {} interface CompilerError extends SyntaxError { code: number; //200 404 500 loc?: SourceLocation; } // 作业 // name: string; // message: string; // stack: string; 从哪儿来的 type compileErrorType = Required<CompilerError>;
解析 :
CompilerError 继承 SyntaxError ,SyntaxError 又继承 Error,因为继承所以子接口可以使用父接口中的属性。
当继承了 父接口 的 子接口 传入 Required 中,就会把 父接口 中属性加上 子接口 中属性,一起传进去,后全部转为 必填项。
所以多出的 三个属性 是从 父接口 继承过来的
课程收获:
通过作业对 接口 的 继承 又复习一遍之外,还 学习了三个 TypeScript高级类型 Partial、Required、ReadOnly 的使用方式及使用场景。
这篇关于【九月打卡】第2天 TypeScript学习 9-25章的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升