带参数的类的装饰器
学习 python 的同学应该知道，python 中也有装饰器，而且 python 中的众多框架也在大量使用装饰器，如下就是 flask 的一个典型应用
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello, World!"
python 的装饰器是可以接收参数的，那么 TypeScript 的类的装饰器该如何接收参数，我们需要在原来的装饰器函数上再套一层函数，由这层函数接收参数：
function addDecorator(isUse: boolean) {
if (isUse) {
return function(constructor: any) {
console.log("use decorator");
};
} else {
return function(constructor: any) {
console.log("not use decorator");
};
}
}
@addDecorator(false)
class Test {}
很明显，当 addDecorator 传入 true 的时候会打印 use decorator，传入 false 的时候会打印 not use decorator
解决类装饰器函数参数为 any 的类型
回到类装饰器函数上：
function addDecorator(constructor: any) {
constructor.prototype.getDecorator = () => {
console.log("benjamin");
};
}
@addDecorator
class Test {}
const t: Test = new Test();
t.getDecorator();
那这样写，会报如下错误：
原因之前也讲过了，那时我们的解决办法就是将t的类型临时改变一下：
(t as any).getDecorator();
这样就解决了报错，程序可以正确执行，但这不是一个很好的解决方案，我们可以采用 TypeScript 的泛型机制，把 any 改成泛型：
function addDecorator<T>(constructor: T) {
constructor.prototype.getDecorator = () => {
console.log("get decorator");
};
}
这样修改，又会引来如下报错：
原因是T这个泛型没有js的构造函数，也就没有prototype这个原型属性，那么我们可以让泛型T继承构造函数，那泛型T就有了prototype这个原型属性
PS：构造函数 ，是一种特殊的方法。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与 new 运算符一起使用在创建对象的语句中。
TypeScript 的构造函数写法如下：
new (...args: any[]) => any
或
new (...args: any[]) => {}
那么整体代码改为：
function addDecorator<T extends new (...args: any[]) => any>(constructor: T) {
return class extends constructor {
getDecorator() {
console.log("get decorator");
}
};
}
@addDecorator
class Test {}
const t: Test = new Test();
(t as any).getDecorator();
来解释下这个构造函数，去掉 new，可以看出(...args: any[]) => any 就是一个函数，它接收多个类型为 any 的参数，返回类型为 any，再加上 new 就说明这是一个构造函数，那么可能有人会问，为什么构造函数要穿多个参数，我们可以把参数去掉，变为：
new () => {}
那么此时会得到一个报错：
通过报错提示，我们知道TypeScript的构造函数必须为一个接收多个参数为any类型的函数
那么改的另外一处代码为：
return class extends constructor {
getDecorator() {
console.log("get decorator");
}
};
这段代码的意思是返回一个类，这个类继承了 constructor，它里面附加 getDecorator 方法，那么我们也可以在这个返回的类里边添加属性或修改属性值，代码修改如下：
function addDecorator<T extends new (...args: any[]) => {}>(constructor: T) {
return class extends constructor {
name = "decorator";
getDecorator() {
console.log("get decorator");
}
};
}
@addDecorator
class Test {
private name: string;
constructor(name: string) {
console.log(name);
this.name = name;
}
}
const t: Test = new Test("test");
console.log(t);
(t as any).getDecorator();
我们在 Test 类中增添了一个构造函数，它接收一个 name 的参数，然后我们在装饰器中修改了 name 的属性，运行下代码：
但我们依然还是没有解决any类型问题
那么原因是在于我们的t实例在创建的时候，它本身并没有getDecorator这个方法，它是装饰器偷偷装饰上去的，而TypeScript推断不出来，我们就需要修改一下写法：
function addDecorator() {
return function<T extends new (...args: any[]) => {}>(constructor: T) {
return class extends constructor {
name = "decorator";
getDecorator() {
console.log("get decorator");
}
};
};
}
class Test {
private name: string;
constructor(name: string) {
console.log(name);
this.name = name;
}
}
const t = addDecorator()(Test); // 包装一下Test类
const t1 = new t("test");
t1.getDecorator();
这里我们用工厂函数返回一个装饰器函数，然后用这个返回的装饰器函数去包装一下 Test 类，TypeScript 就能感知到 getDecorator 函数被添加到了 Test 类上，代码就不会有任何报错了，我们虽然没有用@的装饰器的语法，但我们也没有改变 Test 类，是装饰器的另一种实现，运行代码：
正确运行，没有问题
原文链接
网友评论