Beginning Dynamics CRM scripting using TypeScript

Hi guys,

The objective of this post is to show how you can better develop your client side JavaScript logic for Dynamics CRM leveraging Type Script. First let me clarify why this will be a boon to us Dynamics CRM developers:
1. Type Script comes with a whole set of reasons to be used to generate the actual JavaScript and this includes type checking, OOP facilitation to name the most important.
2. By adding the latest TypeScript XRM definition file you get IntelliSense support in Visual studio including on how to use your Xrm.Page methods and properties. This is extremely helpful as you would not need to remember anything (code snippets) and auto complete will guide to write the correct code the first time itself.

Here are a few useful links:

1. TypeScript language: http://www.typescriptlang.org/

2. Set up your TypeScript development environment in Visual Studio:

Configure TypeScript in Visual Studio 2012: https://www.microsoft.com/en-in/download/details.aspx?id=34790
Configure TypeScript in Visual Studio 2013: https://www.microsoft.com/en-us/download/details.aspx?id=48739
Configure TypeScript in Visual Studio 2015: https://www.microsoft.com/en-us/download/details.aspx?id=48593

Note: Visual Studio 2015 comes preloaded with TypeScript project templates.
TypeScript development is also supported in other IDEs, please refer to the appropriate section in the above link

3. Developing TypeScript using Visual Studio and syntax basics: http://developer.telerik.com/featured/typescript-with-visual-studio-2015/

You can start with the "Using TypeScript with Visual Studio 2015" sub section.

4. Add the latest Xrm TypeScript definition file to your project in Visual Studio:

Once you have the TypeScript project template you can follow the below steps to add the Xrm definition file to the project.
4.1. Expand the project tab and then right click the References tab then select "Manage NuGet Packages" as shown below



4.2. In the NuGet Package Manager window that opens type "xrm definitely typed" in the search box and select the version of the XRM definition file based on the SDK version you will be coding against as shown below

4.3. Select the version (ideally the latest stable release) and click on Install
                                                                                 

4.4. Select OK on the confirmation dialog that comes to make the required changes to the solution as below



4.5. You can see the TypeScript definition file added to your project as below


5. Now you can start writing your scripts in TypeScript in the app.ts file or any other TypeScript file that you may have added.

The below image shows how you can get IntelliSense support in Visual Studio for your scripts:


Here is a sample TypeScript snippet that I have written to get the value of a whole number field


The corresponding JavaScript file that gets generated with the JavaScript code can be found by clicking on the "Show All Files" button on the Solution Explorer as below:



The file will have the same name as the TypeScript file, in our case "app" and the extension will be ".js", since it is a pure JavaScript file. Here is the JavaScript equivalent code for the snippet presented in the previous snippets.


Note: I have set "Compile on save" option in the TypeScript build options for the project.So the JavaScript gets updated the moment I save the TypeScript file.

You can see these options by right clicking the project and then selecting properties


Then  go to "TypeScript Build" tab and you will see the options that you can set/unset based on your liking.