What Is TypeScript?

TypeScript is a programming language that’s a superset of JavaScript, which means it understands all of JavaScript’s syntax and capabilities, while adding additional features. 

TypeScript’s primary value over JavaScript is static typing. This means that type-checking happens at the time of code compilation. Type-checking is a programming language’s way of confirming that all operations have received the correct type of data to perform the operation. For example, a simple addition operation would expect at least two numbers. If one side of the addition operation is not a number, there might be type checking errors or unexpected behavior.

TypeScript was developed by Microsoft in 2012 and has gained traction among developers for its ability to spot code errors and bugs, enabling them to build better software applications.  

Related Reading From Julia ZolotarevCreate React App and TypeScript: A Quick How-To

How Does TypeScript Work?

Browsers and most other platforms like node that run JavaScript do not have native support for TypeScript. TypeScript comes with a compiler called tsc which will run TypeScript files, strip all the extras and convert them into JavaScript so that the browser (or whatever platform you’re using) will be able to run your code as if it was JavaScript. 

In order to set up tsc, you’ll need to have a tsconfig.json file at the root of your project. It will allow you to specify which version of JavaScript to use when converting your TypeScript files, as well as configure additional TypeScript settings. 

If you’d like to incorporate TypeScript’s type-checking features into an existing JavaScript project, the TypeScript docs have great suggestions for adding TypeScript features incrementally. The first thing you can do if you’re curious is add the comment // @ts-check to the top of your JavaScript file. This will allow your editor to use TypeScript’s language processing tools to show you any errors right in your code editor’s file. You might think you have perfect code but TypeScript often catches would-be bugs that a code review won’t. 

Why Use TypeScript?

TypeScript builds on JavaScript by adding static typing, helping developers write safer and more predictable code. It not only improves code quality by catching errors early on but also enhances the developing experience with better tooling, clearer intent and easier refactoring. Below are some of the key benefits that have made the language a fan favorite. 

Static Typing and Type Interface

TypeScript’s static typing allows developers to catch errors early on by either inferring or explicitly defining types. For example, in JavaScript, if you declare let iceCream = “Chocolate” and later reassign it to true, JavaScript won’t compile it, potentially leading to confusing or unintended behavior.  

TypeScript gives us two options for dealing with this problem. The first is to simply let TypeScript infer the type based on the usage. In the let iceCream = “chocolate” example, TypeScript will be able to infer the iceCream variable should be a string and will not allow assigning  a different type to it. The second way is to actually tell TypeScript what type the variable should be let iceCream: string = “chocolate”. We explicitly assign a type. In both cases, TypeScript will give us an error if we try to reassign this variable to anything but a string. 

We can even go so far as to constrict the type further: 

let iceCream: “chocolate” | “chocolateChipCookieDough” = “chocolate”

Now we’re telling TypeScript that we will only allow these two specific strings to be assigned to the ice cream variable. TypeScript allows us a lot of customization in the realm of types and this is just a fraction of what you can do. 

Early Error Detection

One of TypeScript’s biggest strengths is its ability to catch errors at the time the code is compiled but before it turns. This system can identify logic errors, invalid operations and improper usage of variables and functions that might not be found with the standard error detection. 

For example, the following JavaScript function works but it is unclear what type birthday is supposed to be. 

const wishHappyBirthday = (birthday) => {
    const today = new Date();
    if (today === birthday){
        console.log('Happy birthday!!');
    }
}

With TypeScript we can make the functions intent clear by specifying types. And if someone passes the wrong type, such as a string instead of a date, TypeScript will flag the error.

const wishHappyBirthday = (birthday: Date) => {
    const today = new Date();
    if (today === birthday){
        console.log('Happy birthday!!');
    }
}

Code Maintainability and Scalability

TypeScript encourages developers to write self-documenting and predictable code, which in turn improves readability from other developers working on the same code and eases collaboration amongst large teams. 

Additionally refactoring becomes safer and more efficient, since TypeScript can track changes to types across your project. For example if you rename a property or change a function signature, TypeScript will alert you of all the places that depend on it to avoid broken logic or runtime bugs.

More From Our JavaScript Experts8 Common JavaScript Data Structures

TypeScript vs. JavaScript?

TypeScript is like a fairy godmother, protecting you, the developer, from running code that’s incorrect or making erroneous assumptions. While JavaScript provides flexibility and is easy to learn, it is also a dynamically typed language, which means that code can successfully compile even if there are errors that would prevent the code from running correctly, or at all. The type-checking occurs during runtime when you’re actually executing the code, so the code might seem correct in its file, but then crash or cause odd bugs while it’s running. 

In contrast, TypeScript type-checking takes place during compile time, and if there are type errors it will not successfully compile, which prevents bad code from going out to be run. This provides an added layer of safety and can prevent a wide range of runtime bugs. 

A tangible example might look something like this: 

const bakedAlaska = {
    insideLayers: {
        cake: ‘vanilla’,
        iceCream: ‘chocolate’
    },
    outsideLayers: [’merengue’]
}

const getTotalNumberOfLayers = () => {
    return bakedAlaska.insideLayerd.length + bakedAlaska.outsideLayers.length
}

The author of this code has defined a dessert object and a function that intends to calculate the total number of layers in this dessert. If this is a JavaScript file, this code seems to be straightforward and error-free at a glance. However, the author of the code has made two errors inside the function. 

The first is that length is not a property on an object and will always return undefined. The second is that the insideLayers property of the bakedAlaska is misspelled as insideLayerd. When you run this code, it will actually crash with the error: Cannot read property ‘length’ of undefined.

If this is instead being written in a TypeScript file, the code editor will use the power that TypeScript gives it through static typing and show a helpful error on the misspelled object property:

Property ‘insideLayerd’ does not exist on type ‘{ insideLayers: { cake: string; iceCream: string; }; outsideLayers: string[]; }’. Did you mean ‘insideLayers’?

Most code editors, such as VSCode, will even offer a quick fix option that will update the spelling. Once that error is fixed, a new one appears.

Property ‘length’ does not exist on type ‘{ cake: string; iceCream: string; }’

TypeScript infers the type of object referenced by bakedAlaska.insideLayers and correctly suggests an object like this would not have a length property on it.

These kinds of helpful diagnostics and intelligent code suggestions are why developers love working with TypeScript. According to Stack Overflow’s 2024 developer survey, TypeScript ranked in the top 5 most loved programming languages most loved by developers.

That said, no language is perfect and TypeScript does have some drawbacks. Developers familiar with JavaScript might feel at first that it’s a lot more restrictive and requires more boilerplate code. TypeScript can also be difficult to understand when it comes to some of the more advanced use-cases like generics. Don’t let that discourage you, though. Try it out and see what you think!

Frequently Asked Questions