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.

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:

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:

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.

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.

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

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.