【九月打卡】第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 的使用方式及使用场景。