TypeScript is a support language or superset of JavaScript - meaning it goes on top of regular JavaScript. TypeScript works as guardrails for our code - helping reduce our mistakes through Type checking - allowing only specified arguments or props to pass through our functions. Through its type-checking ability, you can think of TypeScript as a kind of fancy linter of sorts.
TypeScript is a language that has become increasingly popular and rightfully so, it’s incredibly useful. In the recent Stacked Overflow Developer Survey, TypeScript came in as the 4th most popular programming language in 2022. TypeScript was released in 2012 but started gaining huge momentum in 2019 when it was listed as the 12th most popular programming language.
TypeScript makes error handling and debugging way more straightforward. Its primary goal is to add Types to JavaScript. It checks our code at compile time vs. run time. Meaning, that before our code runs it has to prove to TypeScript that our types match before it will compile.
TypeScript has a form of autocomplete that infers what types you want to pass into your functions. It also includes a tooltip that can show you what types are available to a specified constant. This helps developers to reinforce good behaviors, leave more intent in their code and eventually, become better programmers.
This tutorial shows a carousel of images that when hovered over, display a small description of the image, and a location where it was taken. If you would like to follow along, you can clone down the code from our repo.
In our code base, we can see a few interfaces that are declaring “desc” and “location” key/value types. These are extended into another interface “LocationDesc” that holds both of those individual interfaces. We are treating each image as an object and using “LocationDesc” as the return type for each. Meaning, that each image object should return two keys, “location” and “desc” and their types should ONLY return strings. We can test that by changing one of the object values to something other than a string.
Changing the type from a string to a number throws an error with TypeScript.
Here we change our object River’s location value to be 1 instead of its intended value. You can see red squiggle lines below our “location” key. When hovering over that underlined code TypeScript provides us its tooltip. The tooltip feature in TypeScript is extremely helpful with debugging and syntax errors in your JavaScript code. It tells us “Type Number is not assignable to String” which is TypeScript telling us we are using the wrong type of value here.
The final line of the tooltip is often the most descriptive with where your error is occurring and why. We can fix this by adding an OR type to our Location interface. Allowing our interface to accept both String or a Number types no longer throws that type error.
Making our value type something other than an Everyday Type throws an error with TypeScript and doesn’t allow our image to render
What would happen if we tried to use an unexpected type? Here we try to change our value from a String to yo. Changing the type of value from a string to yo threw an error with our project - no longer allowing that image to render on our page. This is TypeScript is informing us that yo is not an acceptable type based on our types and interfaces. Rather. If we entered another “Everyday Type” that wasn’t declared in our interface such as a boolean or an array, we would return null.
Our Type Guard, locationF() checking if our return types and renders different branches for each case
A better way to solve the issue of unexpected types is with a Type Guard. A Type Guard is a function with a conditional (in this case, an if statement) that tries to narrow down our types to something more specific. In this case, If the type of x.location is a string, it will return the value of x.location. If the type of x.location is anything other than a string(in our case, a number), the function will return “Location Unknown” in our location section.
Type Guards connect build time validation with runtime behavior. Using the typeof operator will create two distinct pathways that never render at the same time. It also ensures that we cannot render a different type of value for location other than a string.
These are just some of the convenient features that TypeScript offers. If you would like to learn more about TypeScript, you can read their docs here. If you would like to play around with our demo, you can find the repo here. The fundamentals course on Frontend Masters is another great resource to learn more about TypeScript. Good luck learning!
If you are a business who needs help with building applications using TypeScript, we invite you to explore our development services.
