Question

我刚刚开始在Typescript中使用装饰器，但是在向类添加方法时遇到了麻烦。

如何使用添加的方法访问this。例如：

const decorator = (target: any): void => {
    target.prototype.doSomething = () => {
        // how can you access the class instance here?
        console.log('in the new method! value =', this.myValue);
    };
};

@decorator
class Something {
    public myValue = 42;
}


const obj = new Something();
obj.doSomething(); // displays in the new method! value = undefined

我知道装饰器将类作为参数接收，这就是它正在修改的内容，因此有意义的是该实例（尚未创建）不可用。但是在调用该方法时，该实例确实存在。

我已经在线阅读了很多关于装饰器的讨论，并且有很多使用console.log来说明这些方法如何工作的示例，但是我还没有发现任何实际使用{{ 1}}。

这有可能吗？

Answer 1

如果您查看official documentation，这是classDecorator的外观：

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

在您的情况下：

function decorator<T extends {new(...args:any[]):{}}>(constructor:T) {
    return class extends constructor {
        doSomething = function() {
            console.log("Value: " + this.myValue);
        }
    }
}

@decorator
class Something {
    public myValue = 42;

    public doSomething(){}
}


const obj = new Something();
obj.doSomething();

将用装饰器返回的任何内容替换类定义，这样“ this”关键字将具有正确的值。

原始类中的空doSomething函数只是一个占位符，因为打字稿在理解类在装饰器之后已被更改并在最后一行给出错误时会遇到一些问题。有关更多信息和其他可能性，请查看this issue或this stackoverflow question。

如何通过Typescript中的装饰器访问添加到类中的方法中的“ this”？

1 个答案: