TypeScript Rect Component

Introduction

In this article, we will explore how to create a Rect component using TypeScript. TypeScript is a statically typed superset of JavaScript that adds optional types to the language. It provides better tooling and code completion, making it easier to develop and maintain large-scale applications.

A Rect component is a simple rectangular shape that can be rendered on a web page. It can have a specific width, height, background color, and border. We will use TypeScript to define the component and its properties, and then use it in our web application.

Setting Up the Environment

Before we begin, let's make sure we have a TypeScript development environment set up. We will need Node.js and npm installed on our machine. Open a terminal or command prompt and run the following commands to install the necessary dependencies:

npm install -g typescript

This will install TypeScript globally on your machine. You can verify the installation by running tsc --version in your terminal.

Creating the Rect Component

We will start by creating a new TypeScript file called Rect.ts. Inside this file, we will define a class called Rect that represents our Rect component. Here is the code for our Rect component:

class Rect {
  private width: number;
  private height: number;
  private color: string;
  private border: string;

  constructor(width: number, height: number, color: string, border: string) {
    this.width = width;
    this.height = height;
    this.color = color;
    this.border = border;
  }

  public render(): void {
    const rectElement = document.createElement("div");
    rectElement.style.width = `${this.width}px`;
    rectElement.style.height = `${this.height}px`;
    rectElement.style.backgroundColor = this.color;
    rectElement.style.border = this.border;
    document.body.appendChild(rectElement);
  }
}

The Rect class has private properties for width, height, color, and border. We pass these properties to the constructor when creating a new instance of the Rect component. The render method creates a new div element, sets its style properties using the component's properties, and appends it to the body of the web page.

Using the Rect Component

Now that we have defined our Rect component, let's use it in our web application. Create a new HTML file called index.html and include the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rect Component Example</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
  </style>
</head>
<body>
  <script src="index.js"></script>
</body>
</html>

In the same directory, create a new JavaScript file called index.js and include the following code:

const rect = new Rect(200, 100, "red", "2px solid black");
rect.render();

This code creates a new instance of the Rect component with a width of 200 pixels, height of 100 pixels, red background color, and a 2 pixel solid black border. It then calls the render method to display the Rect component on the web page.

To compile the TypeScript code to JavaScript, open a terminal or command prompt and navigate to the directory containing the Rect.ts file. Run the following command:

tsc Rect.ts

This will compile the TypeScript code to JavaScript and generate a new file called Rect.js. Open the index.html file in a web browser, and you should see the Rect component displayed on the page.

Conclusion

In this article, we learned how to create a Rect component using TypeScript. We defined a Rect class with properties for width, height, color, and border, and a render method that creates and displays the Rect component on a web page. We then used the Rect component in our web application by creating a new instance and calling the render method. TypeScript provides type checking and tooling support, making it easier to develop and maintain complex applications.