Migrating to the latest TypeScript release

In the beginning of my career (2015), I created a Visual Studio Code extension that I spoke about here and kind of just left it alone. Surprisingly, it was my first TypeScript project and now that I am deeper in the TypeScript world, I decided to update it since it’s been 4 YEARS!

First thing to note, my project was running and compiling with TypeScript version 1.6.2. Like any other “normal” person, I decided to do a web search hoping someone had written a blog post or some sort of docs existed. Unfortunately, I found nothing so I decided to have everything break and then go from there.

Initial Steps:

  1. I ran npm i in the command line, to reinstall my node_modules folder based on my dependencies listed in my package.json file
  2. I saw that my TypeScript node module did not automatically install the latest version, so I ran npm install --save-dev typescript@3.6
    • This command will put the typescript module in my devDependencies section of my package.json and 3.5 is the TypeScript version number I want to install

From there I had hoped to find some more guidance on the internet and found the Extension API docs where I was able to find an updated sample. First instinct was to compare package.json files!

First I changed my vscode engine property:

Before

"engines": {
	"vscode": "^0.10.1"
}

After

"engines": {
	"vscode": "^1.34.0"
}

Compiling after this small change got me an error message that provided a link to properly create a VS Code extension and it had some migrating details. But do note the post was outdated and only showed to get up to speed on TS 2.0.3. Because it was the most detailed I decided to follow it and change values to those that corresponded with TS 3.6. The following changes were made

File: package.json

Before

"scripts": {
        "vscode:prepublish": "node ./node_modules/vscode/bin/compile",
	"compile": "node ./node_modules/vscode/bin/compile -watch -p ./",
	"pretest": "tsc",
	"test": "mocha --ui tdd ./out/test/extension.test.js"
}

After

"scripts": {
	"vscode:prepublish": "tsc -p ./",
	"compile": "tsc -p ./",
	"pretest": "tsc",
	"test": "mocha --ui tdd ./out/test/extension.test.js"
}

File: tsconfig.json

Before

{
   "compilerOptions": {
	"module": "commonjs",
	"target": "ES5",
	"outDir": "out",
	"noLib": true,
	"sourceMap": true
   },
   "exclude": [
	"node_modules"
   ]
}

After

{			 
   "compilerOptions": {
	"module": "commonjs",
	"target": "esnext",
	"outDir": "out",
	"sourceMap": true,
   },
   "exclude": [
	"node_modules",
	".vscode-test"
   ]
}

I changed target from ‘ES5’ to ‘esnext’ so that the compiler always uses the ECMAScript target version with the latest supported ES proposed features. I removed the noLib tag because I felt as though future iterations of the extension may need to use lib.d.ts (which you can read about here).

After making these changes, I compiled once again and got some strange errors:

I realized I still had a typings folder but this was no longer needed since @types became a thing. I removed the ‘typings’ folder and ran npm install --save @types/node to import the node typings that would be needed. After this, the project compiled and ran perfectly!

To completely finish my update I :

  1. Updated some of my code syntax to reflect that the project is TypeScript rather than plain JavaScript. (I used the TypeScript Handbook as a reference)
  2. I switched my testing module from Mocha to Jest, using this following this migration guide. I switched over to Jest for personal reasons. I have become more familiar with Jest overtime as many of my other TS projects used Jest for testing ( based on team/client choices)

If you want to compare and contrast: here is a link to my extension before the update and link to my extension after the update

Advertisements

Published by Gabrielle

The Unexpected Nerd | Software Engineer | Gamer | Sneaker Enthusiast | Alpha Woman💗💚

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: