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 563 Views

General Discussions

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

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

Accepted

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!