👀 Views: 31 💬 Answers: 1 📅 Created: 2025-06-16

typescript decorators inheritance class TypeScript

I'm working on a project and hit a roadblock... I've spent hours debugging this and I'm working with a strange scenario with class decorators in TypeScript that seems to interfere with inheritance. I'm using TypeScript 4.5 and have a base class decorated with a custom decorator. The derived class is supposed to inherit methods from the base class, but when I call one of these methods, it seems to lose its context and throws a 'this is undefined' behavior. Here’s a simplified version of my code: ```typescript function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) { const originalMethod = descriptor.value; descriptor.value = function(...args: any[]) { console.log(`Calling ${propertyName} with`, args); return originalMethod.apply(this, args); }; } class Base { @Log sayHello(name: string) { console.log(`Hello, ${name}`); } } class Derived extends Base { greet() { this.sayHello('World'); } } const d = new Derived(); (d.greet as any)(); // Throws 'this is undefined' ``` I’ve tried binding `this` explicitly by using `Function.prototype.bind()` like this: ```typescript const greetBound = d.greet.bind(d); greetBound(); ``` but it feels like a workaround. I've also attempted using arrow functions to preserve context, but I’m not able to apply that approach consistently due to the decorator. Is there a better way to handle this inheritance scenario with decorators? I want the derived class to call the base class methods without losing context, but the decorator seems to complicate things. Any insights would be appreciated! What's the best practice here? Could this be a known issue?