Typescript class instance to javascript object

Question

This is my code:

class A{
    test: string
    constructor(test: string){
        this.test = test
    }
}
const a = new A("hi")
console.log(a)

This is my output:

A { test: 'hi' }

When I want to upload this as a Javascript object, it get's rejected because it ain't a Javascript object. I can make one by doing this:

const someJSON = JSON.stringify(a)
const javascriptObject = JSON.parse(someJSON)

But I think there must be a better way, this feels like a hack. How to convert a typescript class instance to a plain javascript object?

A typescript class instance is a javascript object. You see that on the console because that is the way Chrome outputs it: Type object. What exactly are you trying to achieve? — Oscar Paz
– Oscar Paz, Commented Mar 23, 2018 at 19:36
It isn't true. When I print typeof === 'object' on my instance, it is false. After the parse, it prints true — NoKey
– NoKey, Commented Mar 23, 2018 at 19:37
It is true. If you do a instanceof Object it returns true. typeof "hello" outputs string, not object, and yet is a valid JavaScript object — Oscar Paz
– Oscar Paz, Commented Mar 23, 2018 at 19:39
I want to upload this as a Javascript object, it get's rejected <= What exactly do you mean by "upload as a javascript object" and what do you mean by "rejected"? What does rejected mean? Is there an error message? If so please post it. — Igor
– Igor, Commented Mar 23, 2018 at 19:45
Then this is a firebase specific issue. See also this "duplicate" github issue. In the future it helps to have context. Adding what you have above in your comment makes it much easier to understand by those reading through your question. — Igor
– Igor, Commented Mar 23, 2018 at 19:49

brunnerh · Accepted Answer · 2023-08-18 16:27:23Z

5

If you want a plain JS object instead of a class instance you can spread the properties for example:

class A{
    constructor(test){
        this.test = test
    }
}
const a = new A("hi");
const b = { ...a };

console.log('a:', a);
console.log('b:', b);
console.log('Is b instance of A:', b instanceof A);

edited Aug 18, 2023 at 16:27

answered Mar 23, 2018 at 19:37

brunnerh

188k30 gold badges362 silver badges434 bronze badges

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

3 Comments

Randy Casburn Over a year ago

So your answer is to use vanilla JavaScript then? I agree!

brunnerh Over a year ago

@RandyCasburn: Well, this question is not specific to TypeScript in that types are not the issue. (And vanilla JS is executable as snippet, so...)

Randy Casburn Over a year ago

The OP uses types in his example - and that is the reason it cannot be used directly. But I still agree with you :-)

JJWesterkamp · Accepted Answer · 2018-03-23 20:00:56Z

3

You can use Object.setPrototypeOf() to set the prototype of your symbol explicitly to the default prototype of objects, which is Object.prototype:

class A {
    constructor(test) {
        this.test = test
    }
}

const a = new A("hi")
Object.setPrototypeOf(a, Object.prototype);
console.log({ a, proto: Object.getPrototypeOf(a) });

This will make a equal to { test: "hi" }.

edited Mar 23, 2018 at 20:00

answered Mar 23, 2018 at 19:55

JJWesterkamp

7,9561 gold badge25 silver badges30 bronze badges

Comments

Vayrex · Accepted Answer · 2018-03-23 19:59:56Z

0

You may need to add methods to your class in future, some properties may become private. So add a method toObject. Then you will be able to use methods and provide data to api in needed format.

class A{
      constructor(private _test: string){

      }

      public toObject(){
        //return JSON.parse(JSON.stringify(this));
        //in case if you want to have underscored private
        let object = {};
        Object.keys(this).map((key: string) => {
          object[key.slice(1)] = this[key];
        });

        return object;
      }
    }

    const a = new A("hi")
    console.log(a);
    console.log('----------------------');
    console.log(a.toObject());

answered Mar 23, 2018 at 19:59

Vayrex

1,4771 gold badge11 silver badges13 bronze badges

Collectives™ on Stack Overflow

Typescript class instance to javascript object

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related