October 12, 2012

TypeScript CRM 2011 client scripting definition file

CodePlex project page

TypeScript?
Last week Microsoft went public with a JavaScript super-set language called TypeScript. The idea behind this language was to keep it compatible with JavaScript (all JavaScript code is TypeScript code) and add a few features which make it easier to manage large code bases.
This features include compile time type checking and well known OOP structures like classes, interfaces and modules. OOP structures were possible to emulate in JavaScript but required the developer to write code that wasn't very easy to read and understand.

Off course TypeScript code is not understood by browsers. The code you write in TypeScript is compiled to pure JavaScript using the type script compiler (tsc). You then reference that JavaScript in you're web pages. The compiler tries to keep the structure of the generated JavaScript code as close to the original TypeScript code as possible, so it's easy to debug.

In one sentence TypeScript makes JavaScript easier to write, maintain and safer.

The TypeScript team also created a plugin for Visual Studio 2012 that provides syntax highlighting, automatic background compiling and more importantly IntelliSense for TypeScript code. In order to use that feature for existing JavaScript code it is required to create a definition file (something like header files in C/C++). Because I'm mainly a Dynamics CRM developer I thought it would be worthwhile to create such a definition file for Dynamics CRM 2011 client scripting - the Xrm.Page JavaScript library.

Simple manual (if you already have TypeScript installed):
1. Download the Xrm2011.d.ts file from the link above.
2. Add it to your project.
3. In your TypeScript code reference the definition file by adding
/// <reference path="Xrm2011.d.ts" />
on top of the file.

Advanced manual (if you don't have TypeScript installed):
1. Download & install the TypeScript plugin from here.
2. Optionally download  & install the Web Essentials 2012 extension for Visual Studio 2012 for improved code handling.
3. Proceed with the Simple Manual

Why should I use TypeScript instead plain JavaScript?
The simple answer is that it makes coding much easier and less error prone. Please look at the following examples:
Design time type information


IntelliSense code completion

Design time check


Comments?
If you see any errors or possibilities to improve the definition file, please write a comment.

5 comments:

  1. Nice simple into, thanks for sharing.

    ReplyDelete
  2. Very nice. This will be an integral part of getting more productivity out of javascript development in Dynamics CRM...

    Any chance you can get it up on codeplex?

    What do you think about being able to generate strongly typed objects by quering the rest API or perhaps the form defintion xml(using solution manager in the SDK)

    ReplyDelete
  3. There actually already is a project on codeplex. See the link at the top of the post.
    We were thinking (in my company) to create a strongly typed proxy class generator for javascript + typescript definitions. We might have a look at that when time allows.

    ReplyDelete
  4. I've got several errors when try to use with TypeScript v1.0 could you assist?

    ReplyDelete