Module pattern is great to split your class in multiple files here is a demo.
You can test the JS export here > https://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 = ""; } } }