Decorated Field Gives Read Only Error In TypeScript

I am learning how to work with decorators and have the following problem. This is my code: function boo(): any { return function(target: object, propertyKey: string, descriptor

Solution 1:

With strict null checks null is not assignable to string. You need to make the type of str string | null.

The other issue is that you need to invoke boo. boo is technically a decorator factory. The decorator itself is the function with the signature (target: object, propertyKey: string, descriptor: PropertyDescriptor) => PropertyDescriptor.

function boo(): any {
    return function(target: object, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("boo");
        return descriptor;
    }
}

class A {

    @boo()
    private str: string| null = null;

    constructor() {
        this.str = "test";
    }

}

let a: A = new A();

You need to use a decorator factory if you need to pass in extra parameters to the decorator. Ex:

function boo(otherInfo: string): any {
    return function (target: object, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("boo " + otherInfo);
        return descriptor;
    }
}

class A {

    @boo("Other info")
    private str: string | null = null;

    constructor() {
        this.str = "test";
    }

}

In this case you don't really need to use a decorator factory, this would work as well:

function boo(target: object, propertyKey: string) {
    console.log("boo");
}

class A {

    @boo
    private str: string | null = null;

    constructor() {
        this.str = "test";
    }

}

Although the above works, I would generally still use a decorator factory, easier to add parameters later and makes things consistent.