带有String的TypeScript简单装饰器

时间:2015-05-26 20:06:07

标签: javascript typescript

我正在学习打字稿1.5,我在尝试在我的房产上做一个简单的装饰时面临一个小问题。

实际上,我需要在应用程序运行时在我的属性中注入一个字符串。真的很简单,但我不知道如何处理。我已经阅读了很多例子,但没有看到我需要的东西,只需在我的变量中注入一个字符串。

export class MyClass {

    @Log
        filePath:string;

    constructor() {

    }

    logMe() {
        console.log(this.filePath);
    }

}

function Log() {
    return function (target, key, descriptor) {
        console.log(target);
        console.log(key);
        console.log(descriptor);
        descriptor.Log = "I m logged";
        return descriptor;
    }
}

我的logMe函数记录了一个未定义的值。我之前从未使用装饰,这就是为什么我需要一个非常简单的案例。

你能帮助我吗?

提前谢谢

1 个答案:

答案 0 :(得分:2)

首先,属性装饰器的签名如下所示:

type PropertyDecorator = (target: Object, propertyKey: string | symbol) => void;

更改装饰器以匹配此签名。

其次,由于您没有将任何参数传递给装饰器,因此您应该直接在Log函数上定义参数。

此时,您可以将字符串分配给定义装饰器的相应原型属性。您最终应该得到以下结果:

function Log(target: Object, propertyKey: string | symbol) {
    target[propertyKey] = "I'm logged";
}

现在,在运行方法时,默认情况下会输出I'm logged

var c = new MyClass();
c.logMe(); // outputs: I'm logged
c.filePath = "test";
c.logMe(); // outputs: test

Playground

这样你可以更好地理解这一点,这是一个带参数的例子:

function Log(defaultValue = "I'm logged") {
    return function (target: Object, propertyKey: string | symbol) {
        target[propertyKey] = defaultValue;
    };
}

请注意,在执行此操作时,您必须始终使用括号进行装饰:@Log()。如果只做@Log,则不会出错。目前有open issue这个。

Playground