TypeScript中的装饰器-JXin的博客

温馨提示

该文章距离上次更新已经过去了 1115 天，文章内容可能已经过时。

什么是装饰器？

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，访问符，属性或参数上。装饰器使用 @expression 这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。例如：

function test(target) {}

@test
class User {}

1
2
3
4

在TS中要使用装饰器，需要开启 experimentalDecorators

typescript中的装饰器

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true
    }
}

1
2
3
4
5
6

在JS中，装饰器是一个函数。（装饰器是要参与运行的）

装饰器可以修饰：

类
成员（属性+方法）
参数

装饰器的作用

装饰器，能够带来额外的信息量，可以达到分离关注点的目的。

信息书写位置的问题
重复代码的问题

上述两个问题产生的根源：某些信息，在定义时，能够附加的信息量有限

类装饰器

类装饰器的本质是一个函数，该函数接收一个参数，表示类本身（构造函数本身），例如：

function test(target) {
	console.log(123)
}

@test
class User {}

1
2
3
4
5
6

装饰器函数的运行时间：在类定义后直接运行

如何约束传入的target变量为类：

Function
new (参数) => object

例如：

function test(target: Function) {}

@test
class User {}

// 或者

function test(target: new (...args: any[]) => object) {}

@test
class User {}

1
2
3
4
5
6
7
8
9
10
11

类装饰器可以具有的返回值

void：仅运行函数
返回一个新的类：会将新的类替换掉装饰目标
例如：

function d1(target: new (...args: any[]) => object) {
  return class D1 extends target {};
}

@d1
class User {}

1
2
3
4
5
6

成员装饰器

属性装饰器

属性装饰器也是一个函数，该函数需要两个参数：

如果是静态属性，则为类本身；如果是实例属性，则为类的属性
固定为一个字符串，表示属性名

例如：实例属性：

function d1(target: any, key: string) {
  console.log(target === User.prototype, key);
}

class User {
  @d1
  prop1: string;

  @d1
  prop2: string;
}

1
2
3
4
5
6
7
8
9
10
11

typescript中的装饰器

实例属性和静态属性：

function d1(target: any, key: string) {
  console.log(target, key);
}

class User {
  @d1
  prop1: string;

  @d1
  static prop2: string;
}

1
2
3
4
5
6
7
8
9
10
11

typescript中的装饰器
可以看到，如果装饰的是实例的属性，则第一个参数就是类的属性，如果是静态属性，则第一个参数是类本身

方法装饰器

方法装饰器也是一个函数，该函数需要三个参数：

如果是静态属性，则为类本身；如果是实例属性，则为类的属性
固定为一个字符串，表示方法名
描述符对象（值，可写，可遍历，可配置）

例如：

function d1(target: any, key: string, descriptor: PropertyDescriptor) {
  console.log(target, key, descriptor);
}

class User {
  @d1
  do() {}
}

1
2
3
4
5
6
7
8

typescript中的装饰器

描述符对象返回了方法的值，是否可写，是否可遍历，是否可配置，是可以直接修改，例如：

function d1(target: any, key: string, descriptor: PropertyDescriptor) {
  console.log(target, key, descriptor);
  descriptor.enumerable = true;
  descriptor.value = function () {
    console.log(1234);
  };
}

class User {
  @d1
  do() {
    console.log(111);
  }
}

const user = new User();
user.do(); // 1234

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

参数装饰器（用处不是很大）

参数装饰器要求函数有三个参数：

如果方法是静态的，则为类本身；如果方法是实例方法，则为类的原型
方法名称
在参数列表中的索引（从0开始）

例如：

class User {
  test(a: number, @des b: number) {}
}

function des(target: any, method: string, index: number) {
  console.log(target, method, index); // {} test 1
}

1
2
3
4
5
6
7

装饰器的组合

多个装饰器的情况：会按照后加入先调用的顺序进行调用，例如：

function d1(target: new (...args: any[]) => object) {
  console.log(1);
}

function d2(target: new (...args: any[]) => object) {
  console.log(2);
}

@d1
@d2
class User {}

1
2
3
4
5
6
7
8
9
10
11

typescript中的装饰器

可以看到先打印出2再打印出1，说明装饰器的执行顺序是后加入的先执行

看另外一个例子：

function d1() {
  console.log(1);
  return (target: new (...args: any[]) => object) => {
    console.log("d1");
  };
}

function d2() {
  console.log(2);
  return (target: new (...args: any[]) => object) => {
    console.log("d2");
  };
}

@d1()
@d2()
class User {}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

typescript中的装饰器

可以看到函数执行之后返回一个装饰器，先执行的函数，装饰器后执行

reflect-metadata库

reflect-metadata库的作用：保存元数据

下载：

npm install reflect-metadata

// 或者

yarn add reflect-metadata

1
2
3
4
5

引入：

import "reflect-metadata";

使用：

import "reflect-metadata";

@Reflect.metadata("propA", 123)
class A {
  @Reflect.metadata("propa", 345)
  prop: string;
}

const obj = new A();

// 获取类上元数据
console.log(Reflect.getMetadata("propA", A)); // 123

// 获取对象属性上的元数据
console.log(Reflect.getMetadata("propa", obj, "prop")); // 345

// 判断类上是否有对应的元数据
console.log(Reflect.hasMetadata("propA", A)); // true

// 判断对象上的属性是否有对应的元数据
console.log(Reflect.hasMetadata("propa", obj, "prop")); // true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

TS自动注入的元数据

如果使用了 reflect-metadata 库，并在某个成员上添加了元数据，并且开启了 emitDecoratorMetadata ，则TS在编译中，会将约束的类型，作为元数据加入到相应位置，这样一来，TS的类型检查（约束）将有机会在运行时进行

class-validator库

class-validator库的作用：用于校验属性

下载：

npm install class-validator

// 或者

yarn add class-validator

1
2
3
4
5

使用：

import { validate, IsNotEmpty, MaxLength } from "class-validator";

class User {
  @IsNotEmpty({ message: "账号不能为空" })
  @MaxLength(5, { message: "账号最大为5个字符" })
  loginId: string;
}

validate(user).then((errors) => {
  console.log(errors);
	// errors打印信息：
  // [
  //   ValidationError {
  //     target: User {},
  //     value: undefined,
  //     property: 'loginId',
  //     children: [],
  //     constraints: { maxLength: '账号最大为5个字符', isNotEmpty: '账号不能为空' }
  //   }
  // ]
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

class-validator库中还有很多校验规则，具体可以查看官网

class-transformer库

class-transformer库的作用：可以将一个平面对象转换成一个类对象

例如：从服务端获取用户信息

import { plainToClass } from "class-transformer";
import axios from "axios";

const https = require("https");

// 在 axios 请求时，选择性忽略 SSL
const agent = new https.Agent({
  rejectUnauthorized: false,
});

class User {
  id: number;
  name: string;
  age: number;

  getName() {
    return this.name;
  }
}

axios
  .get("http://myjson.dit.upm.es/api/bins/dtvx", { httpsAgent: agent })
  .then((res) => res.data)
  .then((users: User[]) => {
    console.log(users); // [{ id: 0, name: 'xiaoming', age: '10' },{ id: 1, name: 'xiaohong', age: '11' }]
    for (let u of users) {
      u.getName(); // 报错
    }
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

可以看到返回的users虽然约束为对象User，但是并没有里面的getName方法，如果这时候要把users转换为User类对象，就可以使用 class-transformer 库中的 plainToClass

axios
  .get("https://myjson.dit.upm.es/api/bins/2onh", { httpsAgent: agent })
  .then((res) => res.data)
  .then((users: User[]) => {
    for (let u of users) {
      const user = plainToClass(User, u);
      console.log(user.getName()); // xiaoming xiaohong
    }
  });

// 或者

axios
  .get("https://myjson.dit.upm.es/api/bins/2onh", { httpsAgent: agent })
  .then((res) => res.data)
  .then((users) => {
    users = plainToClass(User, users);
    for (let u of users) {
      console.log(u.getName()); // xiaoming xiaohong
    }
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

class-transformer库不仅能转换平面对象，还能转换参数的类型

例如：上面的例子中，返回的age字段的类型是字符串类型，但是我们需要的是数字类型

axios
  .get("http://myjson.dit.upm.es/api/bins/dtvx", { httpsAgent: agent })
  .then((res) => res.data)
  .then((users) => {
    users = plainToClass(User, users);
    for (let u of users) {
      console.log(typeof u.age); // string string
    }
  });

1
2
3
4
5
6
7
8
9

这时候就可以使用 class-transformer 库中的 Type：

const https = require("https");
import "reflect-metadata";
import axios from "axios";
import { plainToClass, Type } from "class-transformer";

// 在 axios 请求时，选择性忽略 SSL

const agent = new https.Agent({
  rejectUnauthorized: false,
});

class User {
  id: number;
  name: string;

  @Type(() => Number)
  age: number;

  getName() {
    return this.name;
  }
}

axios
  .get("http://myjson.dit.upm.es/api/bins/dtvx", { httpsAgent: agent })
  .then((res) => res.data)
  .then((users) => {
    users = plainToClass(User, users);
    for (let u of users) {
      console.log(typeof u.age); // number number
    }
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

注意

class-transformer 库中的 Type依赖于 reflect-metadata库，所以reflect-metadata库也必须引入