TypeScript: static properties and inheritance

Question

I'm quite new to TypeScript (1.8) and I have a small issue with inheritance and static properties.

Please find below the test code I'm currently running:

class A {
    public static Items = {
        FOO: 'A'
    };

    public show() {
        alert(this.constructor.Items.FOO);
    }
} 

class B extends A {
    public static Items = {
        FOO: 'B'
    };
}

var a = new A();
var b = new B();

a.show(); // alert "A"
b.show(); // alert "B"

TypeScript Playground link

This code runs fine and the two alerts are shown as expected.

BUT the TypeScript compiler throws an error : Property "Items" does not exist on type "Function"

I understand the warning and it's totally right from a TypeScript point of view, but how can I achieve the same result while making the compiler happy? this.Items.FOO obviously does not work and I didn't find a self equivalent or something like that...

Am I missing something?

Thanks in advance!

Notice that your show method won't work when you introduce an additional subclass that does not have a static Items property, e.g. class C extends A {} — Mattias Buelens
– Mattias Buelens, Commented Jun 9, 2016 at 18:53

Community · Accepted Answer · 2017-05-23 12:08:48Z

10

There was a similar question today: Referencing class without name to use different static method in subclasses in TypeScript.

There's a discussion/suggestion of having this.constructor returning the right type here: T.constructor should be of type T.

As for possible solutions for you for now:

Without static at all:

class A {
    public show() {
        alert(this.getItems().FOO);
    }

    protected getItems() {
        return {
            FOO: 'A'
        }
    };
}

class B extends A {
    protected getItems() {
        return {
            FOO: 'B'
        }
    }
}

(code in playground)

Static with typeof:

class A {
    public static Items = {
        FOO: 'A'
    };

    public show() {
        alert((<typeof A | typeof B> this.constructor).Items.FOO);
    }
}

(code in playground)

Static with constructor interface:

interface AConstructor {
    new (): A;
    Items: any;
}

class A {
    public static Items = {
        FOO: 'A'
    };

    public show() {
        alert((this.constructor as AConstructor).Items.FOO);
    }
}

(code in playground)

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jun 9, 2016 at 17:36

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

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

2 Comments

mk. Over a year ago

alert((<typeof A|typeof B>this.constructor).Items.FOO); for your typeof solution, otherwise B.Items -> B.ItemsRenamed won't be caught.

Nitzan Tomer Over a year ago

@mk. thanks, i updated my answer, though i think that this solution isn't very useful when you have more than two classes. The first option (without the static) is better in my opinion.

mk. · Accepted Answer · 2016-06-09 17:35:35Z

6

I understand the warning and it's totally right from a TypeScript point of view

Right - this is something like inheritance, but it doesn't and shouldn't generally work for your static properties. To get around this, disable typechecking using any:

alert((<any>this.constructor).Items.FOO);

This situation often occurs when converting old js code, but should be avoided when writing new TS code. If you want to do this correctly you would need to (as you are probably aware) implement and override a getItems or similar method in your two classes to return the corresponding Items, and call that method from show.

answered Jun 9, 2016 at 17:35

mk.

11.8k6 gold badges43 silver badges56 bronze badges

Collectives™ on Stack Overflow

TypeScript: static properties and inheritance

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related