TypeScript

7.22.22

This blog post has felt inevitable for a while now. If you are even loosely tapped into the developer community, there is no doubt that you have heard about TypeScript. I have been hearing the murmurs for a few years now, seemingly ever since I started learning about React. Over the last few years, it feels like those murmurs have turned into a roar.

When I first decided to make the jump to take programming seriously, JavaScript seemed to have a lot of haters despite its growing popularity. After all, it is a weakly typed programming language. Without really knowing what that meant, I took the advice of my friend (turned mentor) and opted to make Python my primary tool to learn modern computer programming. After all, Python is not only a strongly typed language but a dynamically typed language as well. Sounds way better doesn’t it? The thing is, Python is a strong type language because of the interpreter, not the coder. The interpreter keeps track of all variable types. A Python program will use built in functions behind the scenes to test variable types and correct usage. The official python.org website even says ‘Python tries to stay out of your way while giving you all you need to implement strong type checking.’ That is also what makes Python a dynamically typed language. Python has relatively simple syntax compared to the the other strong type languages like C# and Java, which is definitely a reason to recommend it to new coders. Python syntax is simpler because C# and Java are statically typed languages. More on that in a bit. There are actually a few more reasons I still recommend Python to new/aspiring coders. Python sort of forces you to learn some DevOps along the way. If you are a Python dev, you will be working with virtual environments, probably some container management tools like Docker and Kubernetes. Python is also a backend language so it involves relational databases. Python is also extremely versatile and used not just as a backend for web tech but is also the leading language for data science technologies and even natural language processing.

We get it, Python rules but who can resist the allure of JavaScript and React. In fact, in my humble opinion, ignoring JavaScript and React today would be a huge misstep. Sometimes it feels like the entire internet was rebuilt using React. Plus with Node.js you can develop powerful backends to manage databases, build APIs, etc, making JavaScript a full-stack language. But this means using a weak type language. What makes JavaScript a weak typed language is that you do not have to specify variable type in advance. JavaScript code is compiled, usually in a browser, and can intermingle data types. This is what makes JavaScript code both flexible for many different kinds of applications but also vulnerable to errors and bugs because you often won’t notice the errors or bugs until the code is ran.

This is where TypeScript enters the conversation. TypeScript is not another coding language, it is a superset of JavaScript. What does that mean? Check out this image.


You can think of TypeScript as JavaScript +. All modern JavaScript actually works in a TypeScript file. That is pretty cool. Created by Microsoft and open-sourced in 2012, TypeScript was created to reduce unexpected behavior in JavaScript by statically and strongly defining types to clarify the structure of data. TypeScript makes JavaScript into a strong type language. Take that, JS haters.

I feel like this very simple TypeScript function demonstrates exactly what I am talking about.


We have a simple JavaScript function that takes in an argument, which is a name and then will simply say Hello to the name given to the function. Except we have a static type defining the name to be a string. Names are usually strings so that makes sense. But since the argument is typed to be a string, it can never be anything else. If you pass in a number, you get an error immediately. This is lovingly referred to as making TypeScript angry. TypeScript gets angry a lot and will throw red squiggly lines all over your code. This is how you catch those bugs and errors while you code instead of after you try to run the code.

The red squiggles aren’t the only way TypeScript will check your code for bugs and errors. TypeScript also involves a command line compiler. You run a simple command (tsc) on a TypeScript file in your terminal and it will either create a JavaScript version of your code or tell you what problems your TypeScript code has.

TypeScript actually has a ton of ways of catching these errors. Another way is through return types. TypeScript can infer return types, or you can have explicit return types and if you don’t want to return a type you can still annotate that by voiding the return type. Using the void keyword really makes TypeScript feel a lot closer to Java and the C languages.

Along with the primitive data types (number, string, boolean, null and undefined), TypeScript allows for custom types. Custom typing is probably where TypeScript can really become a super powerful tool. That allows developers the freedom to type anything. Union types are cool too. Union types allow you to specify data to be more than one type of data. That is a concept known as type narrowing. You can use conditional statements, known as type guards to make sure the wrong data type is not passed in or returned.

The last TypeScript concept I want to touch on is interfaces. A TypeScript interface is only used for typing objects. The same objects in Object Oriented Programming (OOP). An interface describes the shape of an object. They are used to provide information about object property names and the data types their values hold. An interface adds the functionality of strong type checking for functions, variables, or the class that is implementing the interface.

Ok cool, without getting too deep down the rabbit hole, I think that is an awesome intro to TypeScript. Now I have to go make all my React apps type safe...