Module pattern is great to split your class in multiple files here is a demo.

You can test the JS export here > http://yopsolo.fr/demo/ts/test-app/Main.htm

Please note that the source code below use AS3 syntax coloration :)

Main.ts

/// <reference path="Events.ts" />
/// <reference path="Test.ts" />
module Poulet 
{

    class Main 
    {
        private _element: HTMLElement;
        private _span: HTMLElement;
        private _timerToken: number;
        //private _isRunning: bool;
        public isRunning: bool;

        constructor (element: HTMLElement) 
        {
            //this._isRunning = false;
            this.isRunning = false;
            this._element = element;
            this._element.innerText += "Date : ";
            this._span = document.createElement('span');
            this._element.appendChild(this._span);
            this._span.textContent = new Date().toUTCString();
        }

        public start(): void 
        {
            //this._isRunning = true;
            this.isRunning = true;
            this._timerToken = setInterval(() => this._span.innerText = new Date().toUTCString(), 500);
            this._element.addEventListener(Events.CLICK, _onClick);
        }

        public stop(): void 
        {
            //this._isRunning = false;
            this.isRunning = false;
            clearTimeout(this._timerToken);
        }

        /* not working :/
        get isRunning(): bool 
        {
            return this._isRunning;
        }
        */

    }


    ////////////////////////////////////////////////////////////////////////////////////////////////////
    window.addEventListener(Events.LOAD, _onLoad);
    var mainApp: Main;
    var test: Test;

    function _onLoad(e: Event) {
        var el = document.getElementById('content');
        mainApp = new Main(el);
        test = new Test(el);
        //
        mainApp.start();
    };

    function _onClick(e:MouseEvent): void 
    {
        if ( mainApp.isRunning ) 
        {
            mainApp.stop();
            test.applyStyle();
        } else {
            mainApp.start();
            test.removeStyle();
        }
    }
}

Events.ts

module Poulet 
{
    export class Events {
        static public LOAD = "load";
        static public CLICK = "click";
    }
}

Test.ts

/// <reference path="Events.ts" />

module Poulet 
{
    export class Test 
    {
        element: HTMLElement;
        constructor (element: HTMLElement) 
        {
            this.element = element;
        }

        public applyStyle(): void 
        {
            this.element.className = "red";
        }
                
        public removeStyle(): void 
        {
            this.element.className = "";
        }

    }
}

Vote in HexoSearch