TypeScript Introduction Tutorial

TypeScript Introduction Tutorial

We will discuss…

• What is TypeScript? 
• Why you should use TypeScript ?
• TypeScript Benefits
• How to install TypeScript ?
• TypeScript with Example
• Difference between TypeScript and JavaScript
• Disadvantages of TypeScript

What is TypeScript

• TypeScript is an open-source, strongly typed, object oriented programming language; developed and maintained by Microsoft.
• TypeScript is a superset of JavaScript and TypeScript code is written in a file with .ts extension
• TypeScript may be used to develop large JavaScript applications for both client-side and server-side execution (as with Node.js or Deno).
• There are multiple options available for trans-compilation. We can use by default, TypeScript Checker can be used.
• The TypeScript compiler (tsc) is itself written in TypeScript and it can be executed on any browser, any host, and any Operating System.

More about TypeScript

• TypeScript was launched in Oct 2012 (at version 0.8), after two years of internal development at Microsoft and current version 3.8 Feb 2020.
• TypeScript originated from the shortcomings of JavaScript for the development of large-scale applications.
• TypeScript is included as a first-class programming language like C# or Java in Microsoft Visual Studio 2013 Update 2.  
• Supported editors like Visual Studio, Visual Studio Code, Nova, Atom, Sublime Text, Emacs, Vim, WebStorm and Eclipse.

Why we should use TypeScript
TypeScript is a language extension that adds features to ECMAScript 6. Additional features include:

• Cross-Platform: Because it can be executed on any browsers, devices and operating systems. It can be run in any environment where JavaScript runs on.
• Object-Oriented Language: Features like Classes, Interfaces, and Modules. Thus, we can write object-oriented code for client-side as well as server-side development. Enumerated types, Generics, Namespaces, Tuples, Async/await.
• Static type-checking: TypeScript uses static typing and helps type checking at compile time. So that, you can check errors while writing the code without running the TS.
• Type inference : TypeScript makes typing a bit easier and a lot less explicit by the usage of type inference. Even if you don’t explicitly type the types, they are still there to save you from doing something which otherwise would result in a run-time error.
• JS is TS: The code written in JS with valid .js extension can be converted to TS by changing the extension from .js to .ts and compiled with other TS files.
• DOM Manipulation: Manipulate the DOM by adding or removing elements.
• The code written in TypeScript is compiled and converted into its JavaScript equivalent for the execution. This process is known as Trans-piled. 

Benefits of using TypeScript

• TypeScript is fast, simple, easy to learn and runs on any browser or JavaScript engine.
• It is similar to JavaScript and uses the same syntax and semantics.
• This helps server side developers to write front-end code faster.
• You can call the TypeScript code from an existing JavaScript code. 
• It works with existing JavaScript frameworks and libraries without any issues.
• TypeScript adds type support to JavaScript.

Install TypeScript

There are two main ways to install TypeScript tools such as:

• Via npm (Node.js Package Manager) command-line tool
• npm install -g typescript

By installing TypeScript via Visual Studio.

• If you use Visual Studio or VS Code IDE, the easiest way to add to Visual Studio or VS Code is to search and add a package or download from the TypeScript website. 

Run the compiler via tsc

• npx tsc

TypeScript with Example
Command tsc <filename>.ts compiles the TypeScript code into a plain JavaScript file.
In JavaScript, we declare any variable in the following way:

• Var setValue=" ";

But in TypeScript, the declaration is done in the following way:

• AccessModifier Property/Variable Name Colon(:) dataType

Example:

• var name:string = “Sam";
• var empid:number = 701;
• console.log("name:"+name)
• console.log("emp id:"+empid)

On compiling, it will generate following JavaScript code: //Generated by typescript

• var name = “Sam";
• var empid = 701;
• console.log("name:" + name);
• console.log("emp id:" + empid);

Output:

• name:Sam
• employee id:701

Difference between TS and JS

Disadvantage of TS over JS

• TypeScript takes a long time to compile the code because conversion is there behind the scene.
• No support abstract classes.
• If we run the TypeScript application in the browser, a compilation step is always required to transform TS into JS.

Good Luck!