TS中的泛型和装饰器
本文目录：
- 1.什么是泛型
- 2.使用泛型变量
- 3.泛型接口
- 4.泛型类
- 5.泛型约束
- 6.装饰器
1.什么是泛型
泛型的定义：
在定义函数、接口或者类的时候，不预先指定具体的类型，而是在使用的时候再指定类型的一种特性。
泛型的优点：
提高代码可重用性，使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。
我们有一个需求， 要定义一个函数，这个函数返回的值类型和传入的参数的类型一致
function f(arg: number): number {
return arg;
}
但是这个函数只能传入number类型，如果要传入字符串，必须要改函数，或者换成any类型也可以达到效果，但是就失去了一些重要的类型信息，体会不到ts带来的好处。 这个时候我们使用泛型，就可以很好的实现这个需求
function f<T>(arg: T): T {
return arg;
}
T 是类型变量(也可以叫类型参数)，它是一种特殊的变量，只用于表示类型而不是值； 可以是任意字符 例如 U M都可以。帮助我们捕获用户传入的类型
泛型函数的两种使用方式:
第一种方式，编译器能够自动地推断出类型，这种方式更普遍一些
let v1 = f(123)
let v2 = f('字符串')
鼠标悬停上去，就可以分别得到 返回类型 number 和string
第二种方式，传入所有的参数，包含类型参数
let v3 = f<boolean>(false)
let v4 = f<string>('hello')
我们把这个函数f叫做泛型，因为它可以适用于多个类型；不同于使用ant，它不会丢失信息
2.使用泛型变量
将类型变量(也可以叫类型参数，泛型变量)当做一个类型使用
function fn1<U>(argc: U[]): U[] {
console.log(argc.length);
return argc;
}
fn1([1, 2, 3, 4, 4]);
在上面的代码中，泛型函数定义了一个类型变量T， 将这个类型变量当做我们类型类使用； 我们接收的参数是T类型的数组，返回的也是T类型的数组，这个T可以是任意类型；增加了程序的灵活性
使用多个泛型变量
泛型变量T使我们常用的一个字符，可以是任意字符，可以是多个字符
我们现在要写一个函数，交换任意两个类型组成的元组类型
function swap<T, U>(param: [T, U]): [T, U] {
return [param[0], param[1]];
}
swap([1, 'a']);
swap([[1, 2, 3], { name: 123 }]);
3.泛型接口
就是将泛型的类型变量和我们的接口结合起来，让接口可以支持多种类型，更加灵活
我们使用之前学习过的函数表达式的方式创建一个函数
let fn3 = function(x: string, y: string): string[] {
return [x, y];
};
这个fn3函数的类型我们没有定义，是利用的 类型推论自动获取的，现在使用接口来定义一个符合我们这个函数需要的形状
interface MyFn {
(x: string, y:string): string[]
}
// 这个时候就可以声明一个带类型的函数
let fn3:MyFn;
这个类型再修改一下，增加接口的复用性，将参数string换成动态的，由使用者决定；那么我们就需要使用泛型
interface MyFn {
<T>(x: T, y: T):T[]
}
let fn3:MyFn;
到这里我们的这个函数接口形状就已经完成，还可以将泛型参数提升到我们的接口名称上
interface MyFn<T> {
(x: T, y:T): T[]
}
let fn3:MyFn;
4.泛型类
泛型类看上去与泛型接口差不多。 泛型类使用（ <>）括起泛型类型，跟在类名后面。用于类的类型定义
类有两部分：静态部分和实例部分。 泛型类指的是实例部分的类型，所以类的静态属性不能使用这个泛型类型。
与接口一样，直接把泛型类型放在类后面，可以帮助我们确认类的所有属性都在使用相同的类型class GenerNum<T>
class GenerNum<T> {
zero: T;
add: (x: number, y: T) => T;
}
和接口一样，在使用这个类的的时候，还得传入一个类型参数来指定泛型类型
let myGeNum = new GenerNum<string>();
myGeNum.zero = '0';
myGeNum.add = function(x, y) {
return x.toString() + y;
};
5.泛型约束
在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法
语法： 使用 泛型变量T extends 继承 我们定义的接口； 约束了必须符合的形状
我们通过一个代码来解释什么是类型约束
function f3<U>(arg: U): U {
console.log(arg.length);
return arg;
}
上面的代码中，泛型 T 不一定包含属性 length，所以编译的时候报错了
我们可以对泛型进行约束，只允许这个函数传入那些包含 length 属性的变量。这就是泛型约束
interface LengthIn {
length: number;
}
function f3<U extends LengthIn>(arg: U): U {
console.log(arg.length);
return arg;
}
如果输入数字123，直接编译报错：类型“123”的参数不能赋给类型“LengthIn”的参数
// console.log(f3(123));
console.log(f3('hello'));
console.log(f3([1, 2, 3]));
console.log(f3({length:12, value: '测试'}));
6.装饰器
随着TypeScript和ES6里引入了类，在一些场景下我们需要额外的特性来支持标注或修改类及其成员。 装饰器（Decorators）为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式
若要启用实验性的装饰器特性，你必须在命令行或tsconfig.json里启用experimentalDecorators编译器选项
装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。它可以在不修改代码自身的前提下，给已有代码增加额外的行为
装饰器使用 @expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入
有 5 种装饰器：类装饰器、属性装饰器、方法装饰器、访问器装饰器、参数装饰器；我们这里只简单的介绍一下前两种(这也是在angular里面大量使用的两种) 类装饰器、属性装饰器
装饰器写法： 普通装饰器(无法传参）， 装饰器工厂（可以传参），一般都是这种方式； 给修饰器加上参数，或者叫做'注解'，或者叫元数据 (元数据编程)
我们先来看第一种普通装饰器
1.类装饰器
没有参数的装饰器，类装饰器的函数的参数就是 当前类的构造函数本身
function Component(param) {
console.log('这是装饰器');
console.log(param);
}
我们创建一个SideBar的侧边栏的组件类， 用组件装饰器修饰这个类
@Component
class SideBar {}
装饰器对类的行为的改变，是代码编译时发生的（不是TypeScript编译，而是js在执行机中编译阶段），而不是在运行时。这意味着，修饰器能在编译阶段运行代码。也就是说，装饰器本质就是编译时执行的函数。
类装饰器里面就只有一个参数， 值就是被装饰的类的构造函数
利用函数柯里化解决传参问题， 向装饰器传入一些参数，也可以叫 参数注解
function Component(param) {
return function(target) {
console.log('这是可以传参的装饰器');
// 这个param就是装饰器的元数据，外界传递进来的参数
console.log(param);
console.log(target);
};
}
在使用装饰器的时候
这个装饰器装饰紧跟在后面的类并增加一些属性，同时为其指定元数据
@Component({
templateUrl: 'aaaa',
styleUrl: 'bbb'
})
class SideBar {}
属性装饰器
属性装饰器表达式会在运行时当做函数被调用，有两个参数
第一个参数： 对于静态成员来说是 构造函数； 对于实例成员来说是原型对象; 第二个参数： 当前属性的名称
function Input(param?: any) {
return function(target, attr) {
// 属性装饰器里面的target 就是类的原型对象， 和类装饰器的第一个函数不一样
// 就是说在 类装饰器里面 target就是构造函数A，属性装饰器里面 target就是A.prototype
console.log(target, attr);
// 第二个参数attr就是 当前属性名; 我们可以设置为可选参数
console.log(param);
};
}
class SideBar {
@Input() public list1: any;
@Input('self-defined') public list: any;
}
