Typescript + RequireJS

[Kerry]

I am working to get KendoUI, Typescript, and RequireJS to work together.  I have a version that is working but I would like advice on improving it.

Attached is my simple example in a Visual Studio 2013 RC project.  (UpdatedKendoUITypeScriptRequireJS.zip)

I have searched the web exhaustively but have not found anyone that has an example of the combination of KendoUI, Typescript, and RequireJS, but I may have missed it. :-).  

What I did to make it work was create a file called kendo.custom.d.ts.  In this file I put the following declarations for the two KendoUI widgets that I am using in my simple example: 

declare module "k/kendo.autocomplete.min" {
    export var load;
}

declare module "k/kendo.menu.min" {
    export var load;
}

I also included the kendo.all.d.ts file.

In my JavaScript I configured RequireJS like the following:

<script type="text/javascript">

    require.config({
        paths: {
            app: '/Scripts/app',
            k: 'http://cdn.kendostatic.com/2013.2.716/js'
        }
    });

    require(['app/index'],
            function (i) {
                new i.index();
            });
</script>

In the TypeScript file, index.ts I brought in the dependencies like the following:

import kendoConstant = require('app/kendoConstant');
import kendoMenuScript = require('k/kendo.menu.min');
import kendoAutoCompleteScript = require("k/kendo.autocomplete.min");

export class index {
    private _menuElement: JQuery;
    private _searchButtonElement: JQuery;
    private _searchBoxElement: JQuery;

    private _searchDataSource: kendo.data.DataSource;
    private _searchBox: kendo.ui.AutoComplete;

    private _searchAutocompleteMinLength: number;

    constructor() {
        kendoMenuScript;  //necessary reference so the k/kendo.menu.min will be in the generated require statement
        kendoAutoCompleteScript; //necessary reference so the k/kendo.autocomplete.min will be in the generated require statement

        this._searchAutocompleteMinLength = 3;

        this._menuElement = $("#menu")
        this._searchBoxElement = $("#searchBox");
        this._searchButtonElement = $("#searchButton");

        this._menuElement.kendoMenu();
        this._menuElement.show();

        this._searchDataSource = this.createSearchDataSource();
        this._searchBox = this.createAutoComplete();

        this._searchBoxElement.keydown((e) => {
            if (e.which == kendo.keys.ENTER) {
                this.processSearch();
            }
        });

        this._searchButtonElement.click(() => this.processSearch());
    }

    private createSearchDataSource(): kendo.data.DataSource {
        return new kendo.data.DataSource({
            data: [
                { "id": 1, "name": "John Doe" },
                { "id": 2, "name": "John Smith" },
                { "id": 3, "name": "Jane Doe" },
                { "id": 4, "name": "Johnny Appleseed" },
                { "id": 5, "name": "Joan Maryland" },
                { "id": 6, "name": "Johan Brown" }
            ]
        });
    }

    private createAutoComplete(): kendo.ui.AutoComplete {

        return this._searchBoxElement.kendoAutoComplete({
            dataSource: this._searchDataSource,
            placeholder: "Search...",
            minLength: this._searchAutocompleteMinLength,
            filter: "startswith",
            dataTextField: "name",
            suggest: true,
        }).data(kendoConstant.kendoAutoComplete);

    }

    private processSearch() {
        var value = this._searchBox.value();
        if (value != "") {
            alert(value + " would be searched for...");
        }
    }
}

You can see I import the kendoMenuScript and kendoAutoCompleteScript with a require of the path of the actual Kendo file that contains the JavaScript for the widget.  In the TypeScript file I make add a call to kendoMenuScript and kendoAutoCompleteScript so that TypeScript will add them to the "require" that it will generate, so that the actual Kendo JavaScript files will be pulled in.

Is there a better way to do this?

[Atanas Korchev]

Hi Kerry,

 Have you tried with the <amd-dependency> tag? Every Kendo UI file is an AMD module itself. You can check this blog post for some info: https://medium.com/p/442be2043833

Regards,
Atanas Korchev
Telerik

[Kerry]

Atanas, 

Thank you!  That works.  The top of my TypeScript file now looks like:

/// <amd-dependency path="k/kendo.menu.min" />
/// <amd-dependency path="k/kendo.autocomplete.min" />
import kendoConstant = require('app/kendoConstant');

export class index {
...

This causes RequireJS to bring in the dependency without having to have my custom d.ts or having to have the code refer to the custom d.ts.

Kerry