TypeScript vs JavaScript: Understanding the Differences

If you're new to web development, or just Javascript development, you may find yourself wondering what is the difference between TypeScript and Javascript. In this guide, I'll explain exactly what TypeScript is and why it's different from Javascript. If you're looking to start your TypeScript project, I wrote a guide here on setting up your first TypeScript project.

How is TypeScript different from JavaScript?

When the web started, JavaScript was a scripting language that allowed us to add interactivity to websites. Javascript was famously written in 10 days, so as you might expect it didn't have all the features we have today.

As time went on, Javascript's importance only grew. Frameworks evolved like jQuery, Mootools, and then React, Vue and Svelte. Then, Javascript became a backend language too with Node. JS. As it grew in importance, all the quirks, peculiarities, and missing features of Javascript became more noticeable. For programmers coming from strongly typed languages, one of these missing features was a type system.

What are types?

In Javascript, type is dynamic based on how you write your code. This is different from some other languages where you have to mention explicitly the type of everything. In Javascript, it's easier:

let x = 5; // Type is Number
let y = 'string'; // Type is String
let z = {}; // Type is object

This is a great feature. It makes Javascript easy entry for developers who want to create something fast. It has drawbacks, though. The major one is that if you work with multiple teams, complex systems where enforcing types is important, or just face a lot of issues because of TypeErrors, it can become a hindrance rather than a net positive for your applications.

TypeScript tries to solve this issue. The only thing it does is adds types to Javascript, and it means you have to define types of your code more often. Using our previous example, we could define the types of our variables like this:

let x:number = 5; // Type is Number
let y:string = 'string'; // Type is String
let z:object = {}; // Type is object

It doesn't end there, though. For example, writing a simple function in Javascript may look like this:

let myFunction = (x, y) => {
    return x + y;
}

Whereas TypeScript lets us define types for all arguments and the return value of the function:

let myFunction = (x:number, y:number):number => {
    return x + y;
}

Learning TypeScript is therefore a little different than Javascript. If you're interested, you can learn more about types in TypeScript here.

Features of TypeScript

• It is strongly typed - as mentioned, we have to define types in TypeScript whereas we do not in Javascript.
• It still works like Javascript - all the functions, methods, and everything you're used to still exist in TypeScript. It just has types added on too.
• It has a compile step, and compiles to Javascript - TypeScript can't be run on a browser. Instead, you write your code with types, and then they are compiled into vanilla Javascript without types. That means you know your code is typed properly before you compile it, after which it's just plain Javascript that can run on the web.

Why use TypeScript?

The main reason people and organizations use TypeScript is that it's type-safe - you can strongly type all of your code, and ultimately this leads to fewer bugs and issues further down the line. When the return type of a function, or the input type of a variable is defined, developers can't accidentally write "true" instead of true.

Is TypeScript better than Javascript?

TypeScript is not better than Javascript - it just gives you the ability to define the types in your code. Sometimes, you may not need that, and the main disadvantage to Typescript is the compile time. In Javascript, code is ready to go as soon as you write it, but in TypeScript, it requires you to compile it down to Javascript.

In the future, types may come to Javascript in one form or another, which will potentially remove this compile step. For now, though, this takes time and may not be your preferred method of writing code if you don't have to. This is the main benefit of sticking with Javascript, but there are others - for small apps, strongly typing your code may provide no added benefit as well.

Therefore, don't feel like you need to use TypeScript - use whatever makes sense for your product or organization.

Conclusion

If you are new to TypeScript, I write quite a bit about it here. It's a great language and provides a lot of safety about types that Javascript does not. TypeScript is not better than Javascript, but it may be more familiar to you if you have come from a strongly typed background.

It may also be the preferred option if you work on large products or with many teams. You must select the toolset that applies to your situation though, but there is no harm in learning TypeScript given its growing popularity.

If you've enjoyed this, you can catch me on Twitter here.

Also Published here