TypeScript error regarding uninitialized variables in class constructor

Question

TypeScript is complaining about an uninitialized class property, even though it appears to be properly assigned.

Here's a minimum reproducible example:

type Config = {
    color: string;
}

class Toto {
    color: string;

    constructor(config: Config) {
        this.setConfig(config);
    }

    setConfig(config: Config) {
        this.color = config.color;
    }
}

TypeScript playground

The compiler underlines the color property definition and throws the following error:

Property 'color' has no initializer and is not definitely assigned in the constructor.

The issue appears to be with using the setConfig method to set the value of color, since the following code produces no compiler errors:

type Config = {
    color: string;
}

class Toto {
    color: string;

    constructor(config: Config) {
        this.color = config.color;
    }
}

This problem is I want to be able to use the setConfig method to set class properties to different values during the lifetime of a class instance. I don't want to have to repeated the same code within both my constructor and setConfig method just to get around a TS compiler issue.

Does anyone know why the compiler can't see that the class variable is properly being set in the constructor?

What you're describing isn't allowed in TypeScript because setConfig could be overridden in a subclass and that override could choose to not set this.color. The only way TypeScript can guarantee that this.color is set is by requiring it to be set directly in the constructor. — Dai
– Dai, Commented Jul 14, 2020 at 5:56
You can always initialise it to null or empty string or a similar default value. — VLAZ
– VLAZ, Commented Jul 14, 2020 at 6:00
Ah, so you could subclass Toto and overide it with a different setConfig method and then that new method would be used by the Toto class constructor? @Dai — Robert Cooper
– Robert Cooper, Commented Jul 14, 2020 at 6:02

apokryfos · Accepted Answer · 2020-07-14 06:36:44Z

3

If you as the developer are certain that color will not go uninitialized in the constructor you can just tell the compiler that this is the case:

type Config = {
    color: string;
}

class Toto {
    color!: string;

    constructor(config: Config) {
        this.setConfig(config);
    }

    setConfig(config: Config) {
        this.color = config.color;
    }
}

The ! tells the compiler that this variable will not be null at the point when ! is used.

Of course in an ideal world the compiler would be able to detect the indirect setting but I don't think this is currently possible.

Playground Link

answered Jul 14, 2020 at 6:36

apokryfos

40.9k11 gold badges85 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Robert Cooper · Accepted Answer · 2020-07-14 21:25:57Z

TypeScript does not allow this since the setConfig method could be overwritten if even the Toto class is subclassed:

class SubToto extends Toto {
    setConfig() {
        // Do nothing
    }
}

Therefore, the two possible approaches are:

Set the values directly in the constructor, and repeat the code within setConfig:

class Toto {
    color: string;

    constructor(config: Config) {
        this.color = config.color;
    }

    setConfig(config: Config) {
        this.color = config.color;
    }
}

This has the downside of repeating the code.

Setting an initial empty value to the property.

class Toto {
    color: string | null = null;

    constructor(config: Config) {
        this.setConfig(config)
    }

    setConfig(config: Config) {
        this.color = config.color;
    }
}

This has the downside of having to now check if the property is empty before using it elsewhere in your class methods.

mgm793 · Accepted Answer · 2020-07-14 06:01:28Z

0

You can do it like this, because initially color is undefined. Or initialise it to empty string like private color: string = '';.

type Config = {
    color: string;
}

class Toto {

    private color: string|undefined;
    
    constructor(config: Config) {
        this.setConfig(config);
    }

    setConfig(config: Config) {
        this.color = config.color;
    }
}

answered Jul 14, 2020 at 6:01

mgm793

2,08618 silver badges26 bronze badges

2 Comments

Dai Over a year ago

I think private color: string | null = null; is better than using undefined, imo.

Robert Cooper Over a year ago

Ya, I was hoping to avoid having to set an initial empty value, but it appears as though it might be the best workaround.

Collectives™ on Stack Overflow

TypeScript error regarding uninitialized variables in class constructor

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related