Typescript static methods inheritance

Question

I'm working on an ionic 2 project using typescript 2.0.6.

I have a Base class which manage some behaviors and I inherit several classes from this base class. And I want to be able to get the name of the actual class (not the base one).

Here is my code :

export class AbstractModel {
    oneInstanceMethod() {
        this.getClassName();
    }
    static oneStaticMethod() {
        this.getClassName();
    }
    getClassName() {
        return (<any>this).constructor.name;
    }
    static getClassName() {
        return (<any>this).name;
    }
}

export class MyClass1 extends AbstractModel {

}
export class MyClass2 extends AbstractModel {

}

And I have 2 kind of calls : Either MyClass1.oneStaticMethod() or (new MyClass2).oneInstanceMethod().

My problem is that this code was working before (now I get 'e' because it returns the function e()) I made some upgrade in my ionic project. I think my typescript version has been upgraded (i'm not sure but I think it was the 1.8 before).

How can I solve this ? I tried many things (like creating variables to store the values, but neither works in static mode AND instance mode).

Thanks !

Sounds like your code is being minified. The code you've posted seems to work as intended? — Jeroen
– Jeroen, Commented Nov 28, 2016 at 10:46
You can typically tweak the minification class to keep class and function names as they are, though you might need to rethink your design (i.e. why would you need a class name? or is it for debugging?) — Jeroen
– Jeroen, Commented Nov 28, 2016 at 10:50
no i'm writing an ORM and I want to abstract a lot of things in the Base class. And I want to use the class name as my SQL table name. — Julian Le Calvez
– Julian Le Calvez, Commented Nov 28, 2016 at 10:58
the thing is I don't care if I need to declare the table name in the inherited classes, but it seems that if it executes a static method which is located in the base class, it call properties and methods from itself and not the MyClass1 or MyClass2 prop or methods. — Julian Le Calvez
– Julian Le Calvez, Commented Nov 28, 2016 at 11:00

Jeroen · Accepted Answer · 2016-11-28 11:51:12Z

1

If I copy your code ad verbatim and add:

var a = new MyClass1();
var b = new MyClass2();

document.body.innerHTML = a.getClassName() + " - " + b.getClassName();

Then it runs as you expect.

The issue you're experiencing is most likely due to minification. Your class names get garbled in minification. Most minifiers have an option to disable renaming of classes/functions, you haven't mentioned which one you use but surely their docs say something about this. It will increase file size though.

You clarified a bit in comments, and I'd still recommend not using class names, but prefer being explicit about this kind of thing. With Typescript you gain tooling support for automated renames, but you kinda throw that away again. Then again, that's your own design decision to make.

Footnote: here's a solution that might be useful or not, depending on your design preferences. It dispatches the knowledge on associated table name to an instance variable:

class AbstractModel {
  _tableName: string = null;

  getClassName = () => {
    if (!this._tableName) {
      throw new Error("No table name was set for this DTO.");
    }
    return this._tableName;
  }
}

class MyClass1 extends AbstractModel {
    _tableName = "MyTable1";
}

class MyClass2 extends AbstractModel {
    _tableName = "AnotherTable2";
}

var a = new MyClass1();
var b = new MyClass2();

document.body.innerHTML = a.getClassName() + " - " + b.getClassName();

See it in action on jsfiddle.

Note that I also snuck in this:

getClassName = () => {

vs

getClassName() {

So that this is correctly captured and refers to the class instance, not the function that's executing.

edited Nov 28, 2016 at 11:51

answered Nov 28, 2016 at 11:07

Jeroen

64.4k47 gold badges231 silver badges372 bronze badges

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

4 Comments

Julian Le Calvez Over a year ago

thank you ! i'm trying to find the minifier, but I understand that it's better to be explicit but I can't have typescript use my inherited static methods or property from the base class. It always calls the base class method or property, so I can't really override my variables. At this point, using the class name was the only working solution :(

Jeroen Over a year ago

I've added a possible way to solve this problem, see the footnote. (Beware that to get this to work properly in member methods, it can be convenient to create them as lambda's, not as regular functions.)

Julian Le Calvez Over a year ago

thanks ! let me try because I always have pb with static methods

Julian Le Calvez Over a year ago

ok it works when I use the same strategy with static members, but I need to call the member directly (not via a static method otherwise it won't take the inherited value of the static member).

Collectives™ on Stack Overflow

Typescript static methods inheritance

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related