Introduction
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.



Join the conversation! Your thoughts help the community grow.