Angular) Any better way to initialize the value of the Object in class when declaration?

Question

What I'm trying to do is like this.

export class TestModel {
    item1: {title: 'specific title', content: string};
    item2: {title: 'specific title', content: string};
}

declare the object {title:string, value:string}, and initialize only title.
value of the content will be added after it declared.

but It didn't worked. so I changed it to like this.

interface testInterface {
    title: string;
    content: string;
}

export class TestModel {
    item1: testInterface ;
    item2: testInterface ;

    constructor() {
        this.item1 = { title: 'specific titleA', content: '' };
        this.item2 = { title: 'specific titleB', content: '' };
    }
}

I want to initialize title without the constructor(), to reduce the amount of code.
(and if it is possible, initialize only the title, not the content).

I tried
item1: testInterface = { title = 'specific titleA, content = '' };
and it didn't worked too.

Is there any good solution?

Robby Cornelissen · Accepted Answer · 2018-10-26 02:38:43Z

1

You can assign default values in your field declarations, and then pass Partial objects to the constructor and merge them:

interface TestInterface {
  title: string;
  content: string;
}

export class TestModel {
  item1: TestInterface = {title: 'Default title', content: 'Default content'};
  item2: TestInterface = {title: 'Default title', content: 'Default content'};

  constructor(item1: Partial<TestInterface>, item2: Partial<TestInterface>) {
    this.item1 = {...this.item1, ...item1};
    this.item2 = {...this.item2, ...item2};
  }
}

const x = new TestModel({title: 'Specific title 1'}, {content: 'Content 2'});

If that is still too much repetition, you can declare a constant to hold the default values:

const DEFAULT_TEST_INTERFACE = {title: 'Default title', content: 'Default content'};

export class TestModel {
  item1: TestInterface = DEFAULT_TEST_INTERFACE;
  item2: TestInterface = DEFAULT_TEST_INTERFACE;

  /* rest is same as above */
}

edited Oct 26, 2018 at 2:38

answered Oct 26, 2018 at 2:33

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

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

1 Comment

Jiho Over a year ago

Wow. Thanks! I didn't know the Partial Object.

Collectives™ on Stack Overflow

Angular) Any better way to initialize the value of the Object in class when declaration?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related