how to write marionettejs module using typescript?

Question

I'm trying to write MarionetteJS module using Typescript. Compiled module should be added to plain javascript application using RequireJS and initialized as normal Marionette module i.e.:

define(
['marionette', 'modules/sample/sample'],
function (Marionette, Sample) {
    var sampleApp = new Backbone.Marionette.Application();
    sampleApp.SampleModule = sampleApp.module("SampleModule", Sample.Sample);
}

My module is created, but initializer and start functions are not being called by Marionette.Appplication.

This is my TypeScript class:

/// <amd-dependency path="backbone" />
/// <amd-dependency path="marionette" />
/// <amd-dependency path="jquery" />
/// <amd-dependency path="underscore" />
/// <reference path="../../vendor/ts/backbone/backbone.d.ts" />
/// <reference path="../../vendor/ts/marionette/marionette.d.ts" />
/// <reference path="../../vendor/ts/jquery/jquery.d.ts" />
/// <reference path="../../vendor/ts/underscore/underscore.d.ts" />

export class Sample{

    constructor(public self:Marionette.Module, public app:Marionette.Application, public Backbone:Backbone, public Marionette:Marionette, public $:"jquery", public _:"underscore") {
        console.log("Sample.constructor");
        self.addInitializer(this.init);
    }

    init(options?:any) {
        console.log("Sample.init!");
    }

    start() {
        console.log("Sample.start");
    }

}

That code compiles to:

define(["require", "exports", "backbone", "marionette", "jquery", "underscore"], function(require, exports) {
    var Sample = (function () {
        function Sample(self, app, Backbone, Marionette, $, _) {
            this.self = self;
            this.app = app;
            this.Backbone = Backbone;
            this.Marionette = Marionette;
            this.$ = $;
            this._ = _;
            console.log("Sample.Sample!!!! %o %o", self, app);
            self.addInitializer(this.init);
        }
        Sample.prototype.init = function (options) {
            console.log("Sample.Sample.init!");
        };

        Sample.prototype.start = function () {
            console.log("Sample.Sample.start");
        };
        return Sample;
    })();
    exports.Sample = Sample;
});

while simple module written in javascript looks like that:

define(['text!./tpl.html'], function (tpl) {
    var Generic = function (self, app, Backbone, Marionette, $, _) {
        self.addInitializer(function (options) {
            console.log('Generic initialized %o', options);
        };
    };
    return Generic;
});

Can i write MarionetteJS module using Typescript? Does anyone has some examples? Any help appreciated.

Thanks

Answer 1

   class FoobarView extends Marionette.ItemView<Backbone.Model> {

        constructor(options?:any) {

            _.extend(options, {
               template: some_template_retriever_function('templatePath.html'),
               className: 'class-name'
            });

            this.behaviors = <any>{
                'somebehaviors' : {},
            };

            super(options);
        }

        serializeData():any {

        }

        show():void {
        }


    }

    export = FoobarView;

This will produce a module, after compiling, that can be imported directly to anything you name it

import FooBarView = require('Path/to/FoobarView');

// now you can instantiate this view

var view = new FooBarView({some:options});

of course, remember your typings reference at the top

/// <reference path="../../vendor/ts/marionette/marionette.d.ts" />