TypeScript for beginners!

What is TypeScript?

• Typescript is a superset of JavaScript.
• It is opensource language, which is developed and maintained by Microsoft.
• It’s a strict syntactical JavaScript.
• It adds optional static type declaration.
• It helps us to write more complex functionality in JavaScript.
• It compiles to more readable, cleaner JavaScript.

Why TypeScript?

We have a below benefits of TypeScript:

• Static type declaration:
  • Type constraints, ie: Number, Boolean, String.
  • Variables, Parameters, Return types.
• Organization of code:
  • It makes easier to organize large code base.
  • Can use Classes, Interfaces, Modules, Namespaces.
• TypeScript compiles to all version of JavaScript code.
• Tooling:
  • Running, Testing, Debugging.
  • Static analysis, Instant errors, detect unused/unreachable code, source maps etc..

Working with TypeScript.

To install TypeScript, Just need to couple of commands as below.

Assuming that node is already installed, if not installed please download and install node (Click here to download) prior to start installing TypeScript.

To confirm you have node & npm installed, please run below commands:

node -v
npm -v

It should show as below:

Run below command to install TypeScript:

npm install -g typescript

I got an error while running above command as I am using Mac and don’t have sufficient permissions.

So I switched to root user with sudo su and run npm install -g trypescript again.   

I have installed typescript in my machine successfully. To confirm the installation. Just run the following command and should see the output as below screenshot.

tsc

Just to know what is installed version of TypeScript. Run below command.

tsc -v

Great ! done with the installation.

Create your first TypeScript file?

Run below command to create your typescript configuration file. It will be taken while your TypeScript file compilation.

tsc --init

If you just open and see tsconfig.json file then you will find many options related to compilation. All of them will be configured as per your project setup & configurations.

Now you create a file called demo.ts in the same folder tsconfig.json is created. And define couple of variables and User class in it as below.

let message: string = "Welcome to Tekgarner !"; //Declare message string and assigning some default value to it.

let evenNumbers: number[] = [2, 4, 6]; //Declare evenNumbers array and assigning some default values to it.

//Define User Class, which is having one userName property and getUserName method.
class User{
    userName: string;
    constructor(uName: string){
        this.userName = uName;
    }

    getUserName(){
        console.log("User Name is set to :"+this.userName);
    }
}

save above code in demo.ts and run below command:

tsc demo.js

Now you will see demo.js is created in the same folder with below code snippet.

var message = "Welcome to Tekgarner !"; //Declare message string and assigning some default value to it.
var evenNumbers = [2, 4, 6]; //Declare evenNumbers array and assigning some default values to it.
//Define User Class, which is having one userName property and getUserName method.
var User = /** @class */ (function () {
    function User(uName) {
        this.userName = uName;
    }
    User.prototype.getUserName = function () {
        console.log("User Name is set to :" + this.userName);
    };
    return User;
}());

As you observed above code compilation changes, TypeScript is compiled to ES5 standard JavaScript which is compatible and execute in all browsers.

Conclusion:

In the above artcle you have seen just a overview of TypeScript. Now you should be able to understand What & Why is TypeScript?

Hope it helps for TypeScript beginners, Thanks for reading !