TS 进阶练习

TS内容进阶，紧随上篇文章  https://www.cnblogs.com/jickma/p/18025212  TS 学习随笔

学习内容源自 https://blog.csdn.net/weixin_44441196/article/details/123570019?spm=1001.2014.3001.5501 

练习1    将接口中属性修改为只读

/**
 * 将接口中属性修改为只读 
 */
interface Person {
  name: string,
  age: number,
  readonly phone: number
}
/**
 * 完全看不懂什么用法，
 * 按照我的理解就是创建了一个新的 接口，这个接口叫 ReadOnlyPerson 可以用这个接口创建新的对象
 * 接口中的属性是 Person 中的属性，通过 in keyof（猜测类似于js 对象循环的方法）重新定义的属性
 * name: string, 可以理解为 key为name ，value为string  
 * [P in keyof Person]为 key，Person[P]为value
 * 而 readonly 为修饰符，表示只读
 * type 应该为一个关键字，表示创建一个新接口
 */
type ReadOnlyPerson = {
  readonly [P in keyof Person]: Person[P]
}
let personOne: Person = {
  name: '张三',
  age: 24,
  phone: 1234567890
}
personOne.name = '王五'
let personTwo: ReadOnlyPerson = {
  name: '李四',
  age: 26,
  phone: 190000
}
// personTwo.name = '赵云' // 报错 无法为“name”赋值，因为它是只读属性。
/**
 * 在代码书写完成之后就会直接报错，并无法运行，
 * 在js中对象是没有只读这样的属性的，
 * 编译成功之后的js仅为两个名叫 personOne personTwo 的两个对象
 * 以及对name值得修改
 */
// console.log(personOne, 'personOne'); // { name: '王五', age: 24, phone: 1234567890 } personOne
// console.log(personTwo, 'personTwo'); // { name: '李四', age: 26, phone: 190000 } personTwo

练习2   将某个 interface 里的索引全部转为联合类型

/**
 * 将某个 interface 里的索引全部转为联合类型
 */
/**
 * 联合类型 就是用| 将多个类型组合在一起，
 * 在定义变量类型时候有遇到
 */
// 这便是联合类型
// let strOrNum: number | string = '张飞'
// strOrNum = 123456
interface Animal {
  name: string,
  age: number,
  readonly phone: number
}
type UnionTypes = keyof Animal
/**
 * 试了一些方法，但是始终无法输出正确得联合类型数据 别人得贴子输出是这样的
 * 'name' | 'age' | 'gender'
 * UnionTypes 是无法直接输出得 直接输出报错 “UnionTypes”仅表示类型，但在此处却作为值使用。
 */
let typeAAA: UnionTypes = "name" // 网上说这个地方会显示 UnionTypes 得可选值，我的没有出现
// console.log(typeAAA,'typeAAA'); // name 

练习3  将两个interface组成一个新的interface

/**
 * 将两个interface组成一个新的interface
 */
interface type1 {
  name: string
  readonly age: number
}
interface type2 {
  adress: string
}
type type3 = type1 & type2
/**
 * type1 中没有adress这个属性
 * 语法错误。
 * 对象字面量只能指定已知属性，并且“adress”不在类型“type1”中。
 */
// let typeAll1: type1 = {
//   name: '景天',
//   age: 24,
//   adress: '永安当' // 对象字面量只能指定已知属性，并且“adress”不在类型“type1”中。
// }
let typeAll: type3 = {
  name: '景天',
  age: 24,
  adress: '永安当'
}
// console.log(typeAll, 'typeAll'); // { name: '景天', age: 24, adress: '永安当' }
interface type4 {
  // name: number
  adress: string
  phone: number
}
type type5 = type1 & type2 & type4
/**
 * 由此可以推断出，这个地方可以无限制合并
 * 如果属性有相同得 并且type值也相同，没有问题，并不会显示两个 adress
 * 如果type不同 就会报错 不能将类型“string”分配给类型“never”。
 * 如 name 上面是 string类型，下边是 number类型，无论我在赋值时候写什么都是显示这句话
 */
let typeAllKey: type5 = {
  name: '茂山',
  age: 23,
  adress: '永安当',
  phone: 132456
}
// console.log(typeAllKey, 'typeAllKey'); // { name: '茂山', age: 24, adress: '永安当', phone: 132456 }

 练习4  利用 pick 从一个interface中选择索引生成新的interface  利用 Omit 从一个interface中排除部分择索引生成新的interface

/**
 * 利用 pick 从一个interface中选择索引生成新的interface
 * 利用 Omit 从一个interface中排除部分择索引生成新的interface
 * pick Omit 可以理解为返回某些数据和不返回某些数据
 * pick 在已经定义的对象中选取一些 pick<T，keys> T表示选择谁的属性 keys表示选择哪几个属性（传入属性名，只能是第一个 类型变量中存在的属性）
 * Omit 在已经定义的对象中删除一些 Omit<T，keys> 
 * 除了这两个还有 Exclude（排除/不包括） Extract (提取/包括） 这两个用法与 pick Omit 不同，暂时未测试
 */
interface car {
  name: string
  width: number
  height: number
  weight: number | string
  speed: number | string
}
// 现在有一个新的车，这个车只有长宽，
type onlyHasWH = Pick<car, 'width' | 'height'>
let onlyHasWHObj: onlyHasWH = {
  // name: '凯迪拉克', // 语法错误 对象字面量只能指定已知属性，并且“name”不在类型“onlyHasWH”中。
  width: 120,
  height: 490
}
// console.log(onlyHasWHObj); // { width: 120, height: 490 }
// 现在又有一个新车，这个车除了长宽其余得都有
type onlyNoWH = Omit<car, 'width' | 'height'>
let onlyNoWHObj: onlyNoWH = {
  name: '凯迪拉克',
  // width: 120, // 语法错误 对象字面量只能指定已知属性，并且“width”不在类型“onlyNoWH”中。
  // height: 490
  weight: '120kg',
  speed: '200km/h'
}
// console.log(onlyNoWHObj); // { name: '凯迪拉克', weight: '120kg', speed: '200km/h' }

练习5  利用InstanceType从一个类里面获取interface

/**
 * 利用InstanceType从一个类里面获取interface
 * InstanceType 接受一个类类型作为参数，并返回该类的实例类型。 
 */
class person {
  name: string
  age: number
  readonly sex: string = '男'
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}
// InstanceType 就是把一个类中得属性拿出来了，然后可以单独用作一个新的对象 对于只读属性，是可以直接修改得
type newPerson = InstanceType<typeof person>
let a: newPerson = {
  name: '李淳风',
  age: 89,
  sex: '女'
}

练习6  利用Parameters从函数的参数中推导出类型  利用ReturnType从函数的返回值中推导出类型

/**
 * 利用Parameters从函数的参数中推导出类型
 * 利用ReturnType从函数的返回值中推导出类型
 * 这两个是从函数里面获取参数类型与返回值得类型
 * 在函数中入参类型确定之后，返回值类型也就能确定了
 */
function foo1(v: string, b: number) {
  return v + b
}
let foo2 = (v: string, b: number) => {
  return v + b
}
// 函数这两种写法是一样得，没有差别都可以使用
type parame1 = Parameters<typeof foo1>
// 得出来的是一个数组 parame1 [v: string, b: number] 如果参数再多，那数组长度增加
let a1: parame1 = ['1', 1] // 如果写别类型的就会报语法错误，比如说布尔值
type parame2 = ReturnType<typeof foo1>
// 最终结果得到的是一个 字符串
let a2:parame2 = '111' // 如果写别的类型就会报语法错误