{"id":2072,"date":"2013-11-26T11:58:57","date_gmt":"2013-11-26T08:58:57","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2072"},"modified":"2025-09-02T15:17:00","modified_gmt":"2025-09-02T12:17:00","slug":"using-dhtmlxscheduler-and-dhtmlxgantt-with-typescript","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/using-dhtmlxscheduler-and-dhtmlxgantt-with-typescript\/","title":{"rendered":"Using DHTMLX Scheduler and DHTMLX Gantt with TypeScript"},"content":{"rendered":"<p>Developing a project management app is a formidable task. We try to help web developers from all over the world by providing feature-packed <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/\" rel=\"noopener\" target=\"_blank\">Gantt<\/a> and <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxScheduler\/\" rel=\"noopener\" target=\"_blank\">Scheduler<\/a> JavaScript libraries to speed up the implementation of popular tools for project management. Although both libraries are quite developer-friendly and have well-documented APIs, there is also one more great feature that should have a positive impact on developers&#8217; experience with DHTMLX, namely TypeScript support.<\/p>\n<p>In this article, you will learn about the general benefits of using TypeScript in web development and how it is used in our Gantt and Scheduler components.<\/p>\n<h5>What is TypeScript and How it Helps Developers<\/h5>\n<p>TypeScript is ranked as <a href=\"https:\/\/octoverse.github.com\/2022\/top-programming-languages\" rel=\"noopener\" target=\"_blank\">one of the fastest-growing programming languages<\/a>. In fact, it is a syntactic superset of JavaScript that adds optional static typing and class-based object-oriented programming on top of JavaScript. Since its release in 2012, TypeScript has grown to become a favorite choice of many web developers that eliminates numerous drawbacks of JavaScript.<\/p>\n<p>So what\u2019s so special about TypeScript?<br \/>\nFirst of all, it allows using optional static typing that helps to make your code more readable and less error-prone. It is important to note that with TypeScript web developers are able to control the level of type strictness in different areas of the project. Thus, developers get an opportunity to find the right balance between flexibility and correctness lasking in other statically typed languages. <\/p>\n<p>The list of other TypeScript advantages includes the following:<\/p>\n<ul>\n<li>Pop-up code completion<\/li>\n<li>Type definitions for existing JavaScript libraries<\/li>\n<li>Support for OOP concepts<\/li>\n<li>Rich IDE support<\/li>\n<li>Fast refactoring<\/li>\n<li>Cross-platform and cross-browser compatibility<\/li>\n<li>Steadily growing community<\/li>\n<li>And much more<\/li>\n<\/ul>\n<p>The TypeScript team continues to work hard on making TypeScript even more developer-friendly and has ambitious <a href=\"https:\/\/github.com\/microsoft\/TypeScript\/wiki\/Roadmap#future\" rel=\"noopener\" target=\"_blank\">plans for the future<\/a>. Web developers, in turn, show more trust in TypeScript and name it a likely successor of JavaScript. This point is backed by some results of the State of Frontend 2022 survey.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2013\/11\/image3.png\" alt=\"State of Frontend 2022 - TypeScript prospects\" width=\"934\" height=\"371\" class=\"aligncenter size-full wp-image-11474\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2013\/11\/image3.png 934w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2013\/11\/image3-300x119.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2013\/11\/image3-768x305.png 768w\" sizes=\"auto, (max-width: 934px) 100vw, 934px\" \/><em>Source: <a href=\"https:\/\/tsh.io\/state-of-frontend#in-your-opinion-which-of-the-following-future-of-typescript-scenarios-seems-most-likely-to-happen\" rel=\"noopener\" target=\"_blank\">State of Frontend 2022<\/a><\/em><\/p>\n<p>It is hard to ignore the growing popularity of TypeScript and the desire of web developers to be able to use it when building large-scale project management apps. That is why our top libraries for handling projects, namely Gantt and Scheduler, support TypeScript. <\/p>\n<h5>How TypeScript Works with DHTMLX<\/h5>\n<p>A long time ago, web developers had to make use of the open-source <a href=\"https:\/\/github.com\/DefinitelyTyped\/DefinitelyTyped\" rel=\"noopener\" target=\"_blank\">DefinitelyTyped<\/a> project to be able to take advantage of TypeScript with DHTMLX. Maintained and supported by the community, this project provides a repository for submitting type definitions for tools that are missing them.<\/p>\n<p>That approach had one significant drawback. We did not have direct control of the release process of the type definitions. So in order for us to push a fix or an update, we had to send a pull request and wait when the maintainers of the repository would review and accept our changes. Since the maintainers of DefinitelyTyped get pull requests from all sorts of projects, this process usually takes time and cannot be automated. And at some point, we decided to include TypeScript files in the packages of Gantt and Scheduler components. Now both libraries support TypeScript by default and developers have no need to install any other third-party libraries to conveniently work with types. <\/p>\n<p>For the open-source version of our Gantt (or when the Gantt Instance is not used), static types become available automatically when Gantt is imported as an ES6 module:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> gantt <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'dhtmlx-gantt'<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>When you create a Gantt instance dynamically, you should specify the type of the Gantt variable using the <strong>GanttStatic<\/strong> interface exported from the module:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> GanttStatic<span class=\"sy0\">,<\/span> Gantt <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'dhtmlx-gantt'<\/span><span class=\"sy0\">;<\/span><br \/>\nlet gantt<span class=\"sy0\">:<\/span> GanttStatic<span class=\"sy0\">;<\/span><\/div><\/div>\n<p>To enable TypeScript in DHTMLX Scheduler, you should use a static scheduler object:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> scheduler <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'dhtmlx-scheduler'<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>New instances of Scheduler are created using the factory pattern:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> scheduler <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'dhtmlx-scheduler'<\/span><span class=\"sy0\">;<\/span><br \/>\nCreating <span class=\"kw1\">new<\/span> instances of scheduler using the factory<span class=\"sy0\">:<\/span><br \/>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">&#123;<\/span> SchedulerStatic<span class=\"sy0\">,<\/span> Scheduler<span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'scheduler-gantt'<\/span><span class=\"sy0\">;<\/span><br \/>\nlet scheduler<span class=\"sy0\">:<\/span> SchedulerStatic<span class=\"sy0\">;<\/span><br \/>\n...<br \/>\n<span class=\"me1\">scheduler<\/span> <span class=\"sy0\">=<\/span> Scheduler.<span class=\"me1\">getSchedulerInstance<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n...<br \/>\n<span class=\"me1\">scheduler<\/span>.<span class=\"me1\">destroy<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>You can also use TypeScript with our Gantt and Scheduler components integrated into apps based on popular frameworks.<\/p>\n<p>Here is an example of using TypeScript in the Angular app with our Gantt component:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2013\/11\/image1-1024x490.png\" alt=\"DHTMLX Gantt with TypeScript\" width=\"1024\" height=\"490\" class=\"aligncenter size-large wp-image-11475\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2013\/11\/image1-1024x490.png 1024w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2013\/11\/image1-300x143.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2013\/11\/image1-768x367.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2013\/11\/image1.png 1232w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><a href=\"https:\/\/stackblitz.com\/edit\/angular-5hvcce\" rel=\"noopener\" target=\"_blank\">Check the demo ><\/a><\/p>\n<p>The sample below shows the use of TypeScript in the Angular project with the embedded Scheduler component.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2013\/11\/image2.jpg\" alt=\"DHTMLX Scheduler with TypeScript\" width=\"834\" height=\"473\" class=\"aligncenter size-full wp-image-11476\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2013\/11\/image2.jpg 834w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2013\/11\/image2-300x170.jpg 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2013\/11\/image2-768x436.jpg 768w\" sizes=\"auto, (max-width: 834px) 100vw, 834px\" \/><a href=\"https:\/\/stackblitz.com\/edit\/angular-zwkuzs\" rel=\"noopener\" target=\"_blank\">Check the demo ><\/a><\/p>\n<p>With TypeScript, DHTMLX users can rely on type checking and autocompletion to avoid potential errors. Apart from that, TypeScript also provides helpful info about the types of data you should use while working with the API of any DHTMLX components.<\/p>\n<p>When working on new versions of both Gantt and Scheduler, we periodically add some new types or update the existing ones to ensure a better experience for DHTMLX users with TypeScript.<\/p>\n<p>We also would like to mention that the latest additions to our product line for project management such as <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxKanban\/\" rel=\"noopener\" target=\"_blank\">Kanban<\/a>, <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxTodo\/\" rel=\"noopener\" target=\"_blank\">To Do List<\/a>, and <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxEventCalendar\/\" rel=\"noopener\" target=\"_blank\">Event Calendar<\/a> are written in TypeScript. Other DHTMLX libraries come with built-in support for TypeScript definitions which work out of the box. Here is one more <a href=\"https:\/\/dhtmlx.com\/blog\/understanding-typescript-benefits-and-use-cases\/\" rel=\"noopener\" target=\"_blank\">article<\/a> in our blog, where you will learn more about the benefits and use cases of TypeScript.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Developing a project management app is a formidable task. We try to help web developers from all over the world by providing feature-packed Gantt and Scheduler JavaScript libraries to &#8230;<\/p>\n","protected":false},"author":2,"featured_media":11477,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,72,71,1,38],"tags":[33,20,14,15,41],"class_list":["post-2072","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-general","category-tutorials","category-uncategorized","category-visible","tag-all-posts","tag-gantt","tag-tips","tag-dhtmlxscheduler","tag-typescript"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=2072"}],"version-history":[{"count":10,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2072\/revisions"}],"predecessor-version":[{"id":14397,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2072\/revisions\/14397"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/11477"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}