【九月打卡】第48天 TypeScript(4)

泛型

如下场景：定义了一个接口，如果有多个不变量使用接口，需要不断扩展Box，这就很麻烦了

interface Box {
  val: string | number | boolean
}

const box1: Box = {
  val: 'box'
}

const box2: Box = {
  val: 123
}

const box3: Box = {
  val: true
}

以上场景可以采用泛型

interface Box<T> {
  val: T
}

const box1: Box<string> = {
  val: 'box'
}

const box2: Box<number> = {
  val: 123
}

const box3: Box<boolean> = {
  val: true
}

使用泛型扩展新的类型

type TypeOne<T> = T | null
type TypeTwo<T> = T[] | T

// TypeCombine和TypeComplex类型相同
type TypeCombine<T> = TypeOne<T> | TypeTwo<T>  //联合类型： T | null | T[]
type TypeComplex<T> = TypeOne<TypeTwo<T>>      //嵌套：  T | null | T[]

const test: TypeComplex<string> = '123'
const test1: TypeComplex<string> = null
const test2: TypeComplex<string> = ['a', 'b', 'c']

引申：联合类型和交叉类型

非对象类型情况：

• &表示两个类型的交集；

• | 表示两个类型的并集

type T1 = string | number | string[];
type T2 = boolean | number;

type C1 = T1 & T2;   // number
type C2 = T1 | T2;   // string | number | string[] | boolean

对象类型情况：

• &表示两个对象的所有属性类型的集合；如果相同两个属性的类型不一致，则该属性的类型合并为 never 类型

• | 表示只要满足两个对象中的其中一个就可以，不太好理解，下面举例说明

interface T1 {
  name: string;
  age: number;
}

interface T2 {
  sex: string;
}

type C1 = T1 & T2;  
type C2 = T1 | T2;

// 对象t的属性必须把 name，age，sex3个属性都写上才可以
const t: C1 = {
  name: 'tz',
  age: 18,
  sex: 'male',
};

// 对象s的属性只要满足T1或者T2其中一个类型定义即可
// 比如 s中只要有 name和age 或者 sex 就可以

// 通过
const s: C2 = {
  name: 'tz',
  age: 18,
  sex: 'male',
};

// 通过：因为包含了T2的全部属性sex; 
const s: C2 = {
  sex: 'male',
};

// 通过：因为包含了T1的全部属性name,age; 
const s: C2 = {
  name: 'tz',
  age: 18,
};

// 通过：因为包含了T2的全部属性sex; 
const s: C2 = {
  name: 'tz',
  sex: 'male',
};

// 通过: 因为包含了T2的全部属性sex; 
const s: C2 = {
  age: 18,
  sex: 'male',
};