Introduction
Today, in this article let's play around with one of the interesting and most useful concepts in TypeScript.
Question: What is 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; see:
![html-application-with-typescript.gif]()
Step 2: The complete code of app.ts looks like this:
class Arthmetic implements IAddition
{
public Add (a:number, b:number): number
{
return a + b;
}
public Sub (a:number, b:number): number
{
return a - b;
}
public Mul (a:number, b:number): number
{
return a * b;
}
public Div (a:number, b:number): number
{
return a / b;
}
}
interface IAddition
{
Add(a: number, b: number): number;
Sub(a: number, b: number): number;
Mul(a: number, b: number): number;
Div(a: number, b: number): number;}
function arthemticAdd(arthmetic: Arthmetic)
{
return "Addition Result of 20 and 10 is: " + arthmetic.Add(20, 10);
}
function arthemticSub(arthmetic: Arthmetic)
{
return "Substraction Result of 20 and 10 is: " + arthmetic.Sub(20, 10);
}
function arthemticMul(arthmetic: Arthmetic)
{
return "Multiplication Result of 20 and 10 is: " + arthmetic.Mul(20, 10);
}
function arthemticDiv(arthmetic: Arthmetic)
{
return "Division Result of 20 and 10 is: " + arthmetic.Div(20, 10);
}
var objArthmetic = new Arthmetic();
alert(arthemticAdd(objArthmetic));
alert(arthemticSub(objArthmetic));
alert(arthemticMul(objArthmetic));
alert(arthemticDiv(objArthmetic));
}
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>Arithmetic TypeScript App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
</head>
<body>
<h1 style="text-align: center">
Arithmetic TypeScript App</h1>
<div id="content">
<script src="app.js"></script>
</div>
</body>
</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 for you. I look forward for your comments and feedback. Thanks Vijay Prativadi