Introduction to TypeScript

Typescript 1.0 was released on 1st Oct 2012 by Microsoft as a free and open-source programming language for JavaScript-based enterprise application development. At the time of writing this article, the latest version of TypeScript was 4.5.5 which was released in January 2022 it was a stable release at that time.

If you or your team come from a strongly typed language like C#, Java and Php then you don’t need to learn JavaScript syntax and style to develop your JavaScript application; TypeScript is a good alternative. Since it will give you the feel of object-oriented programming language.

Many large-scale or enterprise projects are adopting TypeScript for its maintainabilities and type checking features that make applications way smarter, such as Angular, Asana, and others supporting TypeScript as one of their language preference. TypeScript’s features such as type annotations and other robust features make it extremely easy to migrate a project from their old JavaScript codebase with ease. And one can start working on TypeScript easily as its learning curve is very straightforward if you have a piece of knowledge of JavaSCript previously.

Advantages of TypeScript

1. Simplify JavaScript code which is easier to read and debug.

2. Provides Type Safety at compile time.

3. Unlike JavaScript, it supports classes, Interfaces, etc.

4. Supports the latest standard and evolving features of JavaScript including ES5 and ES6.

5. Supports modularity.

6. Open source.

TypeScript based JavaScript Frameworks

TypeScript is used by the many popular JavaScript Framework for developing desktop applications, web applications as well as hybrid and native mobile apps. Some of the frameworks are shown in the fig.

Tools And IDE

TypeScript provides highly-productive development tools for JavaScript IDE like WebStrom, Visual Studio Code, Visual Studio, Atom, Brackets, Sublime, Eclipse, Vim, etc. These tools support static type checking and code refactoring while developing your JavaScript applications using TypeScript.

To get started with TypeScript make sure you have TypeScript Supported IDE. In this book, we will use free, open source, and cross platform IDE - Visual Studio Code. Make sure you have installed the following software to get started with TypeScript development.

1. Node.js
2. Visual Studio Code

Install TypeScript using NPM

To get started with TypeScript, we just need to install Typescript using the NPM by running the following command.

Command Prompt

npm install -g TypeScript

This command will install typescript as a global package into your system's default directory and it can be used wherever we want.

Open Visual Studio Code

So far, we have installed all the prerequisites to build the first TypeScript program. Now open VS code and make an empty folder in your system named as TSPrograms. Open this folder with the help of VS code.

Create a new file named as hello.ts by clicking the New File option in the MyProject row of the explore sidebar as given below:

Add the following lines of code as given below:

Hello.ts

class Program {
 constructor(private msg: string) {
 }
 showDetails() {
 console.log("Your message is : " + this.msg);
 }
}

let obj = new Program("Hello TypeScript");
obj.showDetails();

Here in the above file, we have created a class along with the method called showDetails(), and the class properties and attributes can be accessed by creating the object of that class, that is the simple TypeScript file to show you how we can get started with TypeScript quickly.

Setting TypeScript compilation option in Visual Studio Code

It’s time to set up typescript compilation targets as ES3 or ES5 or ES6 as per your target browsers. For this one, you have to add the tsconfig.json file and add the following lines of code.

tsconfig.json

{
 "compilerOptions": {
 "target": "es5",
 "module": "commonjs",
 "sourceMap": true
 }
}

Creating Task to Transpile TypeScript into JavaScript

VS Code integrates with tsc (typescript compile) through integrated task runner. You can use this to transpile .ts files into .js files.

To create tasks.json, open the Command Palette with Ctrl+Shift+P and type Configure Task Runner, press Enter to select it.

This shows a selection box with templates you can choose from. Choose TypeScript – tsconfig.json option and press Enter.

It will create a tasks.json file in the .vscode folder as given below:

It’s time to execute the task. It can be executed by simply pressing Ctrl+Shift+B (Run Build Task). At this point, you will see an additional file show up in the file list with the name hello.js.

Running Code using Node

Now, we can run our code by opening up a terminal and running the following command.

node hello

For more help refer to the given link https://goo.gl/PbJNsh

Important Information

1. TypeScript is never executed by browser, so you have to add reference of compiled JS file (Generated by TypeScript compiler) to your webpage.

2. TypeScript code can be compiled as per ES3 standard to support older browser.

3. TypeScript code can be compiled as per ES5 and ES6 standard to support latest browser.

4. A piece of JavaScript code is a valid TypeScript code.

TypeScript Compilation

TypeScript is compiled into JavaScript and JavaScript is an implementation of the ECMAScript standard. Version 4 of the ECMAScript specification was abandoned, so technically it does not exist.

You can compile your TypeScript code into three versions of ECMAScript – ES3, ES5 and ES6. When you deal with browsers, you should know the browser supports all these ECMAScript standards.

ECMAScript 3 (ES3)

ECMAScript 3 standard was published in 1999 and it is widely supported by all the browsers available in the market. If you are targeting ES3 compilation for your TypeScript file, a limited number of TypeScript features are supported. But it offers the widest support for your code in all the browsers.

ECMAScript 5 (ES5)

ECMAScript 5 standard was published in Dec 2009 and it is widely supported by all the latest browsers available in the market. If you are targeting ES5 compilation for your TypeScript file, a maximum number of TypeScript features are supported. ES5 is supported in the following browsers:

1. Chrome 7 or higher

2. FF 4 or higher

3. IE 9 or higher

4. Opera 12 or higher

5. Safari 5.1 or higher

ECMAScript 6 (ES6)

ECMAScript 6 standard was published in June 2015 and its features are only supported by the latest browsers. If you are targeting ES6 compilation for your TypeScript file, all the TypeScript features are supported but your code might not work in older browsers like IE7, IE8, IE9, and IE10. ES6 is supported in the following browsers:

1. Chrome 30 or higher

2. FF 22 or higher

3. IE 11, Edge 12 or higher

4. Opera 15 or higher

5. Safari 7 or higher

For a detailed analysis of ES5 and ES6 features support by the browsers, please refer to the given link: https://goo.gl/YmLnMl

What do you think?

TypeScript is a strongly typed and superset of JavaScript which compiles to the plain/native JavaScript code as soon as the compilation has been completed. TypeScript is a language designed for large-scale or enterprise based JavaScript application development, and that can be used on any browser, any host, and any of the operating systems (o/s) that make TypeScript a suitable and effective choice amongst other scripting languages.

I hope you will enjoy the TypeScript while developing your web app. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Take our Typescript skill challenge to evaluate yourself!

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET FREE CHALLENGE