Type safe JavaScript using TypeScript

Jared Mills
Sep 6, 2018 · 5 min read

One of my developer friends recently asked me if I had ever worked with a type safe language. As someone relatively new to coding, I’ve thus far only leaned Ruby and JavaScript. My answer was, more or less, “what is type safety?” Obviously, the answer was no and it was time to do a bit of Googling.

After some quick searching, I learned that type safety is a feature of certain programming languages, such as Java and C#, that prevents type errors. Type errors are, according to Wikipedia, “erroneous or undesirable program behaviour caused by a discrepancy between differing data types for the program’s constants, variables, and methods (functions).”

What this means is that type safe languages prevent data types from being changed once they have been declared. Variables, functions, etc must declare their data types at the time of definition. For example, if you have a variable named “person” that, upon declaration, you decide is going to be a string, that variable cannot ever then be assigned to the value of an integer, float, array, etc. It will always have to be a string, or the program won’t even compile. This is considered to be very useful in preventing bugs at runtime.

JavaScript, obviously, is not a type safe language. Take the code below as an example:

JavaScript is definitely not type safe

Here, I am assigning a variable to the value of a string and then re-assigning it to the value of a number, array, and boolean and JavaScript just rolls with it.

Many developers prefer type safety because their programs simply won’t compile if there is an error with a data type. This helps prevent buggy code from making its way into production. With a non-type safe language like JavaScript, however, how can we prevent these types of bugs?

Enter TypeScript.

TypeScript is an open-source superset of JavaScript, developed by Microsoft, that enforces type safety and compiles down to regular old JavaScript.

Getting started with TypeScript is simple and easy. The documentation even has a five-minute tutorial to get you started. First, install TypeScript with the following command in terminal:

Then, to get going, create a new file with a .ts extension. Write some TypeScript code (make sure it’s type safe) and run the following command in terminal:

Running this command will create a new file of the same name with a .js file extension, allowing you to use that file as a source for a script tag in your HTML file.

Vanilla JavaScript vs. TypeScript

In vanilla JavaScript, the following code would be perfectly valid:

This works, but if somewhere down the line, the program is expecting a string and it receives an integer, this will cause an error.

Let’s take a look at how we could handle this in TypeScript and the error it will throw when the code is not typesafe.

Here’s an example of working TypeScript code. We’re giving the variable “person” a string type annotation. Type annotations, according to the documentation, “are lightweight ways to record the intended contract of the function or variable.” When the function is called with the variable “person”, which is set to the value of a string, the program will work as expected and the function greetUser will return the proper greeting.

However, after initially defining the data type of “person” in the greetUser function as a string, if we were to later try to call that function with a variable of a different data type, the program will not compile and will throw an error. Here’s an example:

And here’s the error that it will throw:

Furthermore, if we were to call greetPerson with, no arguments, TypeScript will throw another error:

In vanilla JavaScript, inside of the greetUser function, the variable “person” would have been “undefined”, but with TypeScript, it won’t even compile.

While there are some other examples of what TypeScript can do, this was merely meant to be an introduction and an excuse for this coding newbie to learn a bit more about type safety, a topic that I haven’t really come across yet in my coding journey.

Conclusion

Most articles that I’ve read about TypeScript suggest that it’s not really worth using unless you’re dealing with a very large codebase. For smaller applications, it’s probably not necessary. But one analysis that I read suggested that using TypeScript can result in “a 15% reduction in bugs making it all the way through your development pipeline.” Sure, it’s a bit more typing, but if that many bugs can be prevented before they even pop up, especially in an enormous code base, that extra typing just might be worth it.

Sources:

https://en.wikipedia.org/wiki/Type_safety

https://en.wikipedia.org/wiki/TypeScript

https://blog.acolyer.org/2017/09/19/to-type-or-not-to-type-quantifying-detectable-bugs-in-javascript/

Jared Mills

Written by

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade