TypeScript的泛型和装饰器

写在前面

在上次我们粗略地学习了TypeScript的基本内容，今天就和大家分享一下TypeScript的进阶内容，那就是TypeScript的泛型和装饰器。

泛型和装饰器作为TypeScript的好装备！它们到底起着什么样神奇的作用呢！这篇文章将会为你解密！

泛型

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

• 多个类型参数
• 泛型约束
• 泛型接口
• 泛型类
• 泛型参数的默认类型

我们可以看到泛型的应用还是很广的！为了方便大家进一步理解，我们通过泛型参数的例子带大家更好地认识一下TS的泛型

举个例子:初识

• 下面这种情况,你想让函数的仓库一会儿是number，一会儿是string
  • 这样写会报错，因为js或者说ts是没有函数重载的！

function foo(a: number) {
  return a
}
function foo(b: string) {
  return b
}

---

• 如何解决？
  • 有同学说，用枚举类型，还不错，

function foo(a: number | string) {
  return a
}
console.log(foo(1));
console.log(foo('12sad'));

---

• 这样确实能解决我们的问题！
  • 那如果以后参数变成一个Object呢？
  • 再加一个枚举类型？
    • 太麻烦了，这个时候，就有了泛型，我们让类型作为一个参数传入

function foo<T>(a: T) {
  return a
}
const res1 = foo<number>(1)
const res2 = foo<string>('123')
const res3 = foo(true)
console.log(res1)
console.log(res2);
console.log(true);

• 我们可以看到，它同时还支持类型推导
  • 类型推导就是没有传入泛型，泛型会自动根据参数得到类型

举个例子:传入多个参数

• 当然，我们的泛型可以传入多个！

function fun<T, E, W>(arg1: T, arg2: E, arg3: W): T {
  return arg1
}

let res = fun<number, string, { name: string }>(1, '123', { name: '41' })
console.log(res);

泛型真的方便又简单,下面就让我们一起来康康装饰器！

装饰器

• 作为TS的初学者阿，一般都觉得装饰器实在是晦涩难懂！
• 没事，今天我们直接看代码，一下就懂了

举个例子:初识

function fn(target) {
  console.log(target);
  target.a = 12;
}

@fn
class User {}

console.log(User.a);

---

[Function: User]
12

• 我们可以看出装饰器的参数target默认就是我们类或者是函数的构造函数
• 在装饰器内可以通过target给类里面的属性赋值

举个例子:装饰器传参

• 装饰器的传参是比较特殊的
  • 我们的target在这里就是constructor会放到return出来的函数
  • 也就是会变成一个高阶函数，target放到了内部
  • 外部函数传入的参数可以在内部进行赋值

function fn(num: number) {
  return function (constructor: Function) {
    constructor.prototype.a = num
  }
}

@fn(41)
class User {
  a: number;
}

let obj = new User();
console.log(obj.a);

---

41

• 装饰器有点东西！