DevExtreme: New TypeScript declarations and improved Angular typings (v17.2)

One of the things we support from the very first release of DevExtreme is TypeScript.

new-TypeScript-declarations-typings-for-angular-blog

As many of you know, TypeScript and its tooling allow us to use compile-time type checks and it offers support for classes and interfaces. Because of these features, one is able to build large scale JavaScript applications. In fact Google is using TypeScript for developing Angular.

With our v17.2 release we have improved our TypeScript declarations for the DevExtreme widgets API as well as the Angular integration layer.

What does this mean?

In the previous releases, most of the classes in the DevExtreme API had weakly typed properties (of type ‘any’). This means that compile time type checking always resulted in a successful build even if you try to bind a string value to a property which needs a number.

With v17.2 we have made the DevExtreme API strongly typed which results in improved code editor hints:

wrongtype

One of the cool features of TypeScript is the use of union types (‘|’ sign). This allows us to specify a number of types to be used like shown in the following table:

  v17.1 v17.2
dxDateBoxOptions value? : any value? : Date | number | string
All widgets dataSource? : any dataSource? : Array | DataSource | DataSourceOptions | string;

To make the DevExtreme API more fluent, we’ve also introduced the use of ‘type’ declarations like:

    
     export type format = string | ((value: number | Date) => string) | {        
        type?: string,
        precision?: number,
        currency?: string,
        formatter?: ((value: number | Date) => string),
        parser?: ((value: string) => number | Date)
     };
     //...
     // in dxDateBoxOptions
     displayFormat?: format;

  
 

While we were working on these developer improvements, we worked on the IntelliSense support as well. All the information you normally look up on our documentation site will now show up in the Quick Info tooltip and it is used in the code-completion to increase your productivity.

uniontype

What about Angular?

Because Angular is written in TypeScript, all these developer sweetness works for Angular as well!

We have strongly typed the Angular Component properties which results in less runtime errors because the build process of an Angular application will do the type-checking for us.

data-image-png;base…

And while coding, we are now able to give you short descriptions through the Quick Info panel in IntelliSense as well.

desc_light

Try it now?

So ready for a test-drive?

These new features are included in the v17.2 pre-beta that is available through npm right now. Please note that this pre-beta may contain some bugs and is not intended to be used in production: 

npm install devextreme@17.2.1-pre-beta

Learn more about DevExtreme's pre-releases in this blog post.

Like it?

Let me know by replying to this post if you like the features outlined in this post.

2 comment(s)
Marcel Malik

Great extension for Angular. Makes things a lot easier.

Any additional plans to add typings for events, like datagrid onRowClick, onContentReady etc..?

22 January, 2018
Sayantan Sinha

This helps immensely but now not able to perform array operations like forEach due to union of multiple types attached to the datasource object. So, our old code is not working anymore. How to make that work?

22 January, 2018

Please login or register to post comments.