Using dhtmlxScheduler and dhtmlxGantt with TypeScript

| Leave a comment

This is another tutorial that explains how to use the DHTMLX components with third-party JavaScript projects. We will show you a simple way to use dhtmlxScheduler and dhtmlxGantt with TypeScript.

DHTMLX Scheduler and Gantt Chart

TypeScript is a free language developed by Microsoft. It is a strict superset of JavaScript that adds optional static typing and class-based object oriented programming to the language. Its usage simplifies big-scale app development due to the good tooling and automatic type checking.

You can use any JavaScript library with TypeScript so, technically speaking, you have already been able to use dhtmlxScheduler and dhtmlxGantt with TypeScript all this time. The major disadvantage of such JavaScript-TypeScript combination is the loss of type information, which is the main strength of using TypeScript. While working with the DHTMLX scheduler and Gantt chart, IDE (Visual Studio) will not be able to check types and use intellisense correctly.

This problem is common not only for DHTMLX but for other JS components as well. So there is an open source project that helps to fix the gap between JavaScript libraries and TypeScript – DefinitelyTyped.

Now you can install the scheduler TypeScript package that will add type information for dhtmlxScheduler and dhtmlxGantt. In case of Microsoft Visual Studio, it can be done through Library Package Manager, by using command like this for dhtmlxScheduler:

Install-Package dhtmlxscheduler.TypeScript.DefinitelyTyped

and for dhtmlxGantt it will be:

Install-Package dhtmlxgantt.TypeScript.DefinitelyTyped

Please beware that it will install only TypeScript definitions. To have a working app, you will need to add dhtmlxScheduler or dhtmlxGantt JavaScript files as well.

 
dhtmlxGantt and TypeScript

 
Of course, if you are not using Microsoft dev tools, you still can grab the definition file from the Definitely Typed repository and use it in your app.

Leave a Reply