Typescript destructing for defaults

2023-09-08

Using JavaScript

to create and object that will be assigned default values optional values aren't assigned.

Create an interface like the following:

TYPESCRIPT

interface DivAttrs { 
    color?: string;
    width?: number;
    height?: number;
}

interface DivAttrs {

    color?: string;

    width?: number;

    height?: number;

Create a defaults object like the following:

TYPESCRIPT

const defaults: DivAttrs = {
    color: 'green',
    height: 200,
    width: 200
};

const defaults: DivAttrs = {

    color: 'green',

    height: 200,

    width: 200

};

Then create a couple of overrides:

TYPESCRIPT

const override1: DivAttrs = {
    color: 'red'
};

const override2: DivAttrs = {
    height: 300
};

const override1: DivAttrs = {

    color: 'red'

};

const override2: DivAttrs = {

    height: 300

};

Then you can use these to create a combined set of inputs using Javascript's

language feature:

TYPESCRIPT

const result = { ...defaults, ...override1, ...override2 };
console.log(result);
...
{ color: 'red', height: 300, width: 200 }

const result = { ...defaults, ...override1, ...override2 };

console.log(result);

...

{ color: 'red', height: 300, width: 200 }

will produce the following result type:

TYPESCRIPT

const result = { ...defaults, ...override1, ...override2 };
console.log(result);
...
{ color: 'red', height: 300, width: 200 }

const result = { ...defaults, ...override1, ...override2 };

console.log(result);

...

{ color: 'red', height: 300, width: 200 }