Coding - Typescript

Summary

Using TypeScript and VS Code in my toolchain significantly boosts productivity and code safety.

Types in JavaScript

My first experience of static types in web development was in Elm. (If you are not familiar with Elm, it is a statically typed functional language which compiles to JavaScript.) I decided not to pursue Elm for web development but found the safety of coding with static typing attractive.

Flow & Babel

Fortunately, static typing can be added to JavaScript using Flow. The downside of flow is that your toolchain grows. You will be using Babel for ES6 so now you need the Babel flow plugins to allow Babel to handle the flow annotations. One of the big productivity boosts from using static typing is that it allows the editor to provide linting, intellisense, type tooltips, and click-to-definition. Flow extensions are available for common editors, including VS Code.

Eliminating Dependencies

All these tools extensions and plugins require effort to install, configure and learn. They need to be installed and configured on every system you use for development. All of the tools introduce their own dependencies and soon your node_modules contains hundreds of extra modules. All of these need to be updated and when you update you may run into dependency conflicts which take time and effort to resolve. All this work on the toolchain reduces the developer's productivity.

I believe that dependencies are a drag on productivity and work to keep them at a minimum. Of course, you cannot write every line of code you use but before adding any dependency to my projects I consider carefully whether they are necessary and if there are options to avoid including them. This includes toolchain dependencies and Flow and Babel add significantly to the list of dependencies which must be managed.

TypeScript & VS Code

Although Flow and Babel are excellent tools Typescript removes them and all their plugins. Typescript compiles directly to ES5 so there is no need for Babel. And Typescript is statically typed so there is no need for Flow and the Flow-Babel plugins. VS Code works directly with Typescript without extensions (VS Code and TypeScript are both developed and maintained by Microsoft).

Coding Typescript in VS Code is a great developer experience. You get intellisense and code completion. Because Typescript is statically typed VS Code can highlight errors as you type, which dramatically improved productivity and reduces the chance of shipping bad code. If you add a parameter to a function definition you are immediately altered to the inconsistency of the definition and all the locations the function is used with the wrong parameters.

TypeScript also has great type inference which means it does not need to be a drag on productive coding. There is no need to declare every type – TypeScript will infer types from how you use them. You can just use plain JavaScript so the learning curve is not steep.

Sometimes it is necessary to code in plain JavaScript and when I do, I always miss the safety and features of TypeScript.

Other Tech Notes

coming soon

WebPageTest

Diagnosing and fixing performance issues

coming soon

Lighthouse Auditing

Measuring Website Performance

new

Why Typescript?

How Typescript improves code quality and productivity

new

Cleaning Outdated Content from Google

Why it is sometimes hard to remove results from Google's index