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:
  1. class Addition {
  2. public Add(a: number, b: number): number {
  3. return a + b;
  4. }
  5. }
  6. class Substraction extends Addition {
  7. public Sub(a: number, b: number): number {
  8. return a - b;
  9. }
  10. }
  11. class Multiplication extends Substraction {
  12. public Mul(a: number, b: number): number {
  13. return a * b;
  14. }
  15. }
  16. class Division extends Multiplication {
  17. public Div(a: number, b: number): number {
  18. return a / b;
  19. }
  20. }
  21. var objDivision = new Division();
  22. alert("Addition Result is: " + objDivision.Add(10, 20));
  23. alert("Substraction Result is: " + objDivision.Sub(20, 10));
  24. alert("Multiplication Result is: " + objDivision.Mul(10, 20));
  25. alert("Division Result is: " + objDivision.Div(10, 20));
Step 3: The complete code of default.htm looks like this:
  1. <!DOCTYPE html>
  2. <html lang="en"
  3. xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta charset="utf-8" />
  6. <title>Inheritance Using TypeScript</title>
  7. <link rel="stylesheet" href="app.css" type="text/css" />
  8. <script src="app.js"></script>
  9. </head>
  10. <body>
  11. <h1 style="text-align: center">
  13. Inheritance Using TypeScript</h1>
  14. <div id="content" />
  15. </body>
  16. </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 to you.