TypeScript Overview

TypeScript is an open-source object-oriented language developed and maintained by Microsoft, licensed under Apache 2 license. It is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript was developed under Anders Hejlsberg, who also led the creation of the C# language. TypeScript was first released in October 2012.

Official website: https://www.typescriptlang.org

Source code: https://github.com/Microsoft/TypeScript

Why TypeScript?

JavaScript has seen a vast development in the last few years. It is the most versatile cross-platform language that is used to develop modern web applications. It can be used to develop both the client side of an application, with frameworks like Angular or React.js, as well as the server side, with frameworks such as Node.js. It is now being considered the most opted for language to build end-to-end applications. But, JavaScript was never meant for such large-scale application development. JavaScript is a dynamic programming language with no type system, unlike well-structured and refined languages such as C# or Java. A no type system means that a variable in JavaScript can have any type of value such as string, number, boolean etc. The type system increases the code quality, readability and makes it an easy to maintain and refactor code base. More importantly, errors can be caught at compile time rather than at run time.

Without the type system, it is difficult to scale JavaScript to build complex applications with large teams working on the same code.

Hence, the reason to use TypeScript is that it allows JavaScript to be used at scale.

TypeScript compiles into simple JavaScript. The TypeScript compiler is also implemented in TypeScript and can be used with any browser or JavaScript engines like Node.js. TypeScript needs an ECMAScript 3 or higher compatible environment to compile. This is a condition met by all browsers and JavaScript engines today.

Some of the most popular JavaScript frameworks like Angular.js and WinJS are written in TypeScript.

How to use TypeScript?

A TypeScript code is written in a file with .ts extension and then compiled into JavaScript using the TypeScript compiler. A TypeScript file can be written in any code editor. A TypeScript compiler needs to be installed on your platform. Once installed, the command tsc <filename>.ts compiles the TypeScript code into a plain JavaScript file. JavaScript files can then be included in the HTML and run on any browser.

Compile TypeScript to JavaScript

TypeScript installation for various platforms and the compilation process is detailed in the next section, along with the code examples.

TypeScript Features

  • Cross-Platform: TypeScript runs on any platform that JavaScript runs on. The TypeScript compiler can be installed on any Operating System such as Windows, MacOS and Linux.
  • Object Oriented Language: TypeScript provides powerful features such as Classes, Interfaces, and Modules. You can write pure object-oriented code for client-side as well as server-side development.
  • Static type-checking: TypeScript uses static typing. This is done using type annotations. It helps type checking at compile time. Thus, you can find errors while typing the code without running your script each time. Additionally, using the type inference mechanism, if a variable is declared without a type, it will be inferred based on its value.
  • Optional Static Typing: TypeScript also allows optional static typing if you would rather use JavaScript's dynamic typing.
  • DOM Manipulation: Just like JavaScript, TypeScript can be used to manipulate the DOM for adding or removing elements.
  • ES 6 Features: TypeScript includes most features of planned ECMAScript 2015 (ES 6, 7) such as class, interface, Arrow functions etc.

TypeScript Advantages

  1. TypeScript is an open-source language with continuous development and maintenance by Microsoft.
  2. TypeScript runs on any browser or JavaScript engine.
  3. TypeScript is similar to JavaScript and uses the same syntax and semantics. All of TypeScript's code finally gets converted into JavaScript. This allows a quicker learning curve for front-end developers currently coding in JavaScript.
  4. TypeScript is also closer in syntax to back-end languages like Java and Scala. This helps backend developers write front-end code faster.
  5. TypeScript code can be called from an existing JavaScript code. TypeScript also works with existing JavaScript frameworks and libraries without any issues.
  6. The TypeScript Definition file, with .d.ts extension, provides support for existing JavaScript libraries like Jquery, D3.js, etc. So, TypeScript code can add JavaScript libraries using type definitions to avail the benefits of type-checking, code autocompletion, and documentation in existing dynamically-typed JavaScript libraries.
  7. TypeScript has support for the latest JavaScript features from ECMAScript 2015 i.e the language specification for JavaScript. It includes features from ES6 and ES7 that can run in ES5-level JavaScript engines like Node.js. This offers a massive advantage of using features from future JavaScript versions in current JavaScript engines.
  8. TypeScript has easy integration with task runner tools like Grunt and Gulp to automate the workflow.

Now that we know the inspiration behind TypeScript and the various advantages it provides to build large scale applications, let us look into how to install and setup TypeScript in the next tutorial.