Take it easy, let’s find out which one is better, JavaScript or TypeScript?

Should we move from JavaScript to TypeScript? For articles with a similar heading, the authors usually have the answer in their minds. But they intend to leave the answer in the last paragraph to lure readers to read the whole article. Or even worse, leave an ambiguous answer at the end. So what are we doing here? Well, before we go for the answer. Let’s take a look at our justifications. Don’t worry, we are sure it will not be an ambiguous one :]]

What are JavaScript and TypeScript (in layman’s terms)?

We are going to go straight to the points on what JavaScript and TypeScript are. For their full definitions, you can wiki or google them.

Okay, JavaScript – a human-readable programming language that can be run on frontend web browsers and backend web servers for making interactive stuff.

And TypeScript – it is JavaScript with “Type” syntax to standardize the access of variables and provide an interface to define an object’s attributes and functions.

“Type” of TypeScript in Action

From the paragraphs above, we know that TypeScript is JavaScript but added with “Type” syntax. So, o que é “Tipo”? (what is “Type”?) A code snippet is worth a thousand words. Let’s get started with JavaScript. In JavaScript we can write the following code:

let a = 123;
a = "333";
console.log("This is "+(a+3));

Note that we have transformed the variable a from numeric value 123 to string “333” in line 2. Thus we have the following output:

This is 3333

Now we do the similar thing in TypeScript:

let b:number = 123;
b = 333; // We can't do 'b = "333"', as our IDE's already spotted the issue
console.log("This is "+(b+3));

In TypeScript, we give the type, number, to our variable b. Then when we tried to do the same trick from JavaScript that turned a numeric variable into a string, oh well,

This is the “type safety” feature that TypeScript provides to us, so we won’t accidentally change our variables in the middle of somewhere and get an unpredictable outcome. And for the output of the above code, we have:

This is 336

“Interface” of TypeScript, the lawmaker

If the “type” of TypeScript works as the coding police to guide us using proper primitives, then the “interface” of it works as the lawmaker that defines the rules of objects used in our code. Let’s take a look at the following example:

interface User {
    name: string;
    id: number;
}    
interface Customer extends User {
    campaign_name: string;
    year_joined: number;
}
interface Staff extends User {
    department_name: string;
    title: string;
}
     
let jimmy = <Customer>{};
jimmy.name = "Jimmy Hart"
jimmy.id = 1234;
jimmy.campaign_name = "Python Bootcamp"
jimmy.year_joined = 2022;

let jenny = <Staff>{};
jenny.name = "Jenny Lee"
jenny.id = 1235;
jenny.department_name = "Marketing";
jenny.title = "Senior Officer";

We have created 2 interfaces, <Customer> and <Staff>. Both interfaces come from the interface <User>. Thus those interfaces contain common attributes inherited from the parent interface plus their unique attributes. It provides a way for developers to reuse and expand interfaces. It is useful when the development project become bigger and more complex.

Need For Speed – TypeScript VS JavaScript

Other than the functionality differences, let’s move to another important aspect — performance. Does this advanced language also bring an advanced performance or an additional burden？

Theoretically, TypeScript is a complied language, which runs faster than interpreted language like JavaScript and our favorite language, Python (too bad :[[ ). But then TypeScript is compiled into JavaScript, i.e. back to the slower interpreted language, so what is the point? Firstly, the code of TypeScript has been compiled thus those programming mistakes should have been removed. And since all the completed source code is received by the compiler, it could compile an optimized JavaScript output. Of course you may think a human can write an optimized JavaScript by hand as well. But then, from our journey in our machine learning lessons that we know, human make mistakes, especially in a large scale project.

Up to this moment, we are talking about theoretical things. Let’s move on to practical things. Below is the chart of benchmarks between TypeScript and JavaScript on handling different programming problems:

The source of the chart is come from Programming Language Benchmarks, dated 21st December, 2022.

According to the above chart, TypeScript provides faster responses on 10 out of 11 benchmark tests. The significant performance lost is the serializing and deserializing of JSON.

People Power – the Popularity and the Community Support

Other than functions and performance, the things we care are the language’s popularity and the community support. You are good only when people know you are good. So, what do people think about TypeScript? According to the Stack Overflow Developer Survey 2022, TypeScript is the 5th most popular languages among developers (our favorite Python is on the 4th :]] ).

You may not know, there are other languages compile to JavaScript as well. From the State of JS 2022 survey, when they asked developers about their favorite “JavaScript flavors”, we got one stand out answer and you know what it is:

Then we take a look on how do people spend their time between JavaScript and TypeScript:

According to the survey, people tend to use TypeScript more than JavaScript. You may ask, there is obviously more JavaScript search then TypeScript’s one from Google Trends. Please note that the respondents of the State of JS survey are mainly developers while Google Trends is for general public.

From the above resources, we know TypeScript is the 5th most popular language and more and more developers adopting it as their main language of choice. The TypeScript community is constantly growing and do not forget, Microsoft is the developer of this language that provides tutorials and helps from its huge community network.

Conclusion

Up to this moment, we know the following characteristics of TypeScript when comparing it with JavaScript:

• Type Safety
• Interface for expandability
• Better performance
• Growing popularity
• Widely Supported

It is safe to say TypeScript is an upgrade of JavaScript, especially on developing a large-scale application. But it does not mean we are ruling out JavaScript or Node.js. In fact, TypeScript is ultimately JavaScript after compilation and JavaScript is being used by many libraries and applications as well. When we go for developing a proof of concept or a small application, JavaScript / Node.js will be a handy language option. Then when we plan for developing something big and extendible, TypeScript will be the right choice.