CODEWITHSUNDEEP
javascripttypescript
SharePointBeginner
SharePointBeginner

Reputation: 359

Class function return "is not a function" when used in instance field

I have a class that extends another class (base in this case) which inherits a translator function like this:

export class Details extends base implements IDetails { //translator lies in "base"
}

I want to declare a constant or a object more precise. For the value, I need to call a function that returns the translated string. And since I need to use the class/translator function, I need to declare it inside of the class:

private readonly data = {
  myString: this.translator('alert'),
  myString2: this.translator('repair'),
}

No syntax errors. I run the program and get the following error:

Uncaught TypeError: this.translator is not a function
enter code here

My class that I extend

export declare class Elem extends base implements IElem {
    private static readonly registeredComponents;
    private static readonly propertyManager;
    static get is(): string;
    localize: ((...args: any[]) => string) | null;
    translator: ((...args: any[]) => string);
    constructor();
    ready(): void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    static get properties(): any;
}
export {};

The translator function works in other areas of the code, but in instance fields it does not. How come?

Upvotes: 0

Views: 101

Answers (1)

Tim
Tim

Reputation: 2912

Field initialization happens before the constructor in JS/TS. So you don't have a this to call yet.

Order is:
1.Base class fields
2.Base constructor
3.Derived Fields
4.Derived constructor

So you will have to initialize it in the constructor, or expose it as a lazy loaded field (build value in getter first access)

Upvotes: 2

Related Questions