TypeScript/Productivity

Increase Your Productivity With TypeScript

The best free thing that Microsoft has ever created

Initially, I was dismissive of TypeScript because I’m not experienced with strong-typed languages and I really try to avoid writing any more code than I have to. However, I found that writing a little more code up-front can pay big dividends later.

TypeScript wasn’t designed and created just to entice back-end developers onto the front end, but rather, to provide everyone with a tool that allows us to create robust code based on the lessons learned from other languages. One of the biggest advantages of TS is the tooling that you automatically get in your IDE. When you work with libraries or code that is strong-typed; your code is compiled and documented automatically so you rarely have to refer to online documentation. In addition, the compiler can catch bugs in advance.

Would you rather have “silly” errors during development or insanity-inducing errors in production? — Confucious-Bateman - Reddit

Another huge advantage of TS is that it is a super-set of JavaScript so there is virtually no learning curve if you are familiar with JS. Any valid JavaScript is valid TypeScript so you can learn it incrementally.

Try it out yourself

To get started with TypeScript the first thing you need to do is to install it globally.

npm install -g typescript

This will give you access to the “tsc” command which runs the TS compiler. By default; the TS code will be compiled into ES3.

In this gif, I have created an index.ts file and run the “tsc” command. The compiler creates an index.js file with the JS equivalent of what I wrote in TS. In this example, the two files are exactly the same.

The TypeScript compiler is very sophisticated and there are a ton of options that you pass to it to customize its behavior. You can pass these in the command line but the best way to do it is to create a tsconfig.json file. The configuration can sound daunting but there are only a few options that you really have to think about.

Example of a tsconfig.json file

The “target” is the flavor of JS that your TS will be compiled to. In the picture above you can see that I have chosen ES3. I have also set a “watch” option to true which will allow the compiler to automatically watch for changes and update the index.js every time you save. The target is important when it comes to things like DOM and async functions. In the next gif, you can see what happens when you compile an async function to ES3 which does not include async capability.

We can fix this by changing the target in tsconfig to the latest version with “esnext”. You can see here that the JS has been updated with async after the “target” was changed to “esnext”. You will also see the “lib” option which I will explain below.

Another important option is “lib”. It allows us to automatically include typings for certain environments such as the DOM or ES2020. This is where the incredible tooling of TypeScript becomes apparent. In the next gif I will bring the URL class into index.ts and you can see that I am getting autocomplete and intellisense from VSCode now that I have included “dom” in the “lib” option.

If we hover the class we get integrated documentation and any error message as to why this code won't run. So if you were building a web application you would want to include the DOM library which allows the compiler to compile your code with all of the native DOM classes without any compilation errors.

Personally, my TypeScript “aha” moment came when I encountered the easy-to-read error messages you get from the compiler. In another article, I will go into why these error messages are important and how to start writing beautiful typed code with TypeScript.