Understanding TypeScript

Few months back when started working on Angular+ versions I saw and started hearing a completely new terminology which was TypeScript(TS). I was curious about the same and wanted to know more. I though it was some special form of JavaScript wrapped in some different way but I was completely wrong. Though later on I and my team of developers worked on a lot of Angular+ projects and due to this were able to understand TS in more depth and details.

Let's discuss further what exactly it is and why it came into picture.

But before that lets see what few people have said about the same:

• “We love TypeScript for many things… With TypeScript, several of our team members have said things like ‘I now actually understand most of our own code!’ because they can easily traverse it and understand relationships much better. And we’ve found several bugs via TypeScript’s checks.” — Brad Green, Engineering Director – Angular
• “One of Ionic’s main goals is to make app development as quick and easy as possible, and the tooling support TypeScript gives us with autocompletion, type checking and source documentation really aligns with that.” — Tim Lancina, Tooling Developer – Ionic
• “TypeScript is a smart choice when writing a modern web- or JavaScript-based application. TypeScript’s carefully considered language features and functionality, and its consistently improving tools result in a terrifically productive development experience.” — Aaron Cornelius, Research Fellow – Epic
• “TypeScript helped us to reuse the team’s knowledge and to keep the same team velocity by providing the same excellent developer experience as C#… A huge improvement over plain JavaScript.” — Valio Stoychev, PM Lead – NativeScript

What is TypeScript(TS) ?

TypeScript is a superset of JavaScript. Therefore, any program written in valid JavaScript will also run as expected in TypeScript. In fact, TypeScript compiles simply to plain JavaScript. So, what’s the difference? TypeScript offers us more control over our code via type annotations, interfaces, and classes.

It is a statically compiled language to write clear and simple JavaScript code. It can be run on Node.js or any browser which supports ECMAScript 3 or newer versions.

TypeScript provides optional static typing, classes, and interface. For a large JavaScript project adopting TypeScript can bring you more robust software and easily deployable with a regular JavaScript application.  One of the big benefits is to enable IDEs to provide a richer environment for spotting common errors as you type the code.

Who developed it ?

TypeScript was created by Microsoft and was released in 2012 after two years of development. It was created to allow for optional static type checking, which would be particularly useful when developing large scale applications. Interestingly, one of the reasons Microsoft developed TypeScript was because their internal teams were having trouble making JavaScript scale for Microsoft’s own projects, notably the team working on Bing Maps.

TypeScript is open-source, and the code is written in TypeScript itself. You can check out the code on GitHub.

How does TypeScript Work ?

TypeScript is in need of a compiler that can convert TypeScript syntax into standard JavaScript. And this compiler is called transpiler. Transpiler is designed to convert one programming language into another one.

You will notice that TypeScript files come with .ts extension. Once transpiler compiles the .ts files, you will get .js files as output.

Another good thing about TypeScript is that it allows you to access common JavaScript frameworks and libraries. This is made possible by providing seamless integration of declaration files.

What are Features of TypeScript ?

• TypeScript Code is converted into Plain JavaScript Code: TypeScript code is not understandable by the browsers. Thats why if the code is written in TypeScript then it is compiled and converted the code i.e. translate the code into JavaScript.The above process is known as Trans-piled. By the help of JavaScript code, browsers are able to read the code and display.
• JavaScript is TypeScript: Whatever code is written in JavaScript can be converted to TypeScript by changing the extension from .js to .ts.
• Use TypeScript anywhere: TypeScript code can be run on any browser, devices or in any operating system. TypeScipt is not specific to any Virtual-machine etc.
• TypeScript supports JS libraries: With TypeScript, developers can use existing JavaScript code, incorporate popular JavaScript libraries, and can be called from other JavaScript code.
• Maintainability
• Offered great productivity for developers
• Code navigation and bug prevention
• Code 'discoverability' & refactoring
• Optional Static Type Annotation / Static Typing
• Additional Features for Functions
• Supports ES6
• Supports interfaces, sub-interfaces, classes, and subclasses
• Scalable HTML5 client-side development
• Rich IDE available with autocomplete and code navigation features.
• Class-based object-oriented with the inheritance of private members and interfaces.

Why Should We Use TypeScript ?

I have listed as many reasons I can find which are as follows:

• TypeScript simplifies JavaScript code, making it easier to read and debug.
• TypeScript is open source.
• TypeScript provides highly productive development tools for JavaScript IDEs and practices, like static checking.
• TypeScript makes code easier to read and understand.
• With TypeScript, we can make a huge improvement over plain JavaScript.
• TypeScript gives us all the benefits of ES6 (ECMAScript 6), plus more productivity.
• TypeScript can help us to avoid painful bugs that developers commonly run into when writing JavaScript by type checking the code.
• Powerful type system, including generics.
• TypeScript code can be compiled as per ES5 and ES6 standards to support the latest browser.
• Supports static typing.
• TypeScript will save developers time.
• TypeScript supports JS libraries & API Documentation
• Better code structuring and object-oriented programming techniques
• Allows better development time tool support
• It can extend the language beyond the standard decorators, async/await

Difference Between TypeScript & JavaScript

References

• https://www.geeksforgeeks.org/difference-between-typescript-and-javascript/
• https://stackoverflow.com/questions/12694530/what-is-typescript-and-why-would-i-use-it-in-place-of-javascript
• https://www.guru99.com/typescript-vs-javascript.html
• https://dzone.com/articles/what-is-typescript-and-why-use-it
• https://dev.to/singhdigamber/what-is-typescript-jig
• https://medium.com/front-end-weekly/typescript-what-is-it-when-is-it-useful-c4c41b5c4ae7