Why this is undefined?

[static portal]

I have this code: in the first method instead of EventProcessor if call handleEvent method with this like this.handleEvent it is not working and gives me error: undefined

https://pastebin.com/wxNppAuQ

[barren summit]

it should work because it's a static method, so this should still be EventProcessor

[static portal]

I also thought so... But it doesnt work witht this, even when I literally console log only this itself inside the first function, it prints undefined

I mean in the link i sent here it is using actual class itself (EventProcessor). In this way it is working fine but if I change it to this, it doesnt work

[supple dock]

Have you tried defining that handleEvent as an arrow function?

Smthng like

private static handleEvent: async () => ...

[static portal]

nope, actually yesterday it was working this way, today i added types to be more accurate with interfaces, and it gave me undefined

[static portal]

i can try now, lemme see

[supple dock]

Actually this is surprising that this worked before for a static function

Because it shouldn't, logically thinking

You may still define this by yourself as a first argument

[static portal]

you are saying we shouldnt be able to use it for static functions?

[static portal]

error: undefined {"timestamp":"2023-05-11T17:49:05.799Z"}

[supple dock]

Well, that's confusing: https://www.typescriptlang.org/play?#code/MYGwhgzhAEDCIwN4ChrQgFzBglsakAngHb4BmA9hQBQCU0KaaGAFjhAHQBGYATnQG5U0AL7JhAB144AbtgCm6LLnxFS0Hv3qMmwCsQgUQ8jiAoBzagCJ4nTXSu0haMWOS2OlGk+RA

[finite bough]

@supple dock Here's a shortened URL of your playground link! You can remove the full link from your message.

razor#4548

Playground Link

Preview:```ts
class Cls {
static async foo() {
this.bar()
}

private static async bar() {
console.log("Cls.bar()")
}
}

Cls.foo()```

You can choose specific lines to embed by selecting them before copying the link.

[supple dock]

In the playground it works fine 😅

But not in your code

And how do you call the method?

Do you use the class itself, or some class instance?

[static portal]

I provided this method to express route

overall scenario is a bit complex. I have a webhook where another service sends some data, i take this data, decode in the first method, and pass it to second method for post-processing...

[supple dock]

Well, according to the docs it is allowed: https://www.tutorialsteacher.com/typescript/typescript-static

But it just seems a bit confusing as static methods are usually not expected to have this defined because they don't have an instance

Probably there is something that breaks your this reference for the method call

[supple dock]

Okay, so is this your case? https://www.typescriptlang.org/play?#code/MYGwhgzhAEDCIwN4ChrQgFzBglsaAZgPZEAUYAXNAHYCuAtgEYCmATgJTQppoYAWOCADpGYVuXYBuVNAC+yGQAdWOAG7Zm6LLnyjxlGgxYcuMtMCLUIREMyEgiAc1IADeML2kAJIjCz2LlIy8vLIBLTUwLiW0BjMmKTAjFTkVHRMbJwAvAB80KpEOAAmnNzQSaQAjAAM1UGhcQnuQsREQUA

[finite bough]

@supple dock Here's a shortened URL of your playground link! You can remove the full link from your message.

razor#4548

Playground Link

Preview:```ts
class Cls {
static foo(a: number) {
this.bar(a)
}

private static bar(a: number) {
console.log(Cls.bar(${a}))
}
}

function test(cb: (a: number) => void) {
cb(100)
}

test(Cls.foo)```

You can choose specific lines to embed by selecting them before copying the link.

[static portal]

yes

something with interface?

[supple dock]

No, it seems like it's just this is erased when you pass a reference to a function

You can try to bind it back like that:

test(Cls.foo.bind(Cls));

It's the first option

[static portal]

I dont call it directly i pass it to express route like EventProcessor.processAndHandleLogs

[supple dock]

Yes, and what the express route does is probably something like I displayed in the example

So when you pass a reference to a static function, this is erased

[static portal]

so best way is to use class name itself?

as it is static method, Im thinking it is fine

[supple dock]

Well, in general it's safer to assume that there is no this set inside the static method, yes. Which means that you are expected to call other internal static methods through the class name.

this is only set when you call the function directly like this:

Cls.foo(100);

But when you pass a reference to that function, seems like this just gets erased:

function test(foo: (val: number) => void) {
  foo(100);
}

test(Cls.foo);

So you either assume that this doesn't exist, or you bind it manually before passing a reference to that function:

test(Cls.foo.bind(Cls));

Would love to hear other opinions though

[static portal]

i really appreciate time you spent on researching this and explaining, sharing these code snippets

thank you!

[sinful sparrow]

You can also do:

test(() => Cls.foo())