ARTICLE

Perform Square Function In TypeScript

Posted by Richa Garg Articles | TypeScript October 12, 2012
In this article I will explain how to perform the various operation on Square.
Reader Level:

Introduction

Today I am going to explain how to perform various operations on Square. A square has a four equal sides and four equal angles (which are of 90 degrees). The operations I discuss here are for determining the:

Area of a Square
Parameter of a Square
Diagonal value of the Square

The area of the square is calculated by multiplying the side of the square by its own side. The parameter is calculated by multiplying the side by 4.

Area= Side * Side
Parameter = 4 * Side
Diagonal = Squart_Root ( Side * Side + Side* Side)

To see how I implement this concept in TypeScript using a class we use the following steps:

Step 1

Open Visual Studio 2012 and click "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

Open the app.ts file and write the TypeScript code as:

class Square_Side {

    x: number;

    constructor (x: number) {

        this.x = x;

    }

    AreaOfSquare() {

        return this.x * this.x;

    }

    ParameterOfSquare() {

        return 4 * this.x;

    }

    DiagonalOfSquare() {

        return Math.sqrt(this.x * this.x + this.x + this.x);

    }

}

var side = new Square_Side(5);

var area = side.AreaOfSquare();

var parameter = side.ParameterOfSquare();

var diagonal = side.DiagonalOfSquare();

alert("The side of the Square is : 5");

alert("The Area of the Square is :" + area);

alert("The parameter of the Square is :" + parameter);

alert("The Diagonal of the Square is :" + diagonal);

Step 4

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

var Square_Side = (function () {

    function Square_Side(x) {

        this.x = x;

    }

    Square_Side.prototype.AreaOfSquare = function () {

        return this.x * this.x;

    };

    Square_Side.prototype.ParameterOfSquare = function () {

        return 4 * this.x;

    };

    Square_Side.prototype.DiagonalOfSquare = function () {

        return Math.sqrt(this.x * this.x + this.x + this.x);

    };

    return Square_Side;

})();

var side = new Square_Side(5);

var area = side.AreaOfSquare();

var parameter = side.ParameterOfSquare();

var diagonal = side.DiagonalOfSquare();

alert("The side of the Square is : 5");

alert("The Area of the Square is :" + area);

alert("The parameter of the Square is :" + parameter);

alert("The diagonal of the Square is :" + diagonal);

Step 5

Open the default.htm file and write the HTML code in it 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>Square Function</h1>

    <div id="content">

        <script src="app.js"></script>

    </div>

</body>

</html>

Step 6

Now run the application; the output will look like:

Side-of-Square-In-typwscript.jpg

Area-of-square-in-Typescript.jpg

parameter-of-square-in-Typescript.jpg

diagonal-of-square-in-typescript.jpg

Summary

In this article I explained how to find the area, parameter and diagonal value of a square using TypeScript.

COMMENT USING

Trending up