如何使用类装饰器添加的功能答案

【问题标题】：How to use function added with class decorator如何使用类装饰器添加的功能
【发布时间】：2015-12-03 07:38:10
【问题描述】：

我创建了一个类装饰器，它所做的只是向类的原型添加一个函数

export function myDecorator(target: any): any {
'use strict';
var original = target;

function construct(constructor, args) {
    var c: any = function () {
        return constructor.apply(this, args);
    };
    c.prototype = constructor.prototype;
    return new c();
}

var f: any = function (...args) {
    return construct(original, args);
};

f.prototype = original.prototype;

f.prototype.decoratedFunction = function() {
    // decorated function body
};

return f;}

但是..当我装饰一个类时，装饰函数无法解析，因此它不会编译。

 @myDecorator
class MyClass {

    constructor() {
        this.decoratedFunction();
    }
}

有什么想法吗？还是目前没有解决方法？

【问题讨论】：

这个["decoratedFunction"]();否则你应该声明它
谢谢。现在就可以了

标签： typescript decorator

【解决方案1】：

您可以使用此功能的方式是：

1) 在类中声明：

@myDecorator
class MyClass {
    constructor() {
        this.decoratedFunction();
    }
    decoratedFunction: () => void;
}

2) 使用方括号：

this["decoratedFunction"]();

【讨论】：

【解决方案2】：

没有办法让装饰器添加的功能在打字稿中输入和“可用”。这样做的原因是该函数仅在运行时添加（在 javascript 中而不是 typescript 代码中）。

正如已经指出的那样，让它工作的唯一方法是添加一个存根或使用括号表示法。这似乎是对装饰器的不好使用，它们应该用于添加类未明确需要的功能。例如注入、验证或调试日志记录。

您想做的事情对于课程的运作方式至关重要。如果删除装饰器，类会抛出错误，因为添加的方法是在类中调用的，在我看来不应该是这种情况。

一个简单的基类应该可以为你解决问题，又漂亮又整洁：

abstract class MyBaseClass {
    protected decoratedFunction() {
        // do some magic.. 
    }
}

class MyClass extends MyBaseClass {
    constructor() {
        this.decoratedFunction();
    }
}

其他解决方案可能是使用decorator pattern，如下所示：

class SomeClass {
    // ...
}

class DecoratedClass extends SomeClass {
    constructor() {
        super();
        this.decoratedFunction();
    }
    private decoratedFunction() {
        // Do some magic....
    }
}

或者使用组合（composition over inheritance）来添加功能：

class ClassWithMagic {
    public decoratedFunction() {
        // Do some magic...
    }
}

class SomeClass {
    private compositionInstance = new ClassWithMagic();
    constructor() {
        this.compositionInstance.decoratedFunction();
    }
}

希望这会有所帮助。装饰器似乎不是解决问题的正确方法，但是 oop 有其他方法可以解决相同的问题。

【讨论】：