Monday, 29 May 2017

Start With Type Script From Scratch (Class, Property, Functions, Inheritance In TypeScript)


Introduction
In this article we will learn programming with TypeScript from basic. How to use inheritance in TypeScript . How to use class and properties in typescript and use them through JavaScript.

Previous Updates

In previous articles we have learnt what is TypeScript and How to Install this on VS2015 , TypeScript Over JavaScript , .AngularJS basics, Difference IEnumerabe vs IQueryable. What is Cursor in sql and use of cursor.  Best basic C# interview questions.


Practice With TypeScript

 Open VisualStudio and Goto   File =>> New ==>> Project  And Give your Project a suitable Name. In my case Name is TypeScriptDemo.

Now Goto SolutionExplorar ==>> Add ==>> TypeScript . And give this Typescript file a name and click OK.
Now define a class and ts properties just like you always done with C#. 

After save this TypeScript file code visual studio automatic creates a same name Javascript file for you . and all your typed TypeScript code converted to simple JavaScript code .
If you are not able to find newly automatic created Javascript file then please click on Show All Files icon , highlighted in below image.


Now Add a simple HTML page and use this script file reference there just like you did with your JavaScript file.

Here is My TypeScript Code
class Employee
{
    public EmpName: string = "";

    Salary(Basic: number, Charges: number): number {
        alert("Salary Called");
        return Basic + Charges;
    }
 }

After Compiled auto created Plain JavaScript Code

 
var Employee = (function () {
    function Employee() {
        this.EmpName = "";
    }
    Employee.prototype.Salary = function (Basic, Charges) {
        alert("Salary Called");
        return Basic + Charges;
    };
    return Employee;
}());
//# sourceMappingURL=TypeScriptExp.js.map

Here is The HTML Page After using JS file reference

<!DOCTYPE html>
<html>
<head>
    <title></title>
        <meta charset="utf-8" />
</head>
<script src="TypeScriptExp.js"></script>
<body>
    <script>
        var emp = new Employee();
        emp.EmpName = "Nicks";
        alert(emp.EmpName);
        var salary = emp.Salary(10000, 150000);
        alert(salary);
    </script>
</body>
</html>

After run this page Output will be displayed in Alert message. First it will display       alert(emp.EmpName) then Salary function will call and display   alert("Salary Called") and in last after executing the salary function come back to the HTML and display Salary sum in alert.

This is the Simple Class Property and Function example with Type Script . Now we discuss Inheritance concept with typeScript.

Inheritance With TypeScript

When a class inherits or takes properties and features of other class ,it called Inheritance. 
We can use inheritance in TypeScript same like Object oriented Programming but a smaller change is that here it uses extends for Inheritance and in C# we used colon ( : ) for this.

Inheritance example with TypeScript :-  

class Employee
{
    public EmpName: string = "";
 
    Salary(Basic: number, Charges: number): number {
        alert("Salary Called");
        return Basic + Charges;
    }
}
 
class PayrollEmployee extends Employee {
    PayrollSalary(Basic: number, Charges: number): number {
        alert("Payroll Salary Called");
        return Basic + Charges;
    }
}

Press save after performing any change in .ts file . It will reflect all changes directly in .js file which looks like 
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Employee = (function () {
    function Employee() {
        this.EmpName = "";
    }
    Employee.prototype.Salary = function (Basic, Charges) {
        alert("Salary Called");
        return Basic + Charges;
    };
    return Employee;
}());
var PayrollEmployee = (function (_super) {
    __extends(PayrollEmployee, _super);
    function PayrollEmployee() {
        _super.apply(this, arguments);
    }
    PayrollEmployee.prototype.PayrollSalary = function (Basic, Charges) {
        alert("Payroll Salary Called");
        return Basic + Charges;
    };
    return PayrollEmployee;
}(Employee));
 

Now in HTML form call all the TypeScript class and methods .
<!DOCTYPE html>
<html>
<head>
    <title></title>
        <meta charset="utf-8" />
</head>
<script src="TypeScriptExp.js"></script>
<body>
    <script>
        var emp = new Employee();
        var salary = emp.Salary(10000, 150000);
 
        //Inheritance Class
        emp = new PayrollEmployee();
        emp.PayrollSalary(5000, 1500);
        emp.Salary(12000, 15000);
    </script>
</body>
</html>

No comments:

Post a Comment