{"id":2483,"date":"2023-01-30T18:19:03","date_gmt":"2023-01-30T18:19:03","guid":{"rendered":"https:\/\/www.codeastar.com\/?p=2483"},"modified":"2023-01-30T18:19:05","modified_gmt":"2023-01-30T18:19:05","slug":"take-it-easy-lets-find-out-which-one-is-better-javascript-or-typescript","status":"publish","type":"post","link":"https:\/\/www.codeastar.com\/take-it-easy-lets-find-out-which-one-is-better-javascript-or-typescript\/","title":{"rendered":"Take it easy, let’s find out which one is better, JavaScript or TypeScript?"},"content":{"rendered":"\n

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 :]]<\/p>\n\n\n\n

What are JavaScript and TypeScript (in layman’s terms)?<\/h3>\n\n\n\n

We are going to go straight to the points on what JavaScript and TypeScript are. For their full definitions, you can wiki<\/a> or google<\/a> them. <\/p>\n\n\n\n

Okay, JavaScript<\/strong> – a human-readable programming language that can be run on frontend web browsers and backend web servers for making interactive stuff. <\/p>\n\n\n\n

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

\n
\"TypeScript:<\/figure>\n<\/figure>\n\n\n\n

“Type” of TypeScript in Action<\/h3>\n\n\n\n

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

\nlet a = 123;\na = "333";\nconsole.log("This is "+(a+3));\n<\/pre><\/div>\n\n\n
Note that we have transformed the variable a<\/em> from numeric value 123 to string “333” in line 2. Thus we have the following output:<\/p>\n\n\n\n
This is 3333<\/code><\/pre>\n\n\n\n
Now we do the similar thing in TypeScript<\/strong>:<\/p>\n\n\n
\nlet b:number = 123;\nb = 333; \/\/ We can't do 'b = "333"', as our IDE's already spotted the issue\nconsole.log("This is "+(b+3));\n<\/pre><\/div>\n\n\n
In TypeScript, we give the type, number, to our variable b<\/em>. Then when we tried to do the same trick from JavaScript that turned a numeric variable into a string, oh well, <\/p>\n\n\n\n
\"U<\/figure>\n\n\n\n
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:<\/p>\n\n\n\n
This is 336<\/code><\/pre>\n\n\n\n
“Interface” of TypeScript, the lawmaker<\/h3>\n\n\n\n
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:<\/p>\n\n\n
\ninterface User {\n    name: string;\n    id: number;\n}    \ninterface Customer extends User {\n    campaign_name: string;\n    year_joined: number;\n}\ninterface Staff extends User {\n    department_name: string;\n    title: string;\n}\n     \nlet jimmy = <Customer>{};\njimmy.name = "Jimmy Hart"\njimmy.id = 1234;\njimmy.campaign_name = "Python Bootcamp"\njimmy.year_joined = 2022;\n\nlet jenny = <Staff>{};\njenny.name = "Jenny Lee"\njenny.id = 1235;\njenny.department_name = "Marketing";\njenny.title = "Senior Officer";\n<\/pre><\/div>\n\n\n
We have created 2 interfaces, <Customer<\/em>> and <Staff<\/em>>. 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.<\/p>\n\n\n\n
Need For Speed – TypeScript VS JavaScript<\/h3>\n\n\n\n
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\uff1f<\/p>\n\n\n\n
Theoretically, TypeScript is a complied language, which runs faster than interpreted language like JavaScript and our favorite language, Python<\/a> (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.<\/p>\n\n\n\n
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:<\/p>\n\n\n\n