Typescript overriding extended property within constructor

Question

I'm having an issue with Typescript where I extend a class and override a property from the super, however the super class property is still read in the constructor when I instantiate the sub class. Please see the below example:

class Person {

    public type:string = 'Generic Person';

    public constructor() {
        console.log(this.type);
    }

}

class Clown extends Person {

    public type:string = 'Scary Clown';

}

var person = new Person(), // 'Generic Person'
    clown = new Clown(); // 'Generic Person'

console.log(person.type); // 'Generic Person'
console.log(clown.type); // 'Scary Clown'

My expected behaviour would be 'Scary Clown' when I instantiate an instance of Clown. Is there another way I can achieve this without passing the values into the constructor itself or having some sort of init method that I fire manually after instantiating?

Thanks in advance :)

Answer 1

Property initializers are inserted right at the top of the constructor before the manually entered body of the constructor. So

class Person {
    public type:string = 'Generic Person';
    public constructor() {
        console.log(this.type);
    }
}

Becomes

var Person = (function () {
    function Person() {
        this.type = 'Generic Person';
        // NOTE: You want a different value for `type`
        console.log(this.type);
    }
    return Person;
})();

As you can see there is no way to get a different type in the parent constructor body using a property initializer.

Alternatively don't use type and rely on built-in constructor property:

interface Function{name?:string;}

class Person {    
    public constructor() {
        console.log(this.constructor.name);
    }
}

class Clown extends Person {    
}

var person = new Person(), // 'Person'
    clown = new Clown(); // 'Clown'

console.log(person.constructor.name); // 'Person'
console.log(clown.constructor.name); // 'Clown'