Reader Level:
Article

Inheritance Using TypeScript

By Vijay Prativadi on Oct 15, 2012
Today, in this article let’s play around with one of the interesting and most useful concepts in TypeScript.

Introduction

 

Today, in this article let's play around with one of the interesting and most useful concepts in TypeScript.

Question: What is inheritance in TypeScript?

In simple terms "It provides flexibility to perform inheritance using the TypeScript language".

Step 1: Create a new HTML with TypeScript project; see:
 

HTM-application-with-TypeScript.jpg

 

Step 2: The complete code of app.ts looks like this:

 

    class Addition

    {

        public Add(a: number, b: number): number

        {

        return a + b;

    }

}

class Substraction extends Addition

{

    public Sub(a: number, b: number):

    number

{

    return a - b;

}

}

    class Multiplication extends Substraction

{

        public Mul(a: number, b: number): number

    {

        return a * b;

    }

}

        class Division extends Multiplication

{

            public Div(a: number, b: number): number

        {

            return a / b;

        }

}

            var objDivision = new Division();

alert("Addition Result is: " + objDivision.Add(10, 20));

alert("Substraction Result is: " + objDivision.Sub(20, 10));

alert("Multiplication Result is: " + objDivision.Mul(10, 20));

alert("Division Result is: " + objDivision.Div(10, 20));

 

Step 3: The complete code of default.htm looks like this:

 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Inheritance Using TypeScript</title>

    <link rel="stylesheet" href="app.css" type="text/css" />

    <script src="app.js"></script>

</head>

<body>

    <h1 style="text-align: center">

        Inheritance Using TypeScript</h1>

    <div id="content" />

</body>

</html>

 

Step 4: The addition result output of the application looks like this:
 

Arithmetic-TypeScript-App.png

 

Step 5: The division result output of the application looks like this:

 App-Arithmetic-TypeScript.png

I hope this article is useful for you.

Vijay Prativadi

Hey Everyone, It's Vijay. I am SDE mostly up on Microsoft Technologies. If you are thinking to know what I do mostly when at work. I get a chance to work upon few Microsoft technologies. All the way along my core tech... Read more

COMMENT USING