Angular2 / 4-将toJSON函数添加到打字稿类的正确方法是什么？

Question

I followed code from this example but my toJSON() function is not called.

Attempt 1

export class Template {
  constructor(
  ) {}

  public id: string
  public account_id: string
  public name: string
  public title: string
  public info: string
  public template_items: Array<number>

  public toJSON = function() {
    return {
      attributes: this.template_items
    }
  }
}

Attempt 2

interface ITemplateSerialized {
  attributes: Array<number>
}

export class Template {
  constructor(
  ) {}

  public id: string
  public account_id: string
  public name: string
  public title: string
  public info: string
  public template_items: Array<number>

  toJSON(): ITemplateSerialized {
    return {
      attributes: this.template_items
    }
  }
}

Attempt 3

Identical code to Attempt 2 except the toJSON is:

  public toJSON = function(): ITemplateSerialized {
    return {
      attributes: this.template_items
    }
  }

Create some data...eg:

let t = new Template();
t.name = "Mickey Mouse"
t.template_items = [1,2,3]

console.log(JSON.stringify(t));

In all cases it does not change template_items to attributes...what am I missing here?

UPDATE

The provided plunk by @estus in the comments worked, so I decided to make one in Angular, to compare. Here it is and it works.

When I wrote the question, to make the code simple to understand, I had made 'template_items' an array of numbers. But in my actual Angular project it is an array of custom objects. Here is a plunker showing that structure. It also works. And another plunker working in Angular 4.4.6

But this identical setup does not work in my Angular project. So the question stands in case anyone else can reproduce this?

In my project I get a completely empty object returned from JSON.stringify().

Answer 1

So, it seems I was confused between how toJSON() works and how stringify replacer function works.

With toJSON() the function you supply will ONLY return the items you specify. I was under the impression that it would return all properties and ONLY change the ones you specify in the function.

So in my project there were no template_items at the point the object was first created, and since that was the ONLY property my serialized interface specified all the other properties were being removed, hence an empty object.

So, the solution is to specify ALL properties, in both the function return statement and in the serialize interface:

  toJSON(): ITemplateSerialized {
    return {
      id: this.id,
      account_id: this.account_id,
      name: this.name,
      title: this.title,
      info: this.info,
      attributes: this.template_items
    }
  }

export interface ITemplateSerialized {
  id: string,
  account_id: string,
  name: string,
  title: string,
  info: string,
  attributes: Array<TemplateItem>
}