首页 > 其他 > 详细

typescript装饰器-类装饰器

时间:2021-06-21 20:44:29      阅读:28      评论:0      收藏:0      [点我收藏+]
type Ctor<T> = new (...args: any[]) => T

function auto<T>(className: Ctor<T>) {
    return function (target: any, attr: any) {
        // target 是类的原型对象, attr 属性的名称 (url)
        console.log(target);
        console.log(attr);
        console.log(className)
        target[attr] = new className();
    }
}

function autoClass<T extends { new(...args: any[]): any }>(constructor: T) {
    return class extends constructor {
        name = "new property";
        age = "override";
    }
}


class Name {
    constructor() { }
    consoleMsg() {
        console.log(22222)
    }
}

@autoClass
class Greeter {
    property = "property";
    hello: string;
    name: string
    age: string

    @auto(Name)
    newProperty: Name

    constructor(hello: string) {
        this.hello = hello
    }

    getMsg() {

        this.newProperty.consoleMsg()
    }
}

let greeter = new Greeter(‘你好‘);
console.log(greeter)
console.log(greeter.name)
console.log(greeter.age)
greeter.getMsg()

运行结果:

技术分享图片

 

 

 如果Greeter类中没有属性name和age的话,类实例greeter需要设置为类型为any,否则无法使用greeter.name和greeter.age。因为name和age是是通过装饰器后期添加上去的!

如果想直接使用greeter.name和greeter.age,可以参考下面代码

function autoClassV2() {
  // 泛型 T 继承了一个构造函数,则说明T是包含构造函数的一种类型
return function autoClass<T extends { new(...args: any[]): any }>(constructor: T) { return class extends constructor { name = "new property"; age = "override"; } } } class Test { property = "property"; hello: string; name: string age: string @auto(Name) newProperty: Name constructor(hello: string) { this.hello = hello } getMsg() { this.newProperty.consoleMsg() } } // 将装饰后的类赋值给 Test1 const Test1 = autoClassV2()(Test) let test1 = new Test1(‘你好‘); console.log(test1) console.log(test1.name) console.log(test1.age) test1.getMsg()

运行结果

技术分享图片

 

typescript装饰器-类装饰器

原文:https://www.cnblogs.com/wuchen-wanou/p/14915374.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!