“Keep your room clean everyday and I won’t have to keep making you clean it!” If you weren’t a perfect little angel who always kept your room clean, this was likely a familiar statement for you to hear from your mother. The concept is so simple, even for a child, but the practice is much more complicated. Most of the time you just didn’t want to take the extra time to keep your room clean and you would rather do pretty much ANYTHING else. But nevertheless, the few times you kept up your room and you got a compliment from your mom or dad or even a friend, you have to admit, it always felt great. And as time went by you got better and better at keeping things clean. Mission accomplished for your sweet mother. Now, if only I could have a mother to help keep my code clean!
For new JavaScript programmers like myself, keeping your code clean can be just as troublesome as keeping that room clean when you were a kid. Javascript is not a statically typed language which means the data types are evaluated at runtime. Because of this, JavaScript can get out of hand quickly if you are redefining variables throughout your code. You could accidentally redefine a string type to a number type, write more code, and then not run into a problem until you are trying to run the code later. There are few things more aggravating than coming across a bug that says “‘undefined’ is not a function”. This will make you ask yourself WHAT? WHERE? WHEN? but there will be no answer from dev tools or your terminal. Lucky for us, however, there is a superset of JavaScript called TypeScript that acts just like momma and helps you keep your code in order before it gets out of control.
Let’s look at an example:
Here in lies the issue. In just 10 lines of code we can see that the same variables have changed types 3 times! For the first example, x’s type is a number while y is ‘undefined’. Next, they are both redefined as string types. And then finally both become booleans. Wouldn’t it be nice if you could set the type and have a reminder tell you that you are making these potentially cataclysmic mistakes? That is where TypeScript (a.k.a coding mom) comes in to save the day.
In the example above, we have a standard function, hogwarts, that takes in the interface, “person”, and returns a welcome message with the full name. However, you can see that there is a warning on line 15! This warning, “He Who Should Not Be Named”, is given because its type is a string and not the appropriate interface defined on lines 5, 18–21. This is an example of how TypeScript can give you a little nudge in the right direction. Here you can easily see that something is wrong with what is being passed into the hogwarts function. If you weren’t thrown this error you could easily confuse the heck out of yourself later when you are trying to run your code and you have no idea you sent the wrong type to the hogwarts function.
Another cool helper that TypeScript provides for you is that it will compile the correct file for you into a js file. As I am sure you noticed in the example above, the file name was app.ts. With a simple command in the terminal:
tsc app.tsIn this instance TypeScript will create an app.js file that is correctly compiled to run in your code. Although this may seem like a small amount of help, this study composed by Zheng Gao at University College London shows that 15% of all JavaScript bugs can be detected by TypeScript.
I hope this intro to TypeScript helps give you that nudge to keep things clean like your mom used to give you. I sure appreciate all of my mom’s nudges over the years, and because it’s her birthday week, here is a picture of my super mom… Happy Birthday Momma! And don’t be too hard on me for grammar mistakes please. :)
