Typify your HTML webresources in Dynamics CRM using TypeScript

Does the word TypeScript sound familiar to you. Hear it buzzing around you and thinking as a dynamics consultant how and when can I use it, then this post for you.

People already expert in typescript, I would rather suggest stop immediately and close this post and move on to something else as this is going to be very basic stuff here and you may feel disasspointed. However I don’t mind if you read till the end.

So let’s get to business. Let me be honest here. I am not a typescript expert. But I have been working my way through developing client side libraries for my client using typescript and gosh! I like it like anything. My intention is not to teach TypeScript here, but to introduce you the flavour of it. I am pretty sure once you finish this post, you will be itching to develop something in TypeScript the next time you get a chance to play with HTML webresource in your CRM implementation.

So what is TypeScript? From the definition in http://www.typescriptlang.org/ –

“TypeScript lets you write JavaScript the way you really want to.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.”

Pretty explanative I think. So let’s just to a quick demo.

First of all you would need to create a typescript file. If you are using VS2012 or VS2013 version, just navigate to http://www.typescriptlang.org and go to the downloads section and download the installers for VS2012/ VS2013 depending on which version you are.

After you do that, when you open Visual Studio, go to File –> New File –> Scripts-> TypeScript File.

In the opened file, paste the following code.

class SecurityRole {
    Name: string;
    RoleId: string;
    BuId: string;

    constructor(id: string, name: string, bu: string) {
        this.Name = name;
        this.RoleId = id;
        this.BuId = bu;
    }   
}

enum UserType { InternalUser = 1, ExternalUser };

class User {
    FirstName: string;
    LastName: string;
    UserId: string;
    Roles: SecurityRole[];
    UserType: UserType;

    constructor(id:string, fName:string, lName:string, uType: UserType) {
        this.UserId = id;
        this.FirstName = fName;
        this.LastName = lName;
        this.Roles = [];
        this.UserType = uType;
    }

    getRoles(): SecurityRole[]{

        return this.Roles;
    }
}

var role1 = new SecurityRole("Role1", "<role guid>", "<bu Guid>");
var role2 = new SecurityRole("Role2", "<role guid>", "<bu Guid>");

var user = new User("<userid>", "Debajit", "Dutta", UserType.ExternalUser);
user.Roles.push(role1);
user.Roles.push(role2);

I have created two classes here – User and SecurityRole

Can you notice the difference here. Does not it look like coming straight out of C# somewhere. OK the variable declaration is bit awkward. But it’s very easy. For e.g – to declare a string in C# you would write something like this.

string firstName = “Debajit”;

In Typescript the variable type comes just after the variable name instead of before unlike C#

So in type script it would  var firstName: string = “Debajit”;

Don’t you agree it’s much more structured and typed. And also it is type safe. So when you compile this to a .js file, if you assign a number to the firstName variable which is of type string, it would throw an error. We would come to that in  a moment.

So you have the full power of constructors here to declare a new instance of the class. Similarly you have interfaces, inheritance, modularity, static variables, private modifiers and what not. Can you imagine all this in you javascript code in such structured manner?

Also did you notice the enum type and how I have used it.

enum UserType { InternalUser = 1, ExternalUser };

var user = new User("<userid>", "Debajit", "Dutta", UserType.ExternalUser);

Yes you have the Enums also here and to get the text of the enum you would just need something like this – UserType[1]. This would give you the text of the enum.

Liking it so far. Let’s see how you can transform this to .js file.

• Open Visual Studio Command Prompt

• Go to the Path where your TypeScript file is located. Mine is located @ C:\Debajit\Personal\My Projects\TypeScript.
• Type tsc and then the name of the file. For e.g my filename is User.ts. To compile this to .js file
  I need to type tsc User.ts

• If there is no error, the .js file with the same name would be generated.

The following is the code generated in javascript. I leave it to you to decide as a programmer which one you would use.

var SecurityRole = (function () {
    function SecurityRole(id, name, bu) {
        this.Name = name;
        this.RoleId = id;
        this.BuId = bu;
    }
    return SecurityRole;
})();

var UserType;
(function (UserType) {
    UserType[UserType["InternalUser"] = 1] = "InternalUser";
    UserType[UserType["ExternalUser"] = 2] = "ExternalUser";
})(UserType || (UserType = {}));
;

var User = (function () {
    function User(id, fName, lName, uType) {
        this.UserId = id;
        this.FirstName = fName;
        this.LastName = lName;
        this.Roles = [];
        this.UserType = uType;
    }
    User.prototype.getRoles = function () {
        return this.Roles;
    };
    return User;
})();

var role1 = new SecurityRole("Role1", "<role guid>", "<bu Guid>");
var role2 = new SecurityRole("Role2", "<role guid>", "<bu Guid>");

var user = new User("<userid>", "Debajit", "Dutta", 2 /* ExternalUser */);
user.Roles.push(role1);
user.Roles.push(role2);

Now let us assign a number to a string variable and then try to compile the same. Say For e.g  user.FirstName = 2;

How great isn’t it. C# like features in Javascript.

To learn more about it, read the full documentation about it from http://www.typescriptlang.org. I am still doing that

And do send any more useful materials on this and anything. As much I love sharing knowledge, I like to learn more from others.

Hope this helps!