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

UXP Developer Tool
1

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?

4 Likes
2

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

1 Like
3

Thank you for the instructions.
I was scared to read seventy eight steps.

4

That’s what it says:

Seven-teo-eight

:joy:

5

Hi! Yes it’s meant to say 7 to 8 easy steps but with Typescript for me, it’s been fix one problem, then it finds another and then another and so on so I leave it. But I have some updates to this quote unquote guide. That is, with the great Adobe UXP Developer Tool there is now a Package command:

image
image1374Ă—728 22.3 KB

So I recommend moving all the code that will be packaged into an xdx into a source directory (- this project is not using typescript yet):

image
image588Ă—846 34 KB