How do I tell TypeScript about dynamic addition of properties?

Question

I'm using Backbone.Marionette in Typescript. I've written my own type description of Marionette.

var ProviderSpa = new Backbone.Marionette.Application();
ProviderSpa.addRegions({
    'servicesRegion': "#services-offered"
});
ProviderSpa.servicesRegion.show();

My problem is that addRegions has a side effect of adding properties to ProviderSpa, which TypeScript doesn't know about and therefore it complains that 'The property 'servicesRegion' does not exist on value of type 'Backbone.Marionette.Application'.

How can I tell TypeScript about these dynamic property additions to an instance of a type?

Answer 1

I have used a cut down definition of BackBone Marionette for this example.

If you have lots of dynamic properties being added to an object, you might want to leave things dynamic rather than attempting to create declarations or interfaces for them all - especially as the overhead of keeping declarations up-to-date with new properties vs the benefits of having static typing on what are actually dynamic properties isn't a cost I would pay.

In this example, accessing the property using square-bracket syntax means it passes the type checking without the need for a declaration. The important bit is on the last line.

You can test this on the TypeScript playground.

declare module Backbone {
    export module Marionette {
        export class Application {
            addRegions(regions: any): void;
        }
    }
}

var servicesRegion = 'servicesRegion';
var ProviderSpa = new Backbone.Marionette.Application();
ProviderSpa.addRegions({
    servicesRegion: "#services-offered"
});
ProviderSpa[servicesRegion].show();