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.

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:

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.

Advertisement