Monday, 29 May 2017

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

      No comments   


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>

Sunday, 28 May 2017

Type Script Over Java Script With Example

      No comments   


Introduction
In this article we will learn why TypeScript? Why Typescript become more famous and how can the TypeScript different from JabvaScript. What is the basic difference in syntax's of both languages. Should we follow TypeScript or JavaScript.

Previous Updates

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

 Why JavaScript Complicated For OOP Based Developers
JavaScript is most famous language in 2017. All browsers compatible and easy to learn. But if you are new in javascript then it is ok but if you came across the object oriented field then it will create some complexity to you

 If you have to create a class in JavaScript then you create a Function sounds unusual to Object Oriented background developer ,also  if you need to create properties then you can define this with this keyword and if you want to create a function then you can achieve this differently in JavaScript.  Below Example

<script >
    function Employee()                            // Employee Class
    { 
        this.EmpId = "";                                // Property
        this.EmpName = "";
        this.ValidateEmp = function ()          //Function with in Class
                {
                    alert('Validate Successfully.')
                }
    }
</script>

So if you are Coming from Object Oriented background and when you first look the above code you will be confused what is that ? for reduce this JavaScript complexity Micorosoft invented the TypeScript for Object oriented developers to feel them cool while writing code.

 TypeScript says that it will very difficult to grasp the all concept of JavaScript so that i will provide you ability to write your class properties methods as you written in C# or Java(Object Oriented Programming) and it will compiled your TypeScriptCode into a plane JavaScriptFile. Below Example
class Employee
{
    public EmpName: string = "";
 }


When we save this type script file it will autometic generate a js file with same name and create a Javascript cocde for above given TypeScript Code.


Here you can easily saw how easy type script is which creates javascript code file for you automatically.
In this next Update we will learn how to done programming with TypeScript from Scratch. Keep reading keep sharing. Happy Programming.


Tuesday, 23 May 2017

Introduction About TypeScript Programming

      No comments   


Introduction
In this article we will learn what is Typescript? Why TypeScript is so popular among developers? Why Microsoft launch TypeScript if he already have C# ? Why TypeScript is different from JavaScript? What is some advancement in TypeScript comparison to javascript.

 Previous Updates
In previous articles we have learnt AngularJS basics, Difference IEnumerabe vs IQueryable  Difference between Row_Number(), Rank(), Rank_Density() with example. Const Readonly and Static difference in C#,  Best basic C# interview questions.

What Is TypeScript
Type Script is a kind of language which compiles to a plain JavaScript code. As per TypeScript official Site TypeScript is a typed Superset of JavaScript  that compiles to Plain javascript.
TypeScript allows you to write JavaScript the way you really want to write. IT is a pure Object oriented with interface , class , methods , inheritance. Most popular Angular 2.0 is written in TypeScript.

Special About TypeScript
C# and Java developers who use JavaScripts for a client side code and face difficulties to use it. Because they are from OOPs Object Oriented  background, and all have their concepts of working with classes , objects, interface , inheritance and all. Type SCript allows you to create your own class , property and inheritance.

How To Use/Install TypeScript In VisualStudio
In order to get type Script just go through the link of TypeScripts official site  and download it. You can select your VS version for downloading the setup of TS file. And also you can install it using Node command prompt. 

 Benefits Of Using TypeScript


Java script is good to work with and you are wonder about that do I really need to learn  TypeScript. Most of the time know. But using TypeScript has many benefits.
  • Code written in TypeScript is easier and easy to Debug due to its static typing.
  • It is Object Oriented Programming language.
  • TypeScript has a compilation step to JavaScript that catches all kinds of errors before they reach runtime and break something.
  •  TypeScript support type definitions for existing JavaScript libraries. You write type definitions in .d.ts file extension.
  • Most developer wants to learn this because Angular 2 framework is written in TypeScript.


 TypeScript is Developed and maintain by the Microsoft. As we all knew C# is also Microsoft developed language and it follows Object oriented concepts and JavaScript is different from OOP fundamental that why Microsoft launches the TypeScript for the better understanding for C# and Java developers using class, inheritance , interface and properties with TypeScript language.


Facebook Updates

Guruji Point

About Us

This blog is about the Programming ,Tech News and some intresting facts related Contents. Here you can find fundamental and expert level topic of programming languages very practically related to C# , Asp.Net ,Sql-Server, JavaScript, Jquery, WebServices And also Web-Api, WCF ,WPF, Angular Js.

Contact Us

Email Us - gurujipoints@gmail.com
Contact- 8077657477

Reach Us