Perform Square Function In TypeScript

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.

Up Next
    Ebook Download
    View all

    Test

    Read by 16 people
    Download Now!
    Learn
    View all