《TypeScript》入门与精通-浅谈高级语法装饰器（Decorators）

class User {

constructor() {

console.log(“你好”);

}

}

new User()

这是一个简单的类，下面这个就是装饰器

// 装饰器本体

function UserConfig(constructor: any) {

console.log(constructor);

}

// 使用装饰器

@UserConfig

class User {

constructor() {

console.log(“你好”);

}

}

new User();

就这么简单，从中可以看到，装饰器的语法是一个@符后面跟着的是装饰器函数，装饰器函数有一个默认参数，它的这个默认参数就是待装饰的构造函数；

既然参数是构造函数，那么，我们就可以给其附加一些操作和属性，比如：

function UserConfig(constructor: any) {

constructor.prototype.name = () => {

console.log(“oliver”);

};

}

@UserConfig

class User {

constructor() {

console.log(“你好”);

}

}

const user = new User();

(user as any).name();

运行代码，打印出了：oliver，可以看出，通过装饰器，我们给User附加了一个name的方法，这个方法可以打印出名字，这里注意了，装饰器生效的实际并不是在实例化的过程中，而是在定义类的时候就已经生效了，比如：

function UserConfig(constructor: any) {

constructor.prototype.name = () => {

console.log(“oliver”);

};

}

@UserConfig

class User {

constructor() {

// console.log(1);

}

}

即使是这样，这个console.log还是会执行的，因为装饰器的生效时机是在类声明的时候，注意：类装饰器是所有装饰器中最晚执行的；

​

到这里可能有同学会问，装饰器能加参数吗，比如，我们需要通过参数来判断装饰器需不需要生效，小伙子，灵活点嘛，既然只要后面跟着的是一个函数，那么我们把函数作为返回值，不就可以接收参数了，只要能接收参数，那么里面自然就可以加逻辑，加判断，具体例子如下：

function UserConfig(params: string) {

return function(constructor: any) {

constructor.prototype.name = () => {

console.log(params);

};

};

}

@UserConfig(“oliver”)

class User {

constructor() {

console.log(“你好”);

<