如何在基类代码中引用this.constructor上的静态属性？

Question

I have TypeScript (JavaScript) class like this:

import * as React from 'react'

export default
class StyleableComponent<PROPS, STATE> extends React.Component<PROPS, STATE> {
    protected classes: any
    static style: any

    someMethod() {
        const ctor = this.constructor
        console.log(this.constructor.style)
    }
}

and TypeScript throws this error:

ERROR in ./src/StyleableComponent.ts
(11,38): error TS2339: Property 'style' does not exist on type 'Function'.

But, obviously, you can see that static style: any is declared in the class definition.

So, how do we work with this.constructor properly? Note, this.constructor can be the constructor of a class that extends StyleableComponent , so this.constructor may not be === StyleableComponent , but it should have the style property because it extends from StyleableComponent .

For example,

interface P {...}
interface S {...}
class Foo extends StyleableComponent<P,S> {...}

console.log(new Foo)

^ this.constructor will be Foo , and the StyleableComponent class needs to look at Foo.style .

So how do I do this? Do I need to use a extra template type parameter somehow?

Answer 1

Static Property VS Instance Property Inheritance

If you want read static property from subclass,you can do it with 3 ways.for more details you can see Test section.

• because Object.getPrototypeOf(..) 's return type is any , so you can access style directly,for example:

   someMethod() { let style = Object.getPrototypeOf(this).constructor.style; } 

• because this.constructor 's return type is a Function , so you must assign it to a any variable at first,for example:

   someMethod() { let cotr:any=this.constructor; let style = cotr.style; } 

• because Function is an interface you can expand it in typescript,for example:

   declare global{ interface Function{ style:any; } } someMethod() { return this.constructor.style; } 

and you can also do it with replace static property with instance property instead.if you want read subclass style property you must define the property on constructor,then the subclass can choose define its style by pass the style to the superclass or not at all.for example:

constructor(protected style:any="default"){
}

the interesting is that the subclass behavior are all the same except the style property.In design view, if you use the static style properties you must define another subclass to achieve it,this will tends to many subclass with diff styles.but when use instance property style ,you can do it by pass the style with optional for different style only.for example:

let bar=new Bar();//use parent's style
let baz=new Bar(null,null,"baz");//use it owned style

and you can also reject others to pass their style by pass the style in constructor of the subclass.for example:

constructor(){
  super("style");
}

Tests

import * as React from 'react';
declare global {
    interface Function {
        style: any
    }
}
describe('static inheritance', () => {

    class StyleableComponent<P, S> extends React.Component<P, S> {
        protected classes: any;
        static style: any;

        constructor(props?: P, context?: any, public style: any = "default") {
            super(props, context);
        }

        someMethod() {
            //dangerous if subclass not define static style property
            //todo:the 1st approach
            // let style = Object.getPrototypeOf(this).constructor.style;
            // return style;
            //todo:the 2nd approach
            // let cotr: any = this.constructor;
            // return cotr.style;
            //todo:the 3nd approach,you must declare style in Function interface
            return this.constructor.style;
        }
    }


    class Foo extends StyleableComponent<any, any> {
        static style = "foo";

        constructor(props?: any, context?: any) {
            super(props, context, Foo.style);
        }
    }

    class Bar extends StyleableComponent<any, any> {
    }

    test('access style from subclass', function () {
        let foo = new Foo();

        expect(foo.someMethod()).toBe(Foo.style);
    });


    test('return undefined if subclass not define style', function () {
        let bar = new Bar();

        expect(bar.someMethod()).toBeUndefined();
    });

    test('replace static style with instance property', function () {
        let foo = new Foo();
        let bar = new Bar();
        let baz = new Bar(null, null, "baz");

        expect(foo.style).toBe("foo");
        expect(bar.style).toBe("default");
        expect(baz.style).toBe("baz");
    });
});