Develop Dynamics Scripts in TypeScript – Quick and Easy | Capsule Series
The official client-side API reference for Dynamics is targeted at JavaScript (JS). Taking a quick peek at client-side programming’s history, we’ll notice so many attempts at working around JS’ tiresome limitations. One such attempt was Microsoft’s TypeScript. In this article, I will guide you through the easy steps of how to develop Dynamics scripts in TypeScript (TS), quickly and easily.
Why TypeScript?
JS has seen so much improvement over the past decade, with releases adding so many features. However, JS is built as a dynamic language; I dare to say ‘too dynamic’. TS is simply JS with type-checking, which restricts this ‘dynamic’ mess to a degree. In addition, TS appeals to those developers that lean towards a C-like style of programming.
Angular developers won’t face any issues making the move, as Angular is tied nicely with TS. That being said, regardless of the background, TS is so easy to understand. Moreover, JS code runs inside TS just fine, which makes for a seamless incremental transition.
Finally, and more importantly, TS ‘typing’ nature makes autocomplete in IDEs so great that you will wonder how you never used it before.
Basic Setup
Enable TS
To enable TS ‘compiling’ (transpiling to be exact), we need to install a NuGet package first, namely Microsoft.TypeScript.MSBuild.
After installation, create a tsconfig.json in the project’s root. Below is an example of a most basic configuration. It produces the JS file in the same folder as the TS one on save.
{
"compileOnSave": true,
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": true,
"sourceMap": false,
"target": "ES2016"
},
"include": [
"**/*"
],
"exclude": [
"node_modules",
"wwwroot"
]
}
Enable Autocomplete for Dynamics Code
To get that extra sweetness of TS, we have to install one more NuGet package. There are multiple routes (and tools) to take here, but I prefer XrmDefinitelyTyped, as it doesn’t require extra files to upload to the server. Install the Delegate.XrmDefinitelyTyped package and let’s proceed to configure it.
After installation, an XrmDefinitelyTyped folder will be added to the project. Open the XrmDefinitelyTyped.exe.config file to edit. The following is an example configuration that worked for me:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<appSettings>
<add key="url" value="https://<org>.crm.dynamics.com/XRMServices/2011/Organization.svc" />
<add key="out" value="../Xrm/typings" />
<add key="entities" value="account" />
<add key="web" value="" />
<add key="skipInactiveForms" value="true" />
<add key="oneFile" value="true" />
<add key="jslib" value="../Xrm/lib" />
<add key="method" value="ClientSecret" />
<add key="mfaAppId" value="<application-id>" />
<add key="mfaClientSecret" value="<client-secret>" />
</appSettings>
</configuration>
Run the XrmDefinitelyTyped.exe file to generate the typings. After the generation has finished, include the Xrm folder in the project; you should be able to get autocomplete for the entities listed in the configuration.
Please refer to their Wiki for more details: reference.
Sample TS Code
namespace DG.Contact {
var Form: Form.contact.Main.Information;
export function onLoad(executionContext: Xrm.ExecutionContext<any,any>) {
Form = <Form.contact.Main.Information> executionContext.getFormContext();
// Code here..
}
}
Conclusion
Migrating client-side development from JS to TS provides many benefits. The move itself is easy and doesn’t take any effort. Take the leap and you won’t regret it.
