Creating Custom Kendo UI Widgets in TypeScript and documenting them

Typescript provide a great aid for developing Front End Code.

This is an starting template that I will recommend for creating a custom widget

/**
 * Custom Widget Example
 * =======================
 * This module is meant to provide an example for creating custom widgets
 * @preferred
 */
module CustomWidgeExample {

    declare var kendo;
    declare var ui;
    declare var $;

    var ui = kendo.ui, Widget = ui.Widget;


    /**
     * Custom Widget 
     * -------------
     *
     * Expects a view model following the following JSON Structure
     * ``` { Text: "Some Text", UniqueID: 100 } ```
     */
    class CustomWidget {
        $value;

        /**
         * Read options or **uses defaults**.
         * ** HTML is created here **
         */
        init(element, options?) {
            if (typeof (options) == "undefined") options = this.options;
            Widget.fn.init.call(this, element, options);
             // Create HTML elements
             //For example
            var buttonLogin = $("<input>").attr({ type: 'button', value: 'Login' });
            // Append to DOM
            //For example
            $(element).append(buttonLogin);
        }

        /**
         * MVVM framework calls 'value' when the viewmodel 'value' binding changes 
         */
        value(val) {
            if (val === undefined) {
                //No arguments means it is used as a getter
                return this.$value;
            }
            else {
                //Update widget
                this.refresh(val);
            }
        }

        /**
         * performs any UI updates
         */
        refresh(val) {
            //TODO
        }

        options = {
            /**
             * the name is what it will appear as off the kendo namespace(i.e. kendo.ui.WindowsFormsApplication1_UserControl1). 
             * The jQuery plugin would be jQuery.fn.kendoUserControl1. 
             */
            name: "CustomWidget"
        }
    }

    ui.plugin(Widget.extend(new CustomWidget()));
}

The comments for this Widget can be used to generate documentation. Comments can use markdown format.

These are some examples of the documentation pages generated using typedoc.io

Widget Definition

Object Literals

Methods