<file_sep>﻿var usingexternal;(function(){var n=ko.observable("Sean")})(usingexternal||(usingexternal={}))<file_sep>module using_interface {

    //var registerEmployee = function (employee: { name: string; age?: number }) {
    //    if (employee.age === undefined) {
    //        employee.age = 20;
    //    }
    //    console.log(employee);
    //}

    // be careful, using ; instead of ,
    interface RegisterOptions {
        employee: Employee;
        registerDate: Date;
        department: string;
    }

    interface Employee {
        name: string;
        age?: number;
    }

    interface RegisterFunction {
        (employee: Employee): void;
    }

    var registerEmployee: RegisterFunction = (employee) => {
        if (employee.age === undefined) {
            employee.age = 20;
        }
        console.log(employee);
    }


    var initRegister = (options: RegisterOptions) => {
        var message = 'hi ' + options.employee.name + ' welcome';
        console.log(message);
    }

    var options: RegisterOptions = {
        employee: {
            name: 'sean',
            age: 28
        },
        registerDate: new Date(2012, 03, 01),
        department: 'CL'
    };
    initRegister(options);

    
}<file_sep>var app;
(function (app) {
    (function (tools) {
        (function (utils) {
            var Logger = (function () {
                function Logger() {
                }
                Logger.prototype.log = function (message) {
                    console.log(message);
                };
                return Logger;
            })();
            utils.Logger = Logger;
        })(tools.utils || (tools.utils = {}));
        var utils = tools.utils;
    })(app.tools || (app.tools = {}));
    var tools = app.tools;
})(app || (app = {}));
<file_sep>var using_objects;
(function (using_objects) {
    var obj = { x: 10, y: 20 };
    obj.x;

    var person = {
        name: 'sean',
        lastName: 'xu',
        getFullName: function () {
            return this.name + this.lastName;
        }
    };
    console.log(person.getFullName());

    //notice { name: string; age?: number }, it's semi-colon instead of comma, this confused me a lot of time;
    // infact { name: string; age?: number }, is the interface of employee, it's not object literal
    var registerEmployee = function (employee) {
        if (employee.age === undefined) {
            employee.age = 20;
        }
        console.log(employee);
    };

    registerEmployee({ name: 'sean' });
})(using_objects || (using_objects = {}));
<file_sep>/// <reference path="typings/knockout.d.ts" />
var viewModal = ((function () {
    var _name = ko.observable('sean');
    _name.subscribe(function (newValue) {
        alert(newValue);
    });

    return {
        name: _name
    };
})());
<file_sep>/// <reference path="separatingmodule.ts" />

module app {
    import Log = app.tools.utils.Logger;

    export class AppViewModal implements IAppViewModal {

        _logger: Log;

        constructor() {
            this._logger = new Log();
        }

        save() {
            this._logger.log('saved');
        }
    }

}

module common {

    export interface IConfig {
        siteUrl: string;
        timeout: number;
        logger: app.tools.utils.Logger;
    };

 
    export function config ():IConfig {
        return {
            siteUrl: 'App',
            timeout: 10,
            logger: new app.tools.utils.Logger()
        }
    };

}

module app {
    export interface IAppViewModal { }
}


var config = common.config();

var modal = new app.AppViewModal();
var logger = new app.tools.utils.Logger(); // this way, the namespace is too long, we can shorten the namespace by import
<file_sep>module using_objects {
    var obj = { x: 10, y: 20 };
    obj.x;

    var person = {
        name: 'sean',
        lastName: 'xu',

        getFullName: function () {
            return this.name + this.lastName;
        }
    };
    console.log(person.getFullName());

    //notice { name: string; age?: number }, it's semi-colon instead of comma, this confused me a lot of time;
    // infact { name: string; age?: number }, is the interface of employee, it's not object literal
    var registerEmployee = function (employee: { name: string; age?: number }) {
        if (employee.age === undefined) {
            employee.age = 20;
        }
        console.log(employee);
    }

    registerEmployee({ name: 'sean' });

}<file_sep>var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var class_extend_demo;
(function (class_extend_demo) {
    ;

    var BaseViewModal = (function () {
        function BaseViewModal(deal) {
            this._deal = deal;
        }
        BaseViewModal.prototype.methodCanbeOverride = function () {
            console.log(this._deal);
            console.log('call methodCanbeOverride2 from base class');
        };

        BaseViewModal.prototype.save = function () {
            if (this.onbeforeSave) {
                this.onbeforeSave();
            }
            console.log(this._deal);
            console.log('saved');
            if (this.onafterSave) {
                this.onafterSave();
            }
        };

        BaseViewModal.prototype.propertyAccessor = function (propertyName) {
            return this._deal[propertyName];
        };
        return BaseViewModal;
    })();
    class_extend_demo.BaseViewModal = BaseViewModal;

    var DealingViewModal = (function (_super) {
        __extends(DealingViewModal, _super);
        function DealingViewModal(deal) {
            _super.call(this, deal);
            this.onbeforeSave = function () {
                console.log('on before save');
            };
            this.onafterSave = function () {
                console.log('on after save');
            };
        }
        DealingViewModal.prototype.calculateContractMonth = function (month) {
            (this._deal).contractMonth = month;
        };

        DealingViewModal.prototype.methodCanbeOverride = function () {
            _super.prototype.methodCanbeOverride.call(this);
            console.log('call from sub');
        };
        return DealingViewModal;
    })(BaseViewModal);
    class_extend_demo.DealingViewModal = DealingViewModal;

    var futureDeal = {
        dealNumber: 1,
        instrument: 'future and eto',
        exchange: 'chargo exchange',
        matureDate: new Date(),
        contractMonth: 12
    };
    var future = new DealingViewModal(futureDeal);
    future.calculateContractMonth(5);
    future.methodCanbeOverride();
    var contracMonth = future.propertyAccessor('contractMonth');
    console.log(contracMonth);
    future.save();
})(class_extend_demo || (class_extend_demo = {}));
<file_sep>document.addEventListener('DOMContentLoaded', function (event) {
}, false);

var ViewModel = (function () {
    function ViewModel(id, txtId) {
        this.btnClick = document.getElementById(id);
        this.txtInput = document.getElementById(txtId);
        this.init();
    }
    ViewModel.prototype.init = function () {
        this.btnClick.addEventListener('click', this.onbtnClicked, false);
    };

    //init() {
    //    this.btnClick.addEventListener('click', this.onbtnClicked.bind(this), false);
    //}
    //init() {
    //    this.btnClick.addEventListener('click', (event) => {
    //        this.txtInput.value = 'button clicked';
    //    }, false);
    //    this.btnClick.addEventListener('click', this.onbtnClicked, false);
    //}
    ViewModel.prototype.onbtnClicked = function (event) {
        console.log(this);
        this.txtInput.value = 'button clicked';
    };
    return ViewModel;
})();
<file_sep>module app.tools.utils {
    export class Logger {
        log(message: string): void {
            console.log(message);
        }
    }
}<file_sep>module usingexternal {

    declare var ko;
    declare var $;

    var name = ko.observable('Sean');

    var $obj = $('hello');


}
<file_sep>/// <reference path="typings/knockout.d.ts" />


var viewModal = (function () {

    var _name = ko.observable('sean');
    _name.subscribe((newValue) => {
        alert(newValue);
    });

    return {
        name: _name
    };
} ());<file_sep>
// we can also use complex type
class Exchange {
    constructor(public exchangeName: string) {
    }
}

class Deal {
    private _instrument: string;
    private _exchange: Exchange;

    constructor(instrument: string, exchange: Exchange) {
        this._exchange = exchange;
        this._instrument = instrument;
    }

    getExchange(): Exchange {
        return this._exchange;
    }

    get instrument(): string {
        return this._instrument;
    }
    set instrument(value: string) {
        this._instrument = value;
    }

    static newDeal(): Deal {
        return new Deal('', new Exchange(''));
    }
}


//type convert
var table: HTMLTableElement = document.createElement('table');

//or

var table = <HTMLTableElement> document.createElement('table');
table.createTBody();


<file_sep>var using_interface;
(function (using_interface) {
    var registerEmployee = function (employee) {
        if (employee.age === undefined) {
            employee.age = 20;
        }
        console.log(employee);
    };

    var initRegister = function (options) {
        var message = 'hi ' + options.employee.name + ' welcome';
        console.log(message);
    };

    var options = {
        employee: {
            name: 'sean',
            age: 28
        },
        registerDate: new Date(2012, 03, 01),
        department: 'CL'
    };
    initRegister(options);
})(using_interface || (using_interface = {}));
<file_sep>class Car {
    private _enginType: string;

    constructor(enginType: string) {
        this._enginType = enginType;
    }

    Start(): void {
        alert(this._enginType + 'Start');
    }

    Stop(): void {
        alert(this._enginType + 'Stop');
    }
}<file_sep>TypeScriptFundamental
=====================

Demo Code for TypeScriptFundamental
<file_sep>document.addEventListener('DOMContentLoaded', (event) => {



}, false);


class ViewModel {
    private btnClick: HTMLInputElement;
    private txtInput: HTMLInputElement;

    constructor(id: string, txtId:string) {
        this.btnClick = <HTMLInputElement>document.getElementById(id);
        this.txtInput = <HTMLInputElement>document.getElementById(txtId);
        this.init();
    }

    init() {
        this.btnClick.addEventListener('click', this.onbtnClicked, false);
    }

    //init() {
    //    this.btnClick.addEventListener('click', this.onbtnClicked.bind(this), false);
    //}
    //init() {
    //    this.btnClick.addEventListener('click', (event) => {
    //        this.txtInput.value = 'button clicked';
    //    }, false);

    //    this.btnClick.addEventListener('click', this.onbtnClicked, false);
    //}

    onbtnClicked(event: Event) {
        console.log(this);
        this.txtInput.value = 'button clicked';
    }


}
<file_sep>var Exchange = (function () {
    function Exchange(exchangeName) {
        this.exchangeName = exchangeName;
    }
    return Exchange;
})();

var Deal = (function () {
    function Deal(instrument, exchange) {
        this._exchange = exchange;
        this._instrument = instrument;
    }
    Deal.prototype.getExchange = function () {
        return this._exchange;
    };

    Object.defineProperty(Deal.prototype, "instrument", {
        get: function () {
            return this._instrument;
        },
        set: function (value) {
            this._instrument = value;
        },
        enumerable: true,
        configurable: true
    });

    Deal.newDeal = function () {
        return new Deal('', new Exchange(''));
    };
    return Deal;
})();

var table = document.createElement('table');

var table = document.createElement('table');
table.createTBody();
<file_sep>var num:number = 2;

//you can also, 
var str = 'two';  //same as var str:string = 'two';

//if you want dynamic, which is not recommanded, you can use any type
var any1: any = 2;
any1 = 'two';

//function type
var func: (firstPara: string, secondPara: number) => string = (firstPara, secondPara) => {
    return firstPara + secondPara;
};

var result = func('hello', 2);

var thefunction_that_take_func_as_paramater: (func: (firstPara: string, secondPara: number) => string) => void
    = (func) => {
    var
        hello = 'hello',
        world = 2;
    console.log(func(hello,world));
}

thefunction_that_take_func_as_paramater((a, b) => {
    return '';
});

var obj = undefined;
<file_sep>module class_extend_demo {

    export interface Deal {
        dealNumber: number
    };

    export interface FutureDeal extends Deal {
        instrument: string;
        exchange: string;
        matureDate: Date;
        contractMonth: number;
    }

    export class BaseViewModal {

        _deal: Deal;
        onbeforeSave: () => void;
        onafterSave: () => void;

        constructor(deal: Deal) {
            this._deal = deal;
        }

        public methodCanbeOverride(): void {
            console.log(this._deal);
            console.log('call methodCanbeOverride2 from base class');
        }

        public 

        save(): void {
            if (this.onbeforeSave) {
                this.onbeforeSave();
            }
            console.log(this._deal);
            console.log('saved');
            if (this.onafterSave) {
                this.onafterSave();
            }

        }

        propertyAccessor(propertyName: string): any {
            return this._deal[propertyName];
        }


    }

    export class DealingViewModal extends BaseViewModal {

        constructor(deal: Deal) {
            super(deal);
        }

        public calculateContractMonth(month: number): void {
            (<FutureDeal>this._deal).contractMonth = month;
        }

        onbeforeSave = () => {
            console.log('on before save');
        }

        onafterSave = () => {
            console.log('on after save');
        }

        public methodCanbeOverride(): void {
            super.methodCanbeOverride();
            console.log('call from sub');

        }

    }

    var futureDeal: FutureDeal = {
        dealNumber: 1,
        instrument: 'future and eto',
        exchange: 'chargo exchange',
        matureDate: new Date(),
        contractMonth: 12
    };
    var future = new DealingViewModal(futureDeal);
    future.calculateContractMonth(5);
    future.methodCanbeOverride();
    var contracMonth = future.propertyAccessor('contractMonth');
    console.log(contracMonth);
    future.save();
}
<file_sep>var num = 2;

var str = 'two';

var any1 = 2;
any1 = 'two';

var func = function (firstPara, secondPara) {
    return firstPara + secondPara;
};

var result = func('hello', 2);

var thefunction_that_take_func_as_paramater = function (func) {
    var hello = 'hello', world = 2;
    console.log(func(hello, world));
};

thefunction_that_take_func_as_paramater(function (a, b) {
    return '';
});

var obj = undefined;
