ts装饰器(注解)
官方文档：https://www.tslang.cn/docs/handbook/decorators.html
这个东西在java里叫注解，不过在ts中，一个装饰器对应一个方法
首先执行命令：
tsc --target ES5 --experimentalDecorators然后配置一下tsconfig.json就可以使用了
{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}首先我们定义一个class
class User {
private id: Number | undefined;
private name: string | undefined;
}我们编写一个装饰器对应的逻辑，实现java中lombok里@Data生成getter和setter
function Data(constructor: Function | ObjectConstructor) {
console.log('@Data', { constructor })
Object.getOwnPropertyNames(new constructor()).forEach(key => {
const firstUpperProperty = key.charAt(0).toUpperCase() + key.substring(1)
if (!constructor.prototype[`get${firstUpperProperty}`]) {
constructor.prototype[`get${firstUpperProperty}`] = function () {
return this[key]
}
}
if (!constructor.prototype[`set${firstUpperProperty}`]) {
constructor.prototype[`set${firstUpperProperty}`] = function (value: any) {
this[key] = value
}
}
})
}我们将这个注解放到类的上面
@Data
class User {
private id: Number | undefined;
private name: string | undefined;
}尝试调用一下
const user = new User()
user.setId(1);
user.setName("John");
console.log(user.getId()); // 1
console.log(user.getName()); // "John"可以看到确实生效，这里打印的参数：
image-20220621184302118
顺带一提注解可以以复数形式存在，上方文档提到了，这里就不多赘述
我们继续编写注解，刚刚这个是类装饰器
接下来来个给默认的getter方法获取时，如果没有就提供一个默认值的注解@DefaultVal
这是一个属性装饰器
function DefaultVal(val: any) {
return function (target: any, key: string) {
console.log('@DefaultVal', { target, key, val });
const firstUpperProperty = key.charAt(0).toUpperCase() + key.substring(1)
target.constructor.prototype[`get${firstUpperProperty}`] = function () {
return this[key] ?? val
}
};
}注意优先级，我们的属性装饰器优先级高于我们的类装饰器，所以getter别被覆盖了
类中不同声明上的装饰器将按以下规定的顺序应用：
- 参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个实例成员。
- 参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个静态成员。
- 参数装饰器应用到构造函数。
- 类装饰器应用到类。
使用方式：
@Data
class User {
private id: Number | undefined;
@DefaultVal('nobody')
private name: string | undefined;
}演示：
console.log({ 'new User().getName()': new User().getName() });输出结果：
{'new User().getName()': 'nobody'}打印参数：
image-20220621184325477
然后是方法装饰器
这里我们指定返回值不能为null，否则报错
function NonNull() {
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log('@NonNull', { target, propertyKey, descriptor });
let value = descriptor.value
descriptor.value = () => {
const result = value.call()
if (result === null || result === undefined) throw new Error(`${propertyKey} must non-null`)
return result
}
};
}使用：
@Data
class User {
private id: Number | undefined;
@DefaultVal('nobody')
private name: string | undefined;
@NonNull()
toString() {
// return Object.prototype.toString();
return null
}
}测试：
new User().toString();
image-20220621184052422
打印结果：
image-20220621184340137
最后是参数装饰器
这里懒得写了，就输出下日志吧：
function Log(target: Object, propertyKey: string | symbol, parameterIndex: number) {
console.log('@Log', { target, propertyKey, parameterIndex });
}使用：
@Data
class User {
private id: Number | undefined;
@DefaultVal('nobody')
private name: string | undefined;
@NonNull()
toString() {
return Object.prototype.toString();
// return null
}
equals(@Log val: User) {
return deepEqual(this, val);
}
}打印：
image-20220621184455024
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-06-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读