Using JSON.stringify in conjunction with TypeScript getter/setter

Question

I am using getter/setter accessors in TypeScript. As it is not possible to have the same name for a variable and method, I started to prefix the variable with a lower dash, as is done in many examples:

private _major: number;

get major(): number {
  return this._major;
}
set major(major: number) {
  this._major = major;
}

Now when I use the JSON.stringify() method to convert the object into a JSON string, it will use the variable name as the key: _major.

As I don't want the JSON file to have all keys prefixed with a lower dash, is there any possibility to make TypeScript use the name of the getter method, if available? Or are there any other ways to use the getter/setter methods but still produce a clean JSON output?

I know that there are ways to manually modify the JSON keys before they are written to the string output. I am curious if there is simpler solution though.

Here is a JSFiddle which demonstrates the current behaviour.

Answer 1

No, you can't have JSON.stringify using the getter/setter name instead of the property name.

But you can do something like this:

class Version {
    private _major: number;

    get major(): number {
        return this._major;
    }

    set major(major: number) {
        this._major = major;
    }

    toJsonString(): string {
        let json = JSON.stringify(this);
        Object.keys(this).filter(key => key[0] === "_").forEach(key => {
            json = json.replace(key, key.substring(1));
        });

        return json;
    }
}

let version = new Version();
version.major = 2;
console.log(version.toJsonString()); // {"major":2}

Answer 2

based on @Jan-Aagaard solution I have tested this one

public toJSON(): string {
    let obj = Object.assign(this);
    let keys = Object.keys(this.constructor.prototype);
    obj.toJSON = undefined;
    return JSON.stringify(obj, keys);
}

in order to use the toJSON method

Answer 3

I think iterating through the properties and string manipulating is dangerous. I would do using the prototype of the object itself, something like this:

public static toJSONString() : string {
    return JSON.stringify(this, Object.keys(this.constructor.prototype)); // this is version class
}

Answer 4

I've written a small library ts-typed, which generate getter/setter for runtime typing purpose. I've faced the same problem when using JSON.stringify(). So i've solved it by adding a kind of serializer, and proposing to implement a kind of toString (in Java) buy calling it toJSON.

Here is an example:

import { TypedSerializer } from 'ts-typed';

export class RuntimeTypedClass {
    private _major: number;

    get major(): number {
       return this._major;
    }

    set major(major: number) {
       this._major = major;
    }
    /**
    * toString equivalent, allows you to remove the _ prefix from props.
    *
    */
    toJSON(): RuntimeTypedClass {
        return TypedSerializer.serialize(this);
    }
}

Answer 5

A new answer to an old question. For situations where there is no private field for a getter/setter, or where the private field name is different to the getter/setter, we can use the Object.getOwnPropertyDescriptors to find the get methods from the prototype.

https://stackoverflow.com/a/60400835/2325676

We add the toJSON function here so that it works with JSON.stringify as mentioned by other posters. This means we can't call JSON.stringify() within toJSON as it will cause an infinite loop so we clone using Object.assign(...)

I also removed the _private fields as a tidyup measure. You may want to remove other fields you don't want to incude in the JSON.

public toJSON(): any {

    //Shallow clone
    let clone: any = Object.assign({}, this); 

    //Find the getter method descriptors
    //Get methods are on the prototype, not the instance
    const descriptors = Object.getOwnPropertyDescriptors(Object.getPrototypeOf(this))

    //Check to see if each descriptior is a get method
    Object.keys(descriptors).forEach(key => {
        if (descriptors[key] && descriptors[key].get) {

            //Copy the result of each getter method onto the clone as a field
            delete clone[key];
            clone[key] = this[key]; //Call the getter
        }
    });

    //Remove any left over private fields starting with '_'
    Object.keys(clone).forEach(key => {
        if (key.indexOf('_') == 0) {
            delete clone[key];
        }
    });

    //toJSON requires that we return an object
    return clone;
}

Answer 6

Isn't dynamic but it work

export class MyClass{
     text: string

     get html() {
         return this.text.toString().split("\n").map(e => `<p>${e}</p>`).join('');
     }

     toJson(): string {
         return JSON.stringify({ ...this, html: this.html })
     }
}

In calling

console.log(myClassObject.toJson())