Reader Level:
ARTICLE

Inheritance Using TypeScript

Posted by Vijay Prativadi Articles | TypeScript October 15, 2012
Today, in this article let’s play around with one of the interesting and most useful concepts in TypeScript.
  • 0
  • 0
  • 2289

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.

COMMENT USING

Trending up