typescript 泛型篇

说明

在定义类型的时候，固定的类型输出有时候不能满足我们的需求，为了接口的设计更加灵活，ts提供了类似于函数传参的方式让我们可以通过指定输入来定制化的输出不同的接口定义，这种输出入的参数类型称之为泛型

举个🌰

interface Person<N> {
  name: string;
  age: N;
}
const xiong: Person<string> = {
  name: "xiong",
  age: "18"
// age: 18 //报错
};

// 通过上面的例子可以看出，Person类型的age属性取决于传入的N类型

函数中使用泛型

与接口的泛型使用一样，在应用类型的时候传入的泛型类型，决定了最终的函数类型，当T是number类型的时候，传入的参数必须是number类型，否则报错

function Person<T>(age: T) : T {
  return age;
}
// Person<string>(1); //报错 类型“number”的参数不能赋给类型“string”的参数。
Person<number>(1);

class中使用泛型

class Person<T>{
  name:T,
  age:number
  constructor(name:T,age:number){
    this.name = name
    this.age = age
  }
}
const xiong = new Person<string>('xiong',18)
console.log(xiong.name,xiong.age) // xiong 18

多个泛型参数

class Person<T, N> {
  name: T;
  age: N;
  job: string;
  constructor(name: T, age: N, job: string) {
    this.name = name;
    this.age = age;
    this.job = job;
  }
}
const xiong = new Person<string, number>("xiong", 18, "前端开发");
console.log(xiong); // {name: "xiong", age: 18, job: "前端开发"}
xiong.name = "xxxx"; //pass

泛型约束

可以通过extends 来约束传入的类型，举个🌰：

interface Person {
  name: string;
  age: number;
}
function createPerson<T extends Person>(person: T) {
  return person;
}
interface Xiaohong {
  name: string;
  age: number;
  count: number;
}
// createPerson<Xiaohong>() // 未提供 "person" 的自变量。
createPerson<Xiaohong>({ name: "xiongxiong", age: 18, count: 2021 });
console.log(
  createPerson<Xiaohong>({ name: "xiongxiong", age: 18, count: 2021 })
);