为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第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]
    }
    

    解析:

    1. [P in keyof T] 遍历 泛型T,得到 key
    2. T[P] 得到key,获取 泛型T 对象中对应 key 的 value
    3. ? 变为可选属性
    4. 使用 大括号{} 包含 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]
    }
    

    解析:

    1. [P in keyof T] 遍历 泛型T,得到 key
    2. T[P] 得到key,获取 泛型T 对象中对应 key 的 value
    3. -? 减去对象中可选选项,变为必选选项
    4. 把对象中可选选项,转为必选选项后使用 大括号{} 包含 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]
    }
    

    解析:

    1. readonly ts中关键字 表示只读
    2. [P in keyof T] 遍历 泛型T,得到 key
    3. T[P] 得到key,获取 泛型T 对象中对应 key 的 value
    4. 使用 大括号{} 包含 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 的使用方式及使用场景。
图片描述

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
10
获赞与收藏
5

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消