Typescript function seemingly erroneously returning undefined-CodePudding

I have the following files:

abstractfoo.ts:

export abstract class AbstractFoo {
    public constructor() {
        throw new Error("I am not instantiable");
    }

    public static foo(param: string) {
        const str = this.plzOverrideMe();
        console.log(str);
        console.log(param);
    }

    protected static plzOverrideMe(): string {
        throw new Error("An override of this function is required");
    }
};

concretefoo.ts:

import { AbstractFoo } from "./abstractfoo"

class ConcreteFoo extends AbstractFoo {
    public static override foo(param: string) {
        super.foo(param);
    }

    protected static override plzOverrideMe() {
        return "blah";
    }
};

export default ConcreteFoo.foo;

voodoo.ts:

import voodoo from "./concretefoo"

voodoo("whatisthis")

tsc happily compiles these files with no errors. However, it crashes at runtime:

var str = this.plzOverrideMe();
               ^

TypeError: Cannot read properties of undefined (reading 'plzOverrideMe')

I'm not sure what I'm even looking for. Why is it undefined, and what can I do to get it to return the string i want?

CodePudding user response：

As far as TS is concerned, ConcreteFoo.foo is type (param: string) => void. There is no this parameter, so TypeScript doesn't check that. If you give your method a this parameter, then it'll error as expected::

public static override foo(this: typeof ConcreteFoo, param: string) {

To make it work at runtime, you'll need to use bind:

export default ConcreteFoo.foo.bind(ConcreteFoo);

which you can read more about at MDN.