Typescript + RequireJS

3 posts, 1 answers
  1. Kerry
    Kerry avatar
    19 posts
    Member since:
    Jul 2013

    Posted 30 Sep 2013 Link to this post

    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?

  2. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 30 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kerry
    Kerry avatar
    19 posts
    Member since:
    Jul 2013

    Posted 30 Sep 2013 Link to this post

    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
Back to Top