TypeScript vs JavaScript: A Comprehensive Comparison

The battle for the language of the web has long been dominated by JavaScript.

The majority of the web as we know and interact with today, started taking shape almost three decades ago with the release of JavaScript as an open-source scripting language that conformed to the ECMAScript specifications.

But, as with any language, as JavaScript started gaining popularity, it also encountered certain limitations inherent to its design that could not be completely solved.

The most glaring of them being the inability to be strongly typed.

Enter TypeScript in 2012!

As a superset of JavaScript, TypeScript features static typing and type annotations that transpile to JavaScript.

But even today, the confusion remains amongst developers:

What is TypeScript?

TypeScript is similar to JavaScript, but with many differences in both syntax and execution that make it better to work with in scalable environments.

TypeScript is Statically Typed

It is statically typed and not dynamic like JavaScript.

Consider this simple example:

As you can see in the JavaScript file, we have declared the variable and assigned it a with the value of .

The same goes for the variable with the numerical value of .

How did the interpreter know that these are string and number values respectively?

TypeScript, on the other hand, has static or “strict” types - meaning that we have to assign the type of the variable before assigning a value.

So, in the adjacent image above, and each get assigned their respective types of and before being assigned their values.

Without these types, either the IDE or the engine where you run the TypeScript code will immediately throw an error - which helps us to fix it in real-time.

(As opposed to JavaScript - where one oversight can cost you in production. 🥲)

TypeScript is a Compiled Language

JavaScript - at an abstracted level of definition - is an interpreted language.

There is no compiling and each line is interpreted at runtime - which is when the dynamically allocated types of values are assigned to their respective variables.

TypeScript is a Superset

TypeScript is not a replacement for JavaScript.

As mentioned earlier, it is a superset of JavaScript, which means it still adheres to ECMAScript definitions.

TypeScript is Modular

TypeScript utilises concepts like which help developers better organise and modularise their codebase as opposed to JavaScript.

TypeScript is a True OOP Language

TypeScript implements object-oriented designs and patterns in its syntax much better than JavaScript does.

It does so with code annotation with decorators, optional parameters, etc, thereby making for a more readable codebase.

TypeScript also has which largely help in structuring objects and their properties.

This is one of the best implementations of real-world OOP.

TypeScript Gets Transpiled

If you are wondering how to convert TypeScript to JavaScript, well worry not. TypeScript automatically gets transpiled to JavaScript through the TypeScript compiler, or .

The is responsible for parsing the TypeScript code and breaking it down into tokens which are then organised into a structure called the Abstract Syntax Tree (AST).

This AST is read again by the to check for semantics, types, etc., and is then converted to its equivalent JavaScript AST.

Finally, the transpiler converts this JavaScript AST back into executable JavaScript code which a browser engine or a Node.js runtime can execute.

Additional Types in TypeScript

While all the JavaScript types like , , , etc, also work as usual, TypeScript adds to the developer experience with additional types:

Consider the example below:

// Numeric Enums - Default
enum employees {
	AssociateDeveloper,
	SeniorDeveloper
	Lead,
	Manager
}

const employee = employees.Lead
console.log(employee) // 2

Here’s an example, with enums initialised:

enum employees {
	AssociateDeveloper = 1,
	SeniorDeveloper
	Lead,
	Manager
}

const employee = employees.Manager
console.log(employee) // 4 – since the first value was initialised to one

We can also initialise numeric enums to whatever values we need, like this:

enum employees {
	AssociateDeveloper = 101,
	SeniorDeveloper = 202
	Lead = 304,
	Manager = 901
}

Below is an example for string enums:

enum designations {
	SDE1 = 'Associate',
	SDE2 = 'Senior',
	SDE3 = 'Lead',
	SRE = 'DevOps'
}

We can see how much better the code is in terms of readability (as well as structure), just by using TypeScript’s feature.

When to Use TypeScript

While the TypeScript vs JavaScript war rages on, there are no set scenarios to NOT use TypeScript.

Of course, it might be a bit much to use TypeScript if all you want to do is design a few frontend features for websites.

However, if you are designing server-side applications that need to be scalable in nature, then using TypeScript is an industry-standard practice nowadays.

More and more companies are migrating their codebases into TypeScript, since its advantages are very easily obvious.

Data-heavy startups with a focus on top-notch functionality, and streaming companies like Netflix rely heavily on TypeScript to maintain uniformity across their codebases.

JavaScript can very easily spiral out of control once there are multiple developers and teams contributing.

Conclusion

Given the current trends in the software market, it’s clear that TypeScript is an excellent choice for developing applications.

It is one of the most powerful skills for developers, given the proliferation of JavaScript-based apps across multiple domains.

If the JavaScript vs TypeScript confusion still haunts you though, give TypeScript a try once you're done with JavaScript. You might find it to be a fantastic tool in your software-development toolbox! 😎

This is a function type used to denote the absence of any kind of type. Think of it as the opposite of ANY. Adding a VOID type to functions helps in better readability - we can see whether a function returns anything without having to read the whole code block - and has type safety, too.