Bind JSON with defaults in typescript / angular

Question

Given I have the following TypeScript class

export class OidcConfig {
    displayName: string;
    issuer: string;
    clientId: string = "app";
    sessionChecksEnabled: boolean = false;
}

Is it possible to bind the following JSON to an object of the class above, similarily how it can be bound to an interface, retaining the default values (clientId, sessionChecksEnabled) when not given in JSON?

{
   "displayName": "Keycloak",
   "issuer": "https://sso.example.com/realms/my-realm"
}

I am using Angular (13).

I tried looking around, but primarily found solutions involving interfaces (i.e. no default values), and not dealing with default values.

I tried to simply using a class instead of an interface, but it does not retain default values. If necessary I will try to build a MRE.

Answer 1

You can pass in the values through the constructor

export class OidcConfig {
    displayName: string;
    issuer: string;
    clientId?: string = "app";
    sessionChecksEnabled?: boolean = false;

    constructor(obj: any) {
        if(obj?.displayName) {
             this.displayName = obj.displayName;
        }
        if(obj?.issuer) {
             this.issuer= obj.issuer;
        }
    }
}
...

...
// usage
const test: OidcConfig = new OidcConfig({
   "displayName": "Keycloak",
   "issuer": "https://sso.example.com/realms/my-realm"
});

You can also use object destructuring to store the values that are present

export class OidcConfig {
    displayName: string;
    issuer: string;
    clientId: string = "app";
    sessionChecksEnabled: boolean = false;
}

const obj: any = {
   "displayName": "Keycloak",
   "issuer": "https://sso.example.com/realms/my-realm"
};
const test: OidcConfig = { ...(new OidcConfig()), ...obj };

In the above code, the properties in obj, will replace the values in the default class, thereby leaving the default properties to be present.