Programming
Why Typescript
Embracing the red squiggles
cover

Typescript is like a self-defined spell-checker, grammar suggester, and writing editor that proofreads your code while you program. But it's only ever as good as you configure and maintain it. And if misused, those red squiggles that notify you of errors might hurt (ie. annoy) more than help.

Type Safety

Typescript is a programming language based off of Javascript that provides static type safety. It is often described as a superset language of Javascript, since it can run anything that's written in Javascript, while providing additional Typescript-only functionality.

Simply put, in Typescript, a data's type is its shape or structure — that is, what properties and methods it is required to contain or optionally consist of.

typescript-utility-definitions

The Pitfalls of Javascript

Javascript, being a very lenient programming language, doesn't place heavy constraints on data types. Objects and functions can be defined with no structure at all. Properties can be attempted to be accessed, and the programmer won't know until build time that the property doesn't exist.

More notoriously, misusing data types can result in unintentional type coersion and yield unwanted effects: for example, when strings are added to numbers, Javascript automatically converts the number into a string and outputs the concatenated value. Although these techniques can sometimes be used strategically to create shortcuts, it more often than not creates bugs.

The benefits of Typescript

Typescript's rigid structure actually makes development far more enjoyable and reliable. Some of my favorite resulting features of Typescript include:

  1. When accessing data (like an object, array, or primitive), your code editor will remind you of what object properties and methods are available.

    typescript-object-properties
    typescript-array-methods
  2. If you try to access a non-existent object property, your code editor will let you know immediately.

    typescript-invalid-property
  3. When defining typed objects, your code editor will remind you of what properties are required.

    typescript-object-shape
  4. When using typed functions, your code editor will remind you of the necessary (or optional) function inputs and outputs.

    typescript-function-shape

This mostly means you won't have to waste time confirming if an object you're accessing has the properties you expect, or search for a function's definition to see what arguments it takes. Just type your objects and functions, begin coding, and the options will immediately display themselves. Accidentally try to access a non-existent property, and a red squiggle will let you know immediately, rather than your console yelling at your at build time.

With this cognitive load lifted, you'll have more time to focus on more pressing issues like systems design or UX.

Wrapping Up

Typescript is an incredibily powerful and robust tool for programmers who develop for the modern web.

And although Javascript's simplicity makes it an easy language to begin learning web development, programmers who are looking to upgrade their repertoire to build more robust, reliable, and advanced applications should undoubtedly look into learning Typescript and embrace the red squiggles.