How to extend a class from the same typescript file?

Question

I'm trying to inherit a class that is in the same file but the compiler generates the following errors:

Class 'FilterController' used before its declaration.ts(2449) FilterData.ts(53, 7): 'FilterController' is declared here.

(property) FilterController._typingValue: HTMLInputElement Only public and protected methods of the base class are accessible via the 'super' keyword.ts(2340)

export default class FilterData extends FilterController {
    private _dataValue: any;

    constructor(protected storageKey: string, protected typingValue: HTMLInputElement, protected containerMain: HTMLElement, protected listboxMain: HTMLElement, protected listboxSecondary: HTMLElement) {
        super(storageKey, typingValue, containerMain, listboxMain, listboxSecondary);
    }

    /*private set data(dataValue: any) { this._dataValue = dataValue; }
    private get data(): any { return this._dataValue; }*/

    public initComponent() :void {
        this.keypress();
    }

    private keypress() {
        super._typingValue.addEventListener('keyup', (_event: KeyboardEvent) => {
            //this.search(_event);
            alert("aee")
        });
    }


}

class FilterController {
    protected readonly _storageKey: string;
    protected readonly _typingValue: HTMLInputElement;
    protected readonly _containerMain: HTMLElement;
    protected readonly _listboxMain: HTMLElement;
    protected readonly _listboxSecondary: HTMLElement;

    constructor(protected storageKey: string, protected typingValue: HTMLInputElement, protected containerMain: HTMLElement, protected listboxMain: HTMLElement, protected listboxSecondary: HTMLElement){
        this._storageKey = storageKey;
        this._typingValue = typingValue;
        this._containerMain = containerMain;
        this._listboxMain = listboxMain;
        this._listboxSecondary = listboxSecondary;
    }
}

As the error says you're trying to use `FilterController` in the file *before* you've defined it in the file. Just move `FilterController` to the top before `FilterData`. — Aaron Beall, Mar 22 '19 at 19:22
Some more details on Classes and hoisting within JS: https://stackoverflow.com/questions/35537619/why-are-es6-classes-not-hoisted — y2bd, Mar 22 '19 at 20:06

score 0 · Accepted Answer · answered Mar 22 '19 at 19:26

The error message indicates that you are using a class before it has been declared. In you case, you are extending FilterController before the declaration of the class.

The easiest solution to your problem is to change the order of the two classes. First declare FilterController, then FilterData which extends the first class.

How to extend a class from the same typescript file?

1 Answers1