学习TypeScript14（泛型）

泛型在TypeScript 是很重要的东西 例如 vue3 是用ts编写的 里面用到了非常多的泛型

1. 函数泛型

1.1. 不使用泛型

以下这两个函数，一个是数字类型的函数，另一个是字符串类型的函数，其实就是类型不同

function num(a: number, b: number): Array<number> {
	return [a, b];
}
num(1, 2);
function str(a: string, b: string): Array<string> {
	return [a, b];
}
str('独孤', '求败');

1.2 使用泛型优化

语法为函数名字后面跟一个<参数名> 参数名可以随便写 例如我这儿写了T

当我们使用这个函数的时候把参数的类型传进去就可以了 （也就是动态类型）

function Add<T>(a: T, b: T): Array<T> {
	return [a, b];
}

Add<number>(1, 2);
Add<string>('1', '2');

我们也可以使用不同的泛型参数名，只要在数量上和使用方式上能对应上就可以。

function Sub<T, U>(a: T, b: U): Array<T | U> {
	const params: Array<T | U> = [a, b];
	return params;
}

Sub<Boolean, number>(false, 1);

2. 定义泛型接口

声明接口的时候 在名字后面加一个<参数>

使用的时候传递类型

interface MyInter<T> {
	(arg: T): T;
}
function fn<T>(arg: T): T {
	return arg;
}
let result: MyInter<number> = fn;
result(123);

3. 对象字面量泛型

let foo: { <T>(arg: T): T };
foo = function <T>(arg: T): T {
	return arg;
};
foo(123);

4. 泛型约束

我们期望在一个泛型的变量上面，获取其length参数，但是，有的数据类型是没有length属性的

function getLegnth<T>(arg: T) {
	return arg.length;
}

这时候我们就可以使用泛型约束，于是，我们就得对使用的泛型进行约束，我们约束其为具有length属性的类型，这里我们会用到interface，代码如下

interface Len {
	length: number;
}
function getLegnth<T extends Len>(arg: T) {
	return arg.length;
}
getLegnth<string>('123');

5. 使用keyof 约束对象

其中使用了TS泛型和泛型约束。首先定义了T类型，并使用extends关键字继承object类型的子类型，然后使用keyof操作符获取T类型的所有键，它的返回类型是联合类型，最后利用extends关键字约束，K类型必须为keyof T联合类型的子类型

function prop<T, K extends keyof T>(obj: T, key: K) {
	return obj[key];
}
let o = { a: 1, b: 2, c: 3 };
prop(o, 'a');
prop(o, 'd'); //此时就会报错发现找不到

6. 泛型类

声明方法跟函数类似名称后面定义<类型>

使用的时候确定类型new Sub<number>()

class Sub<T> {
	attr: T[] = [];
	add(a: T): T[] {
		return [a];
	}
}

let s = new Sub<number>();
s.attr = [1, 2, 3];
s.add(123);

let str = new Sub<string>();
str.attr = ['1', '2', '3'];
str.add('123');

学习TypeScript15（tsconfig.json配置文件）