This is a migrated thread and some comments may be shown as answers.

How to use Kendo UI Web with TypeScript and RequireJS

3 Answers 327 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Sean
Top achievements
Rank 1
Sean asked on 18 Jun 2014, 02:22 PM

What is the correct way to import Kendo when using TypeScript and RequireJS? 

I have added the kendo.web.d.ts file to my typings folder in my project and then I tried to import kendo with the following code:

import kendo = require("kendo");

However, this I get the following error:

error TS2071: Build: Unable to resolve external module '"kendo"'.

I am able to import jQuery with the following code:

import $ = require("jquery");

And it does not have an issue.  So I'm wondering what is needed to import Kendo.

Also, I found this post: http://www.telerik.com/forums/typescript-requirejs, where it mentions adding the "amd-dependency path", but that seems like extra work.  I don't want to have to add that comment to each TypeScript file that uses Kendo.  It seems like I should be able to use the import statement, like I can with other libraries (such as jQuery).

I have not found any documentation on this topic on the Kendo site, so any help would be greatly appreciated.

Thanks,
Sean

3 Answers, 1 is accepted

Sort by
0
Accepted
Mihai
Telerik team
answered on 19 Jun 2014, 12:22 PM
Hi Sean,

I got it to work after some digging.  I had to add the following lines to the kendo.all.d.ts file:

declare module "kendo" {
    export = kendo;
}
 
You can place them at the end.  We need to assess if this will not impact other use cases, but it will probably be added in a future Kendo version.

Next, you need to configure RequireJS.  The following works for me:

/** file: config.ts **/
/// <reference path="../vendor/require.d.ts" />

require.config({
    paths: {
        jquery: "../vendor/jquery",
        kendo: "../vendor/kendo.all"
    },
    shim: {
        kendo: {
            deps: [ "jquery" ],
            exports: "kendo"
        }
    }
});

require([ "app" ]);

The app.ts file looks like this:

/// <reference path="../vendor/jquery.d.ts" />
/// <reference path="../vendor/kendo.all.d.ts" />
/// <amd-dependency path="kendo" />

import $ = require("jquery");
import kendo = require("kendo");

$(document).ready(() => {
    var win = $("<div></div>").kendoWindow({
        title: "Hello world",
        width: 400,
        height: 300
    }).data("kendoWindow");
    win.open().center();
});

 
As you can see, the amd-dependency line is (unfortunately) still necessary.  Otherwise "kendo" will not be included in the list of dependencies in the compiled output.  I could not figure out by which magic jQuery works out of the box.

Finally, the HTML looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" type="text/css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" type="text/css" />
    <script src="vendor/require.js" data-main="compiled/config"></script>
  </head>
</html>

 
Hope this helps.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sean
Top achievements
Rank 1
answered on 24 Jun 2014, 02:56 PM
Mihai,
Thanks for the help.  I was able to get it working with the changes that you specified.  I'd like to vote for including the "declare module..." lines to the TypeScript definition file.  Otherwise our Devs will have to add it back in each time we upgrade Kendo, and it would be an easy step to miss.

-Sean
0
Mihai
Telerik team
answered on 25 Jun 2014, 08:56 AM
Hi Sean,

Thanks for the followup.  We will consider adding the module declaration after testing.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
General Discussions
Asked by
Sean
Top achievements
Rank 1
Answers by
Mihai
Telerik team
Sean
Top achievements
Rank 1
Share this question
or