Area and Circumference of Circle Using TypeScript

Introduction

Today I am going to explain how to calculate the area and circumference of a circle using a class in TypeScript. Using this we can perform other types of calculations and generate the results. The area of the circle can be calculated by multiplying the Pi value that is 3.14 by the square of the radius of the circle, and the circumference can be calculated by multiplying the radius by Pi and 2.

Area of Circle= 3.14 * Radius * Radius

Circumference of Circle = 2 * 3.14 * Radius

Now in order to see how it works let's use the following steps.

Step 1

Open Visual Studio 2012 and click on "File" -> "New" -> "Project...".

Step 2

A window is opened; in it click HTML Application for TypeScript under Visual C# and give the name of your application then click ok.

Step 3

Write the following TypeScript code in the app.ts file:

class Circle {
Radius: number;
constructor(Radius: number) {
this.Radius = Radius;
}
AreaOfCircle() {
return 3.14 * this.Radius * this.Radius;
}
CircumferenceOfCircle() {
return 2 * 3.14 * this.Radius;
}
}
var circle = new Circle(5);
var area = circle.AreaOfCircle();
var circumference = circle.CircumferenceOfCircle();
alert("The Area of the Circle is :" + area);
alert("The circumference of the Circle is :" + circumference);

Step 4

Write the following JavaScript code in the app.js file:

var Circle = (function() {
function Circle(Radius) {
this.Radius = Radius;
}
Circle.prototype.AreaOfCircle = function() {
return 3.14 * this.Radius * this.Radius;
};
Circle.prototype.CircumferenceOfCircle = function() {
return 2 * 3.14 * this.Radius;
};
return Circle;
})();
var circle = new Circle(5);
var area = circle.AreaOfCircle();
var circumference = circle.CircumferenceOfCircle();
alert("The Area of the Circle is :" + area);
alert("The circumference of the Circle is :" + circumference);

Step 5

Open the default.htm file and write the code as:

<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
</head>
<body>
<h1>Circle Function</h1>
<div id="content">
<script src="app.js"></script>
</div>
</body>
</html>

Step 6

Now run the application and the output will look like:

Summary

In this article, I explained how to find the area and circumference of the circle using a class in TypeScript.