JavaScript vs TypeScript: A Comparison

by Snehith Kumbla
May 18, 2016April 21, 2020 by Snehith Kumbla

4 mins read

JavaScript, since its first appearance in 1995, built its reputation as an ideal scripting language for web pages. Great front end language, excellent with browsers. Over the years it has gained rave reviews for visual representations too (thanks to JavaScript libraries Dygraphs.js, Polymaps.js, D3.js, etc). Great supportive frameworks (AngularJS, ReactJS, Ember.JS, etc) have provided JavaScript with much-needed flexibility. The language's increasing popularity in the last few years is powered with a helpful community monitoring its efficient use.

Since its 2012 origins, TypeScript's strengths are object-oriented programming and the static typing feature. An existing JavaScript program can also be a TypeScript program. Experts like Anders Hejlsberg have mentioned how Typescript is about scaling JavaScript for making it easier to build medium to large applications.

JavaScript: Web Browser Favorite

Important website elements - UI/UX design, drop down boxes, search boxes can be intricately and competently set up with CSS and JavaScript. Thanks to its front-end expertise, the server doesn't take a load, saving on hours of production time.
JavaScript is comparatively more flexible in development time. It allows time in validating that a certain object can be used in a particular way. Here's another benefit, for example, consider a before-after scenario and a single website page with a header, footer, text box, images and a sidebar. Earlier, the entire page needed to be uploaded to make any changes. But now, if sidebar elements need reworking, developers do it without overhauling the entire set up.

TypeScript: The Static Typing Advantage

TypeScript is a superset of JavaScript. TypeScript brings in a whole lot in extending JavaScript capabilities with static typing. Developers can make use of static typing, whenever the need arises, a really good advantage for a TypeScript developer.
Static typing's purpose is to eradicate the development errors, much before code execution. Imposed restrictions on interacting with objects, forces developers to clearly specify things. A type has to be clearly defined, apart from other parameters that make up the method. As a result, tooling enables the developer to detect the error much before the application is run. Modern tools will ensure that an error is detected in a second (literally). Thanks to static typing, code stability and maintenance is not a hassle.
Static typing is not always a requirement. You can always make optimum use of JavaScript's dynamic approach, whenever you choose to do so.

JavaScript vs TypeScript: Head-to-Head

Early Error Detection
TypeScript doesn't take away JavaScript's dynamic capabilities, it just allows developers to make effective use of the static typing approach. Static typing sends out the error signals early. It helps developers in discovering which objects work and don't work.

Tooling enables developers to spot their errors and correct them a good deal before the application is run, a total contrast to JavaScript's real-time trail and error approach. When you get down to pure coding, the clear-cut differences of both programs emerge.

A glaring error in JavaScript will never be singled out for correction until run time. In TypeScript, the resultant output in JavaScript (with the types removed) can be derived using the latest available tools and features.

Large App Capabilities
The entire case against JavaScript, that undermines it (at least in theory) against TypeScript is its humble origins. JavaScript wasn't meant for large applications or say, thousand-odd lines of code.

Today we have code lines running to millions and beyond. This is where TypeScript budged in with its large app capabilities.

The ECMAScript Factor
TypeScript edges ahead in its ability on allowing developers use a major part of the latest version of ECMAScript (ECMAScript6, at the time of writing) features (lambda functions, modules, classes, etc). The language thus makes up for the resource gap developers always had.

'Safer' Refactoring
Refactoring in TypeScript is 'safer', as we are armed with a semantic knowledge of the code. This was not possible in JavaScript. In fact, more the lines of code you write in JavaScript, the more fragile it becomes.

TypeScript: A Faster JavaScript
So your JavaScript framework wasn't written in TypeScript? You can simply write down the Type definitions for it. The integrated development environment (IDE) then validates it for you. Making changes in the browser and reloading is also faster in TypeScript, with a set of tools. TypeScript is in many ways, JavaScript in fast forward mode.

Code Prompting in TypeScript
Finally, TypeScript is evolving as a language service for JavaScript. Using a TypeScript declaration file, for example, for procuring information and getting code prompts on functions,arrays, methods, etc is one of its uses. TypeScript can thus eventually serve as a consistent help center and instant code correction module for a JavaScript file.

Summary
TypeScript 2.0 is expected to be out by June 2016 (non-nullable types, major addition), while TypeScript 2.1 is expected to have a brand new Visual Studio JS language service, more support in refactoring, apart from other new features. Even as we await the arrival of ECMAScript7, modules are expected to play an important role in JavaScript this year.*

* - The Future of JavaScript - 2016 And Beyond (Telerik)

Related Reading