Don Wibier's Blog

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.

Published Nov 14 2017, 11:28 AM by
Filed under: , ,
Bookmark and Share

Comments

No Comments
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners