说明
在定义类型的时候，固定的类型输出有时候不能满足我们的需求，为了接口的设计更加灵活，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 })
);
