Improving the ElePass Extension, Part 2 – Switching to TypeScript

June 8, 2018 0

This week we are going to take a look at switching the ElePass browser extension code base from standard JS to TypeScript and what that initially looks like. If you are joining us for the first time, we encourage you to read out Part 1 – Introduction to learn more about the extension and what are goals are for this series.

What is TypeScript?

TypeScript (TS) is an extension of JavaScript (JS) that must be compiled into JavaScript before being accessed through a browser. TypeScript is a statically typed language that enables best practices and reduces uncertainty in JavaScript code. TypeScript is most commonly used by developers who prefer a typed language, like C#, since the typed mindset comes more natural and is used more often than a dynamic language, like PHP.

Since TypeScript is an extension of JavaScript, we keep the foundation of JavaScript and don’t have to wait for TypeScript to “catch up” to future builds, like the latest EMCAScript. This also allows us to onboard existing JS developers and slowly port over JS code to our new TS code base. It’s a win for everybody!

Why use TypeScript?

Since JavaScript is naturally dynamic, we risk introducing new bugs without being aware. If we rely on an object to have an “id” child, but that child no longer exists, then we will start to see errors and our project will stop working. With TypeScript, we are able to type objects like this and ensure that there is always an “id” child being passed in the object – this will also inform our other developers that this object has an “id” child.

TypeScript also promotes long term maintenance that can help lessen the need for tedious documentation. The code is more naturally readable, since you need to declare your variables more precisely, and it just looks more readable in the long term. Our functions will have declarations of string value requirements and our IDE will typically tell us of this type requirement.

There is also a great blog post on this to help you out if you are curious on switching to TypeScript in the future.

Why is ElePass switching to TypeScript?

A few months ago, I was reading a few blog posts on TypeScript and if this was a road I wanted to travel on. Since we use .NET Core 2.1 with ElePass, it just felt natural for us to continue using a statically typed language in our frontend components. I was reading a great blog post about Slack’s transition to TypeScript and I felt inspired. I kept digging around and found that Asana made the switch as well, several years ago. We knew it was time to make the transition ourselves – starting without browser extensions.

Our browser extension is lightweight, compared to our web app, so it would be the easiest to convert and get our hands into TypeScript. We have only made the initial transition, but TypeScript has already helped us find several bugs and enforces us to type out everything and feel more confident in our code. For us, TypeScript allows us to maintain a very technical solution in a small team environment. It helps us feel more confident in our code, helps us identify issues early, and it helps us work faster and smarter with the IDE integration that VS Code naturally provides with TypeScript.

Time for the code!

Let’s take a look at some of the code we needed to add to start the TypeScript transition, what files we needed to modify, and how we changed our build process to fit the TypeScript mold. As we mentioned above, this code is part of the initial implementation of TypeScript and we are not strictly enforcing TypeScript checking just yet. We will cover more of these changes in future blog posts as we also make change to the core of our code base, like the Vuex modifications and the VueRouter implementation.

What We Changed

The first big change was changing our base “app.js” file to an “app.ts” file. This also required changing a few of the child JS files over to TS. Our file was very simple and didn’t require any drastic changes worth noting here. Next, we changed our “App.vue” file to support TypeScript by changing the script tag to “<script lang=”ts”>”. Our code here was pretty simple as well and didn’t require any modifications.

What We Added

In order for our project to build, we needed to add a shim file to type some of the common uses in our Vue project.

Next, we added a tsconfig.json file at the base of our project directory. Some of our strict checking is commented out while we are going through the initial process.

How our build changed

Since we use Laravel Mix to compile all of our code, it was an incredibly easy switch for us. Instead of “mix.js” we now call “mix.ts” and it’s all wrapped up! We did need to change the “ts-loader” project and downgrade its version, since Laravel Mix isn’t using Webpack 4 as of the last update to this blog post. That was a simple “ts-loader”: “^3.5.0” change to the package.json file.

What’s Next?

In our next blog post, we are going to take a look at implementing VueRouter for extensions and change our paging flow.

ElePass is an agency password management solution built with the purpose of enhancing the security within agencies and other businesses who work with clients on a regular basis. If you would like to try out ElePass and see our browser extensions in use, we have a FREE 14-day trial available to explore the full feature set of ElePass. Once your trial is finished, you can continue using ElePass as a single user as part of our no cost freelancer plan.