课程名称: 晋级TypeScript高手,成为抢手的前端开发人才
课程章节: 9-24 【高级类型Pick+Record】 高级类型联合使用+作业
课程讲师: keviny79
课程内容:
本讲主要对Record复习以及作业的布置
作业:
怎样实现完成这个数组 只允许保留 title 和 completed 这两个属性,模拟异步从服务器中获取到数据。
interface Todo { title: string; completed: boolean; description: string; } let todoList: Todo[] = [ { title: "开发权限管理模块", completed: true, description: "使用Vue3+typescript来开发" }, { title: "年会", completed: false, description: "12月29号上午开心酒店1楼105" } ]
解答思路
这里的空对象类型是“可索引的类型” 在对象中并不强制一定要有值
这里往对象中添加的值必须是对象并且对象中必须是 title 和 completed 两个属性,否则会报错
interface Todo { title: string; completed: boolean; description: string; } let todoList: Todo[] = [ { title: "开发权限管理模块", completed: true, description: "使用Vue3+typescript来开发" }, { title: "年会", completed: false, description: "12月29号上午开心酒店1楼105" } ] // 1.抓取title 和 completed type PickTodoType = Pick<Todo, "title" | "completed">; // 2.抓取出的属性再映射到另一个类型上然后创造一个新的类型 type newRecordType = Record<string, PickTodoType>; // 3.创建空对象,抽离出需要的属性 let newObj: newRecordType = {}; // 4.循环原始数据,并抽离出需要的数据 todoList.forEach(({ title, completed }) => { newObj[title] = { title, completed, }; }); //5.打印 console.log("newObj=>", newObj);
课程收获:
本节加深对 TypeScript高级类型 Pick 和 Record 的使用方式。
通过作业对 Pick 和 Record 的使用场景有了一定的了解,为之后的学习打下了一定的基础,期待后面的学习