For those not familiar with TypeScript, it can be a little daunting to start using it with a Dynamics 365 environment. As with most things, there are many ways to approach this task. This tutorial walks through one approach that is easy to start with and that integrates with XrmToolkit seamlessly.
If you are converting your JavaScript files to TypeScript, the process is very straight forward. Simply add a new TypeScript file to the folder where the existing file is placed. Then copy all of the contents of the JavaScript file to the TypeScript file. Once you are familiar with TypeScript, you may want to adjust some of the code, but since TypeScript is a superset of JavaScript, all JavaScript is considered valid TypeScript.
Let's say that you have a JavaScript file called 'AccountForm.js'. Below is an example of what your folder might look like after adding the TypeScript file:
Once the code has been pasted into the TypeScript file, you can 'Build' the project and the TypeScript code will be transpiled into the JavaScript file:
Notice the '//# sourceMapping...' at the end of the file. This means that Visual Studio generated this from the TypeScript code.
You can now link the file so that it can be uploaded to D365 by right-clicking on the file and using the "Add 'AccountForm.ts' File to CRM". Note that you are linking the TypeScript file and not the JavaScript file. If the JavaScript file is already linked, please delete the link using the "Remove Link to CRM" menu item.
Once the window opens, select the option to link the file to an "Existing Item" (assuming that this is an already existing D365 asset).
Select the file that you would like to link to and set any other actions as you deem appropriate.
You will notice that XrmToolkit recognizes that the output will be a JavaScript file based on the 'Name' and the 'Gulp Output File' under the 'Gulp Settings' tab.
Regardless of whether you use Gulp (or some other post processor), XrmToolkit will use the 'Gulp Output File' as the source of the content to push to D365.
Once the file has been linked, you can publish the file content to D365 in the usual manner.
Having to 'Build' the project everytime before publishing a TypeScript file is quite cumbersome. Luckily, there are ways to avoid this. You can simply turn on the option to 'Compile on Save' in the project properties of the 'TypeScript Build' tab:
As your project becomes more sophisticated, you may want to combine files, minify them, or have the JavaScript output placed in a different location. These type of processes are often handled by 'Gulp' or other post processors. XrmToolkit can work with Gulp functions in the project such that it will run the specified Gulp process before pushing the JavaScript file contents to D365. For more information see the documentation here: Using Gulp
