I am glad to announce that, as of Q3 2014, the Telerik UI for ASP.NET AJAX suite comes with TypeScript definitions for its client-side objects. In fact, their first version is available in the Q3 2014 BETA, so you can get it and give them a spin.
Now, let’s start from the basics and I will walk you through the initial setup for using TypeScript so you can get started.
TypeScript infers the type of the object in order to provide you with
To do this for you, however, Visual Studio needs to obtain this information from somewhere. The files that contain it are called Definition files and we prepared one for our objects to aid you. Since we are based on the MS AJAX framework, we also bring you the MS AJAX definitions, so you don’t have to look for them yourself.
Install the UI for ASP.NET AJAX suite and go to the TypeScriptDefinitions folder. It is available both in the manual installation (zip archive) and in the automated installer (
Your other option is to use the Telerik WebApplication Creation Wizard or the Telerik Upgrade Wizard as they can both copy those definitions for you. Of course, make sure to upgrade the Telerik Visual Studio Extensions to their latest version so you can get this new feature.
Now, let’s make this a nice walkthrough:
That’s it. Visual Studio (especially VS2013 Update 2 and later) will do most of the work for you.
You can download a project that has all of the above in place. Make sure to update the definitions with the ones from the latest version, of course :) If you are on an earlier version than VS 2013 Update 2, you will still need to install the TypeScript Tools.
Here follows a snapshot of how
Figure 4: TypeScript
Figure 5: TypeScript
Figure 6: TypeScript
TypeScript only infers the object type. This means that it does not know that for sure, nor does it perform “real” casting like C# or VB.
If you cast an object, you cannot check if it is null to detect its type. TypeScript will assume you know what you are doing and will not correct you. So, you need to check for flags like the presence of the method you wish to call rather than for its object type.
Here is a sample RadTileList OnClientTileSelecting handler. Let’s assume we wish to execute some logic for RadLiveTiles when they are about to be selected, but not for other
Example 1: TypeScript code that shows casting does not guarantee correct type and method availability.
Obviously, whether the
We will also continually improve our definitions so they become better at helping you write client-side code with ease. We are already working on an easier way to show you what type of event arguments the event handlers receive, so when that’s available you will no longer need to wonder what’s available in the event you are using.
If you use some tools to help with your TypeScript experience, you have a success story or a tip for your fellow developers, please share it in the comments.
Marin Bratanov is a Principal Technical Support Engineer in the Blazor division, after starting out in WebForms and going through Kendo UI. Ever since he joined Telerik in early 2011 as a novice, his main focus has been improving the services and customer care the company offers. Apart from work, Marin is an avid reader and usually enjoys the worlds of fantasy and Sci-Fi literature. You can find him on Twitter, Goodreads, LinkedIn and Facebook.
Subscribe to be the first to get our expert-written articles and tutorials for developers!