Introduction

Today, in this article let's play around with one of the interesting and most useful concepts in TypeScript, arithmetic operations.
Question: What are the arithmetic operations using TypeScript?
In simple terms "It enables arithmetic operations to be performed using the TypeScript language.".
Step 1: Create a new TypeScript project in Visual Studio.
html-application-with-typescript.gif
Step 2: The complete code of app.ts looks like this:
  1. class Arthmetic implements IAddition {
  2. public Add(a: number, b: number): number {
  3. return a + b;
  4. }
  5. public Sub(a: number, b: number): number {
  6. return a - b;
  7. }
  8. public Mul(a: number, b: number): number {
  9. return a * b;
  10. }
  11. public Div(a: number, b: number): number {
  12. return a / b;
  13. }
  14. }
  15. interface IAddition {
  16. Add(a: number, b: number): number;
  17. Sub(a: number, b: number): number;
  18. Mul(a: number, b: number): number;
  19. Div(a: number, b: number): number;
  20. }
  21. function arthemticAdd(arthmetic: Arthmetic) {
  22. return "Addition Result of 20 and 10 is: " + arthmetic.Add(20, 10);
  23. }
  24. function arthemticSub(arthmetic: Arthmetic) {
  25. return "Substraction Result of 20 and 10 is: " + arthmetic.Sub(20, 10);
  26. }
  27. function arthemticMul(arthmetic: Arthmetic) {
  28. return "Multiplication Result of 20 and 10 is: " + arthmetic.Mul(20, 10);
  29. }
  30. function arthemticDiv(arthmetic: Arthmetic) {
  31. return "Division Result of 20 and 10 is: " + arthmetic.Div(20, 10);
  32. }
  33. var objArthmetic = new Arthmetic();
  34. alert(arthemticAdd(objArthmetic));
  35. alert(arthemticSub(objArthmetic));
  36. alert(arthemticMul(objArthmetic));
  37. alert(arthemticDiv(objArthmetic));
  38. }
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>Arithmetic TypeScript App</title>
  7. <link rel="stylesheet" href="app.css" type="text/css" />
  8. </head>
  9. <body>
  10. <h1 style="text-align: center">
  11. Arithmetic TypeScript App</h1>
  12. <div id="content">
  13. <script src="app.js"></script>
  14. </div>
  15. </body>
  16. </html>
Step 4: The addition operation output of the application looks like this:
arithmetic-typescript-app.png
Step 5: The subtraction operation output of the application looks like this:
arithmetic-typescript-app1.png
Step 6: The multiplication operation output of the application looks like this:
arithmetic-typescript-app2.png
Step 7: The division operation output of the application looks like this:
arithmetic-typescript-app3.png
I hope this article is useful to you. I look forward to your comments and feedback. Thanks, Vijay Prativadi