How to use Object.defineProperty for getters in Typescript?

Question

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.

Why not just use get add() in the Base class? Why assign it with Object.defineProperty? What is the actual point of installGetters()? — VLAZ
– VLAZ, Commented Dec 7, 2021 at 19:52
@VLAZ I actually have written the function installGetters() such that given an object, it creates multiple getters with the key as the getter name and the value as the return value. — Sayantan Ghosh
– Sayantan Ghosh, Commented Dec 7, 2021 at 19:55
That doesn't explain why it's needed. It's a class - you're supposed to inherit from it. If you don't, then why have a class in the first place? Choose one - have classes or don't. Mixing the approaches just leads to awkwardness. — VLAZ
– VLAZ, Commented Dec 7, 2021 at 19:57
Your trying to write traditional writing code, using a conceptual-style, Dynaamicly Prototype Orientated code, while changing to a Staticly Typed OOP language. Generally Speaking, methods like Argument.callee, Object.defineProperty(), are not type safe, and are conceptually Prototype Orientated, and not OO. If you want to use the code you demonstrated, which there is nothing wrong with it, you probably don't want to make the change to TypeScript. Just because everyone is on a TS bandwagon, doesn't mean that every JS dev needs to switch. I like TS, but I have always wrote OOP. — JAYD3V
– JAYD3V, Commented Feb 24, 2022 at 3:05
For someone use to writing code, like you showed, you either need to break your old JS habits, or just stick to JS. Thats my opinion anyway. — JAYD3V
– JAYD3V, Commented Feb 24, 2022 at 3:06

Guerric P · Accepted Answer · 2021-12-07 19:58:19Z

4

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;

TypeScript playground

answered Dec 7, 2021 at 19:58

Guerric P

32k6 gold badges61 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

roberto tomás Over a year ago

if the intent it to dynamically install getters (that is, to dynamic property names) then you could use [key: string]: unknown

Majed Badawi · Accepted Answer · 2021-12-07 20:17:21Z

3

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

edited Dec 7, 2021 at 20:17

answered Dec 7, 2021 at 20:03

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

2 Comments

JAYD3V Over a year ago

This is the correct anwser. Because he is using an extended class to access the property via the install method. The snippet in this answer, and in the question, should preform similar enough to work for any means he needs to use it for. I actually would much rather use the code above as its much easier for the TSC compiler to follow. The Object.defineProperty method doesn't really work in a way that is harmonious with a statically typed system,

JAYD3V Over a year ago

or with the benifits gained from the statically typed system. IMO, the whole point of typescript is to write more robust, solid code, which in this situation would be the snippet in the answer above.

fragsalat · Accepted Answer · 2021-12-07 19:56:49Z

-1

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
}

answered Dec 7, 2021 at 19:56

fragsalat

5484 silver badges18 bronze badges

2 Comments

Daniel A. White Over a year ago

Using ‘any’ is a cop out

fragsalat Over a year ago

I know but do you have a better solution? I probably would just not write the code this way but if he wants to.

Collectives™ on Stack Overflow

How to use Object.defineProperty for getters in Typescript?

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related