Constructor with config object in TypeScript (like jQuery.extend, Ext.apply)

Question

What is the equivalent to extending an arbitrary object with another one in TypeScript/ECMAScript6 ?

Essentially something like $.extend(target, src) in jQuery or Ext.apply(target, src, defaults) in ExtJS do.

I want to have a class constructor that simply applies a configuration object onto the object instance created by the constructor like so:

class Address {

    country:     string;
    postCode:    string;
    city:        string;
    street:      string;
    houseNumber: string;

    constructor (config : any) {
        // simply tag all configuration onto the object, 
        // may be one, may be multiple, may be all properties 
        // of the resulting object instance

        Object.apply(this, config); // ????
        // jQuery.extend(this, config);
        // Ext.apply(this, config);

        this.init();

    }

    init () {
        // do some initialization work ...
    }

}

Or is the "object configuration pattern" deprecated for type-safe languages like TypeScript and ECMAScript6?

Is there a "new way" achieving the same flexibility?

Check this https://stackoverflow.com/a/58788876/2746447 – egor.xyz Nov 10 '19 at 13:07 — egor.xyz, Nov 10 '19 at 13:07

score 1 · Answer 1 · answered Jun 25 '15 at 05:39

1

You could create an interface, and use that as your config object:

interface MyConfiguration {
    country ?: string;
    postCode ?: string;
    city ?: string;
    street ?: string;
    houseNumber ?: string;
}

Constructor:

constructor (config : MyConfiguration) {
   // ...
}

And when you instantiate it:

new Address({
    country: 'US',
    city: 'New york'
    // all fields are optional, you only need to fill, what you want.
});

answered Jun 25 '15 at 05:39

Balázs Édes

13,452
6
54
89

So what would then the constructor look like exactly to apply this configuration object to the created instance? What I want to express is simply "apply all config properties to the created instance" (like `$.extend(this, config)`) Is there a TypeScript/EcmaScript6 syntax for this? – jamy76 Jun 25 '15 at 10:28
No idea. What I would do, is create a config object with default settings, then in the constructor merge the default and the parameter config, and without copying every property into the object constructed, just keep a reference to the configuration object, and access configurations directly from there. – Balázs Édes Jun 25 '15 at 10:51

score 1 · Answer 2 · answered Jun 25 '15 at 05:39

Or is the "object configuration pattern" deprecated for type-safe languages like TypeScript and ECMAScript6?

Nit: ES6 and TypeScript are different. This usage pattern is fine with ES6

For TypeSafety, you cannot generally have mutation willy nilly and not tell the type system about it. This pattern is closely related to the concept of mixins and the way for telling typescript about it is a bit verbose but documented : http://www.typescriptlang.org/Handbook#mixins

score 0 · Answer 3 · answered May 11 '23 at 13:28

So this seems to be a valid pattern (at least for the Typescript compiler ;-) ):

interface IAddress {
  country ?: string;
  postCode ?: string;
  city ?: string;
  street ?: string;
  houseNumber ?: string;
}

class Address implements IAddress {
  constructor (config : IAddress) {
    Object.assign(this, config);
  }
  ...
}

new Address({
  country: 'US',
  city: 'New york'
  // all fields are optional, you only need to fill, what you want.
});

Constructor with config object in TypeScript (like jQuery.extend, Ext.apply)

3 Answers3