TypeScript vs. JavaScript: 7 Key Differences

From the outside, TypeScript can seem like a riddle wrapped in an enigma.

Although it’s not quite a separate programming language from JavaScript,  the learning curve can seem just as steep. The promise of Typescript is to make development easier, but it also increases the amount of code you have to write, and that code must pass stricter error checking. What gives?

In this article, we'll clear up the differences between TypeScript and JavaScript and illuminate the best use cases for each.

What are the differences between TypeScript and JavaScript?

Static vs dynamic languages

One constant tension in the world of programming is between statically-typed and dynamically-typed languages. To understand the difference between TypeScript and JavaScript, let’s first clear up the differences between these two programming paradigms.

Static languages: more early errors, but the code is safe

A static language requires you to declare the data type of variables when you define them. For instance, say I wanted to define the variable x as the number 24. In a static language, I would tell the computer, "This variable x, where I plan to store some numbers, currently equals 24."

The computer would then consider x a number-storage variable. 24 could eventually change to 4, 240, or -7, but it would always remain a number. If we wanted to change x into the name "Jill," however, the language would throw up an error and the program would refuse to run.

Static languages are safe to work with. If you ran a business and suddenly charged "Jill" dollars to someone's bank account, you'd be in trouble. Static-typed languages prevent these sorts of errors long before they happen. Examples of common static languages include Java, C++, and Rust.

Dynamic languages: easier to write, but more errors later on

A dynamic language, on the other hand, optimizes for speed and ease of use. Dynamically-typed languages let you pass any type of data to a variable. You don't need to describe a value before you start using it. For example, take the following line of Python, a popular dynamically-typed language:

def add(x):
  return x + 5

The code's author probably intended numbers to be passed to the add function. If we’d added 2, we'd get 7 back, if we’d added 4, we’d get 9, and the program would work as intended. So long as the function always receives numbers, everything is fine. If we wanted to publish the program to the wider world, we could deploy it and run it on anyone's computer.

But what happens when someone passes "dog" as the value of x? "dog" + 5 might confuse the computer and return an error message. Or maybe it returns the unfortunate string "dog5." Either way, the ambiguity is of no use to anyone.

While a statically-typed language would alert you to that error the first time you tried to execute the code, a dynamically-typed language would only show an error the first time it encountered a non-number as the argument to the add function.

JS is dynamic and TS is static

This is the core difference between JavaScript and TypeScript. While JavaScript is dynamically-typed, TypeScript is a statically-typed superset of JavaScript, which means it offers strict static typing as an option but will allow dynamic typing, as well. As a result, TypeScript code is safer  but a little trickier to write, resulting in more errors earlier in development. The language you use depends on the project you want to execute and the type of code you like to write.

What TypeScript looks like

What does it mean that TypeScript is a superset of JavaScript? TypeScript only adds features to the JavaScript language; it does not restrict or change JavaScript itself. By writing a .ts file instead of a .js one, you can use TypeScript's type features to create safer, more literate code as you see fit, but you're always free to write vanilla JavaScript within it.

So while in JavaScript you might define the string myString with:

let myString = "this is js"

TypeScript would allow you to define the type of that variable with:

let myString: string = "this is ts"

If you ever tried to reassign the value with myString = 42, TypeScript would warn you that you were making a mistake while JavaScript would let you continue.

It's important to note that TypeScript allows you to define all sorts of types beyond simple variables. You can define more complex data types like arrays, objects, and functions, and you can even define the specific shape of an object in advance using interfaces.

Defining complex data structures when they're first assigned means complex code is much easier to understand and maintain over time, since each data structure comes with its own description of its intended use.

Functions can also only accept certain types, and frameworks and specific npm packages can come with type definitions that drastically lower the learning curve for new tools (since your autocomplete can recommend the external libraries' syntax.)

When to use TypeScript vs JavaScript?

It might be a good idea to set up TypeScript in your project if you are working on a large project with a big team. If you are using external libraries and frameworks that offer type definitions, which can make writing your code much easier. JavaScript may be a better choice if you want to write a quick script or personal project.

It might be a good idea to set up TypeScript in your project if you:

• are working on a large project with a big team, where errors are more common and safety is paramount.
• are using external libraries and frameworks that offer type definitions, which can make writing your code much easier.
• have the time to learn TypeScript and write it.

JavaScript might be a better choice if you:

• are writing a quick script or personal project and don't want to write much code.
• value the ability to quickly build out a project over maintaining it and preventing errors in the long term.
• never learned TypeScript and don't have time to do so.

As you might imagine, learning TypeScript requires a non-trivial time commitment. However, many developers claim that it saves them time in the long run by preventing tedious debugging and enabling better autocomplete in their code editors, enabling them to write code faster. TypeScript is so well-loved it made it to the #2 position in StackOverflow's survey of most loved programming languages, and coders find it pairs well with a variety of frameworks.

It’s worth taking the time to experiment with TypeScript and gain some familiarity. Many web development jobs will expect some experience with TypeScript, and because it's a superset of JavaScript, you don't have to learn everything in it all at once.