TypeScript in Dynamics CRM CE

JavaScript sometimes makes me stress as a developer because of its dynamic nature. You can assign whatever value on the JavaScript object, change it into another type and it will not throw an error. Therefore TypeScript will help you so much because of its strictness.

In this blog post, I will show you how to set up and do the coding using TypeScript. All the required tools that you need to install:

  1. vscode
  2. npm

After install npm, then you need to install the typescript package. On your command prompt execute npm install -g typescript. Wait until finished and you’re good to go.

The first step to do is create a folder for saving all the files in it. Then you can open vscode and open that folder.

To set up your folder as a TypeScript environment, you need to open the command prompt in your folder. Then you can execute tsc –init. It will help you to make tsconfig.json (you can make this file manually also). Then for the setting on tsconfig.json, I will put this:

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",
    "outDir": "result",
    "strict": false,
    "esModuleInterop": false
  }
}

*The target information means that the TypeScript code we write will compile to es5. While the outDir means that all the results after compile will be put in that folder.

Then the next thing is setting the Tasks. On your vscode press Ctrl+Shift+B to setup your Tasks.

build tasks

When you choose the build. It will automatically create a new folder called .vscode and one tasks.json. On tasks.json these are the settings I use:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

With this one, your environment is ready. Next, for testing purposes, we need to create one ts file.

namespace Blog {
    export class Form {
        formOnLoad(crmContext) {
            console.log('Form On Load');
        }
    }
}

let blogForm = new Blog.Form();

To build this TypeScript, you only need to press Ctrl+Shift+B. Then check your result folder:

result

Then using this file, you can put this Javascript file into CRM and assign it to your form and events.

When want to call your event, use blogForm.formOnLoad as the event method.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.