ts中的泛型-526互联

在 TypeScript 中我们会使用泛型来对函数的相关类型进行约束这里的函数同时包含 class 的构造函数因此一个类的声明部分也可以使用泛型那么什么是泛型？如果通俗的理解泛型呐？

什么是泛型

泛型 (Generics) 是指在定义函数接口或类的时候不预先指定具体的类型而在使用的时候在指定类型的一种特性

通俗的解释泛型是类型系统中的参数主要作用是为了类型的重用从上面定义可以看出它只会用函数接口和类中它和 js 程序中的函数参数是两个层面的事物（虽然意义是相同的）因为 typescript 是静态类型系统是在 js 进行编译时进行类型检查的系统因此泛型这种参数实际上是编译过程中的运行时使用之所以称它为参数是因为它具备和函数参数一模一样的特性

泛型函数

目标：声明一个函数接收一个参数接收什么参数返回什么值

function getValue<T>(value: T): T {
	return value;
}

getValue<string>("hello");
getValue<number>(100);

//  泛型实参可以忽略   你传递的参数的类型就是要传递的泛型的类型
echo("hello")

泛型类

需求：通过类创建对象对象的 key 属性可以是字符串可以是数值对象的 value 属性可以是字符串可以是数值

{key: string, value: string}
{key: number, value: number}

class StringKeyValuePair {
	constructor(public key: string, public value: string){}
}

class NumberKeyValuePair {
	constructor(public key: number, public value: number){}
}

class KeyValuePair<K, V> {
	constructor(public key: K, public value: V){}
}

泛型接口

需求：创建 fetch 方法用获取数据当获取用户数据时 fetch 方法的返回值类型为用户当获取产品数据时 fetch 方法的返回值类型为产品不沦是用户数据还是产品数据都要被包含在响应对象中

interface MyUserResponse {
	data: User;
}

interface MyProductResponse {
	data: Product;
}

interface MyResponse<T> {
	data: T | null;
}

function fetch<T>(): MyResponse<T> {
	return {data: null};
}

interface User {
	username: string;
}

interface Product {
	title: string;
}

fetch<User>().data?.username;
fetch<Product>().data?.title;

泛型约束

泛型约束是指对泛型参数的范围进行约束就是说虽然类型可以被当做参数传递但是传递的类型不能是随意的想传什么就传什么通过泛型约束可以限制能够传递的类型的范围

// 限制类型 T 的范围  就是说  T  的类型要么是字符串要么是数值  其他的是不可以的
class StringOrNumberArray<T extends string | number> {
	constructor(public collection: T[]) {}
	get(index: number): T {
		return this.collection[index];
	}
}

new StringOrNumberArray<string>(["a", "b"])
new StringOrNumberArray<number>([100, 200])

// 类型  boolean  不满足约束  string | number
// new StringOrNumberArray<boolean>([true, false]);

function echo<T extends string | number>(value: T): T {
	return value;
}
echo<string>("hello")
echo<number>(100)
echo<boolean>(true)

interface Person {
	name: string;
}

function echo<T extends Person>(value: T): T{
	return value;
}
echo<Person>({name: "张三"})

class Person {
	constructor(public name: string) {}
	
}
class Custom extends Person {}
function echo<T extends Person>(value: T): T {
	return value;
}

echo<Person>(new Person("张三"))；
echo<Custom>(new Custom("李四"));

interface Printable {
	print(): void;
}

function echo<T extends Printable>(target: T) {
	target.print()
}
class Car {
	print() {}
}
class Hourse {
	print() {}
}
echo<Car>(new Car());
echo<Hourse>(new Hourse());

继承泛型类

class Store<T> {
	protected _objects: T[] = [];
	add(obj: T) {
		this._objects.push(obj);
	}
}

interface Product {
	name: string;
	price: number;
}
const store = new Store<Product>();

class CompressibleStore<T> extends Store<T> {}
new CompressibleStore<Product>();

clsaa ProductStore extends Store<Product> {}