I have used an implementation as given below in JavaScript.
class Base {
installGetters() {
Object.defineProperty(this, 'add', {
get() {
return 5;
}
});
}
}
class New extends Base {
constructor() {
super();
this.installGetters();
}
someAddition() {
return 10 + this.add;
}
}
I have defined the getter property add in the function of the parent class - Base and used that property in child class New after calling the installGetters() function in the child class constructor. This works for JavaScript, but this.add is throwing an error in case of Typescript. Any help would be much appreciated.
My main motivation for doing this is that I want to pass an object to installGetters() so that it can generate multiple getters with the object keys being the getter names and the values being returned from the corresponding getter functions.
This is working in JavaScript, so my main curiosity is whether this is not possible in TypeScript or am I doing something wrong.
Although this is a pretty strange pattern, I'll provide an answer to your actual question.
TypeScript is not clever enough to infer the actual Base type based on a method called on a subclass constructor, so you have to declare it:
declare readonly add: number;
Having applied inheritance, I would suggest using protected:
protected members are only visible to subclasses of the class they’re declared in.
class Base {
protected add!: number;
installGetters() {
this.add = 5;
}
}
Related issue to your problem: https://github.com/microsoft/TypeScript/issues/28694
The reason to this is likely that typescript doesn't know about the getter you added. There is no typing telling typescript this getter exists and typescript is not able to magically know you added the getter function and what it would look like. Either you define the getter in the base class or in case this is not possible, there is probably no other way than casting this to any.
someAddition() {
return 10 + (this as any).add
}