The Winning Sides of TypeScript over JavaScript

May 7, 2018
by Rahil Shaikh

When TypeScript was introduced, several techies called it Microsoft’s answer to CoffeeScript or Google’s Dart; afterwards, they realized the difference though. TypeScript’s consistently increasing popularity grabbed the attention of both technology students and experienced developers. Hereby I am sharing my finding that I could explore during my exploration.

TypeScript is a strict syntactical superset of JavaScript, which appends optional static typing to JavaScript. It is a free and open-source structure and initially, it was developed with intention of making JavaScript development process more accurate and efficient. It can be said that every JavaScript program is also a TypeScript program. However, it is not always possible to process all JavaScript by TypeScript compiler. TypeScript enables IDEs to provide the richer environment for identifying errors while typing the code. If the project is big sized, adopting TypeScript will enable the development of much robust software solution.

Initial misconception

The comparison of TypeScript with CoffeeScript or Google’s Dart is actually not a right comparison.

CoffeeScript is meant to serve the different motive. It forges many changes to JavaScript’s syntax but the does not change its basic way of working. CoffeeScript is a completely different language targeting the JavaScript platform and it is not a superset of JavaScript as TypeScript.

Whereas, Dart meant to be a complete replacement of JavaScript and its purpose was much different from TypeScript’s. However, they both efficiently assist the development of the large-scale application using module systems and optional static type checking.

 

TypeScript Well Explained

Several facts about TypeScript

  • An Open Source language under Apache 2 License hosted on Github at https://github.com/microsoft/typescript
  • It is a language and not a framework that potentially cross-compiles to JavaScript
  • Much focused to effectiveness of large-scale application development.
  • TypeScript does not attempt to replace JavaScript but provides aid to JavaScript by proffering absent or additional language features and by anticipating ES6
  • It assures easy and flawless migration of JavaScript code along with optimum usage of JavaScript library  
  • Offers the optional static typing
The Language Features of TypeScript
  • Type annotations
  • Type inference
  • Compile time type checking
  • Optional, default and rest parameters
  • Classes
  • Interfaces
  • Structural typing
  • Arrow function expressions
  • Enums
  • Generics
  • Modules
  • Tuple types
  • Union types and type guards
Tooling for Typescript

Compiler

  • Supports different ECMAScript target versions
  • Supports different module systems
  • May produce SourceMaps

IDE Support

  • Based on Language Service
IDE Support for TypeScript
  • TypeScript Playground
  • Visual Studio, VS Express for Web
  • Visual Studio Online
  • Eclipse
  • JetBrains IntelliJ / WebStorm / PHPStorm
  • Text Editors
  • Sublime Text, Vim, Emacs
  • Cloud9 IDE
  • And much more

TypeScript_Ecosystem

Potential Products or Technologies that Uses TypeScript
  • Visual Studio Online
  • Hawt.io
  • Mozilla Shumway

A Quick Glance – How to migrate from JavaScript to TypeScript?

Migrating TypeScript to JavaScript is starts with following simple steps:

[1] Add a tsconfig.json.

[2] Convert your .js files to .ts file simply by changing the source code file’s extensions from .js         to .ts. You need to suppress the errors as well. You can use any. for the same

[3] Write new code in TypeScript

[4] Start adding annotations to the old code

[6] Fix known bugs

[5] Use ambient definitions for third-party JavaScript code

 

migration

 

TypeScript Advantages

Ease of use: TypeScript is not a stand-alone language like Dart or CoffeeScript. You can simply use existing ES5 or ES2015+ JavaScript code and either plug it into .ts file or work with .js files. Based on your configurations, TypeScript will compile the code.  

TypeScript supports core ES2015+ features. Find the list of supported features at http://kangax.github.io/compat-table/es6

You can debug the TypeScript code in the browser or in an editor, if you have created appropriate files during build time.

You can use classes or functional programming techniques with TypeScript with the flexibility of opting out its specific features, if you wish to.

As TypeScript is improved set of JavaScript, you can utilize the excellent sides of JavaScript characteristics in line with static typing and other TypeScript structures.

IntelliSense can be considered as one of the biggest advantages of TypeScript. It gives the active hints while code is being added. VScode, Atom, WebStorm, Sublime text or even command line editors, such as Vim/Neovim, Major available IDEs have excellent support for code completion.

With TypeScript, you can have higher OOP experience to JavaScript due to its support for inheritance and interfaces leading to better code decoupling and reuse.

The TypeScript syntax is more appropriate for C# or Java developers.

 

TypeScript Vs JavaScript

The key variance between TypeScript and JavaScript is TypeScript practices entire code available in JavaScript along with other coding concepts including classes, modules, interfaces, and types. Further, it includes features such as Optional Parameter feature, Rest Parameter feature, Generics support and Modules support. It adds several functional features to JavaScript such as:

Syntax and Compilation differentiation between TypeScript and JavaScript in the context of Class

Inheritance

You can use common object-oriented patterns in TypeScript and extend existing classes to generate the new classes using inheritance.

Public, private, and protected modifiers

TypeScript offers adequate privacy features for members to be marked as public, private or protected. By default, each member is “public”. However, when you mark it as “private”, it will not be accessed from outside of its containing class. When you mark it as “protected”, more or less you are making it private with the exception of making it accessible by instances of deriving classes.

Readonly modifier

In TypeScript, there is a possibility to apply Read Only characteristic to a property by using the readonly keyword. You must initiate it at its declaration or in the constructor.

 

Advantages of TypeScript over JavaScript

Code Consistency: The better code consistency directs you to the better maintenance and less dependency on individuals. Even though several developers work together on the large project, TypeScript enables to preserve supreme level code consistency. Moreover, TypeScript’s interfaces and access modifiers significantly allow the effective communication among APIs.

Prompt Error Catching: Once you use Custom Types in TypeScript, it really becomes easy for you to catch errors promptly during the early stage of the development lifecycle. You can easily pick it, if something is used or passed inaccurately. For example,

 

Why Angular and TypeScript is a great combination:

After considering the winning sides of TypeScript and brain streaming discussions with Microsoft, even Angular has started supporting TypeScript for its Angular 2 + versions. In fact, when it comes to defining code organization, TypeScript is substantial tool. It allows you to reuse the code as well as to encapsulate related pieces of code into TypeScript modules. It supports in providing transparency to the application architecture.

 

TypeScript Pitfalls

If you don’t have enough knowledge about statically typed or OOP languages, you may find difficulties in handling TypeScript. However, you can always learn it. Anyway, continuous learning is an essential part of the developer’s life.

The process of applying the TypeScript definitions for non-TypeScript libraries can be little annoying to you. It will lead you to better coding though.  

It is not possible run Typescript directly without a compile stage and TypeScript will not be able to fix what was once broken in JavaScript.

 

General Delusions

I have encountered the discussions when developers have preferred to opt for TypeScript to leverage use ES6 features like modules, classes, arrow functions, and others at their best. I do not see it as a reasonable decision. You can attain the same objectives using Babel as well. I have come across the application in which TypeScript and Babel both are used. In fact, TypeScript has many other brighter sides to offer in a broader context.

Many developers believe that static typing in TypeScript will offer Tree Shaking. Tree Shaking is all about removal of dead code using static constructs like named module import/export and const. However, as of now TypeScript does not support Tree Shaking out of the box.

Conclusion

In this blog, I have covered all the major aspects of TypeScript that make it one of the most suitable languages for futuristic applications. Its advantages furnish the programmers with straightforward development experience along with increased productivity during the development phase and easy maintainability during entire lifecycle.

About Author

Kishan is a Software Engineer at Azilen Technologies. He has extensive experience of Full Stack Technologies and always Passionate about New Technologies and Challenging Development.

About

Engineer. Blogger. Thinker. Loves programming and working with emerging tech. We can also talk on Football, Gaming, World Politics, Monetary Systems.

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

Leave a Comment