How to use Typescript in your UXP plugin in 78 easy steps!

To use Typescript in your project follow these easy few steps.
(5 minutes)

Note: This is not replacement for a course on Typescript.

  1. Download vscode
  2. Download and install nodejs
  3. Open VSCode and then open terminal in your project and then type:
    npm install -g typescript
  4. Create a typescript config file using terminal with:
    tsc --init and accept the defaults
  5. Rename your main.js file to main.ts.
  6. To compile your typescript into JavaScript open vscode terminal and type
    tsc main.ts. It will compile main.ts to main.js

From now on work on main.ts and get the benefits of Typescript.

You can setup automatic compilation by doing the following:

  1. After the previous steps, create a tasks.json file in the vscode directory with the following:
{
 "version": "2.0.0",
 "tasks": [
    {
        "type": "typescript",
        "tsconfig": "tsconfig.json",
        "option": "watch",
        "presentation": {
            "echo": true,
            "reveal": "silent",
            "focus": false,
            "panel": "shared"
        },
        "isBackground": true,
        "runOptions": {"runOn": "folderOpen"},
        "problemMatcher": [
            "$tsc-watch"
        ],
        "group": {
            "kind": "build",
            "isDefault": true
        }
    }
 ]
}

To test if it’s working make a change in the main.ts file and save. If it does not create an updated main.js you may need to enable automatic tasks.

To enable automatica tasks in folder:

  1. Open the vscode command palette, CTRL+SHIFT+P and find Tasks: Manage Automatic Tasks in Folder.
  2. Choose “Allow Automatic Tasks in folder” on main project folder. Make a change in the main.ts and save again.

Now, any time you save in vscode the typescript is cross compiled to JS and if you are using UDT with the watch setting, your plugin will automatically reload.

If you don’t want to create a tasks file you can manually enable automatic compilation by entering the following in the vscode terminal window:

tsc *.ts --watch

A few Typescript options you may want:

{
	"compilerOptions": {
		 "target": "ES6",                          /* Specify ECMAScript target version */
		"esModuleInterop": true             /* enables commonJS and ES modules */
	}
}

@kerrishotts Do you know what version would someone target for the current version of UXP?

2 Likes

I only count 8 steps here, so I assume your title should read “7 to 8 easy steps” :wink:

1 Like