TypeScript in Dynamic CRM CE

JavaScript sometimes make 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 error. Therefore TypeScript will help you so much because its strictness.

On this blog post I will show you how to setup and do the coding using TypeScript. All the requirement tools that you need to install:

1. vscode
2. npm

After install npm, then you need to install 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.

For setup your folder as a TypeScript environment, you need to open 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 result 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 new folder called .vscode and one tasks.json. On tasks.json this is 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 already usable. Next for testing purpose 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 ass the event method.