D365 TypeScript Web Resources - Part 1 - Basics

D365 TypeScript
, , ,

Developing JavaScript Web Resources with TypeScript

In this series (my first) of posts i’ll share my experiences when authoring and maintaining JavaScript Web Resources with TypeScript. The series will cover the basics and then more advanced options including ES Modules, webpack, babel, unit testing, deployment, etc.

Anyway! Let get started!

Why did I choose TypeScript

So the why is potentially quite subjective and we all have our own opinions, this is mine and I don’t expect you to agree but hopefully it will help you form your own opinion and maybe win you over to the idea…

Firstly the obvious, TypeScript is essentially JavaScript with the addition of being able to (optionally) apply static types to your objects. This allows for more readable, cleaner, and more maintainable code. It also helps identify errors sooner, fits the mindset of C# developers, and has some great tooling to support the end to end development life cycle.

Then we have the endless options and tools for compiling/transpiling. For example, defining the browser(s) you wish to support so you have to worry less about the target browser(s) while writing your code. Also, using tools such a webpack to bundle you code into single files and compressing the output for better performance.

Finally we have unit testing and debugging where you can debug the TypeScript directly via source maps.

Personally, I will never go back to writing raw JavaScript unless it’s the only option!

A Basic Setup

Ok, So lets take a look at what we need for the basic setup when working with D365 Web Resources.
Note: I’ll be using Visual Studio Code as my preferred IDE. However, all of this can be done in other IDE’s and terminals etc.

Node and NPM

If you don’t have it installed already go and grab the latest version of Node

Init

Initialise a workspace/project.

  • Lets create a directory for our project and change to that directory (via Terminal)
1
2
md c:\d365ts-pt1
cd c:\d365ts-pt1
  • Open the project directory with VS Code (via Terminal)
1
code .
  • Init a new project (just go with all the defaults) (via Terminal)
1
npm init
  • install the TypeScript module (via Terminal)
1
npm install TypeScript --save-dev
  • create directories for the source code and the transpiled output (via Terminal)
1
2
md src
md dist

TypeScript config

  • create a TypeScript configuration tsconfig.json in the root of the workspace…
1
2
3
4
5
6
7
8
9
10
11
12
{
  "compilerOptions": {
    "module": "ES6",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "outDir": "dist",
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts", "dist"]
}

Full details on TypeScript configuration can be found here

Our first TS file

  • create a new TS file in the source directory. We’ll create the file contact-main-form.ts for the purpose of the demo paste the below into the file and save.
1
2
3
4
5
6
7
8
9
10
class ContactMainForm {
  static OnLoad(executionContext: any) {
    const formContext = executionContext.getFormContext();
    formContext.ui.setFormNotification(
      "TypeScript locked and loaded!",
      "INFO",
      "ts-msg"
    );
  }
}

A basic onload event that should add a notification to the form once it’s loaded

  • compile/transpile the source (via Terminal)
1
tsc

You should now see your new transpiled .js and .js.map (source map) files in the dist directory…

You can now update the .js file and wire it up to the Onload event like so…

Then when opening or creating a contact via the main contact form you’ll see our form notification :-)

That’s all folks!

You can download a copy of the source code for this blog post here

Coming up in the series

In the next part of the series we’ll look at type declarations including XrmDefinitelyTyped. Until then feel free to comment below. All feedback is greatly appreciated.

In the future I’ll also be covering the following within this series:

  • Type declarations
  • Debugging and Source maps
  • ES6 Modules
  • Babel and Webpack
  • Unit Testing
  • Automated Deployment
  • Lint rules for deprecated client API
  • and more
    So keep checking back for updates

Thanks for reading.
Ollie