泛型

泛型的认识

export {}

// 类型的参数化

// 在定义这个函数时，我们不决定这些参数的类型，并不知道它的参数类型，也不知道它的返回值类型
// 只有在调用这个函数的时候，才会决定这些参数的类型，才会决定这个函数的返回值类型
// 而是让调用者以参数的形式告知这个函数，这个函数的参数类型和返回值类型
// 这种参数化的类型，就是泛型

// 1.定义一个函数，这个函数的参数类型和返回值类型是未知的
function sum<Type>(num: Type): Type {
  return num
}

// 2.调用这个函数，传入参数，决定这个函数的参数类型和返回值类型
// 调用方式一：明确的传入类型
sum<number>(123)
sum<string>('123')
sum<boolean>(true)
sum<number[]>([1, 2, 3])
sum<{ name: string }>({ name: 'zs' })

// 调用方式二：类型推断
sum(123)
sum('123')

泛型接受类型参数

export {}

// 多个类型参数
function fn<A,B,C,D>(arg1:A,arg2:B,arg3:C,arg4:D){
  return arg1
}

// 多个类型参数的调用
fn<number,string,boolean,undefined>(1,'2',true,undefined)

fn<number,number,number,number>(1,2,3,4)

fn(1,'2',true,undefined)

泛型接口的使用

export {}

// 1.定义一个接口，这个接口的参数类型和返回值类型是未知的
interface IType<T1,T2> {
  name: T1
  age: T2
}

// 2.调用这个接口，传入参数，决定这个接口的参数类型和返回值类型
const obj: IType<string, number> = {
  name: 'zs',
  age: 18
}

// 这里的 IType 是一个泛型接口，这个泛型接口的参数类型是未知的
// 注意：泛型接口是不能被推断的，必须要明确的传入类型
// const obj: IType = { 
//   name: 'zs',
//   age: 18
// }

泛型类的使用

export {}

// 泛型类的使用
// 1. 定义一个类
// 2. 在类中使用泛型
class Point<T>{
  x: T
  y: T
  z: T
  constructor(x: T, y: T, z: T) {
    this.x = x
    this.y = y
    this.z = z
  }
}

// 实例化类的时候确定泛型的类型
const p1 = new Point(1, 2, 3)
const p2 = new Point<string>('a', 'b', 'c')
const p3:Point<string> = new Point('a', 'b', 'c')

泛型的类型约束

export {}

// 定义接口
interface ILength {
  length: number; // 定义length属性
  // abc: string;
}

// 定义函数
// extends 表示泛型T必须是ILength接口的实现类
// T extends ILength 表示泛型T必须是ILength接口的实现类
function getLength<T extends ILength>(arg: T) {
  // length是ILength接口中定义的属性
  // return arg.abc;
  return arg.length;
}

// getLength(123); // error
getLength('abcd'); // 4
getLength([1, 2, 3]); // 3
getLength({ length: 10 }); // 10