TypeScript Tutorial: Building a Simple Web-Based Calculator

Written by

learnmodernjavascript

in

In the world of web development, creating interactive applications is a fundamental skill. One of the most common and essential tools we use daily is a calculator. In this tutorial, we’ll dive into building a simple web-based calculator using TypeScript. This project provides a practical way to learn TypeScript fundamentals while creating something useful. We’ll cover everything from setting up your development environment to handling user input and performing calculations. By the end, you’ll have a functional calculator and a solid understanding of how TypeScript can enhance your web development projects.

Why TypeScript for a Calculator?

TypeScript, a superset of JavaScript, brings static typing to your code. This means you can catch errors during development, before they reach your users. For a calculator, this is particularly beneficial. Consider the following advantages:

  • Early Error Detection: TypeScript helps identify type-related errors as you write code, preventing unexpected behavior.
  • Improved Code Readability: Type annotations make your code easier to understand and maintain.
  • Enhanced Refactoring: TypeScript makes it easier to refactor your code with confidence.
  • Better Tooling: IDEs provide better autocompletion and suggestions, improving your productivity.

Setting Up Your Development Environment

Before we start coding, we need to set up our development environment. Here’s what you’ll need:

  • Node.js and npm: Install Node.js, which includes npm (Node Package Manager). You can download it from nodejs.org.
  • TypeScript Compiler: Install the TypeScript compiler globally using npm: npm install -g typescript.
  • Text Editor or IDE: Choose your preferred text editor or IDE (Visual Studio Code, Sublime Text, Atom, etc.).
  • Basic HTML and CSS knowledge: While not strictly required, familiarity with HTML and CSS will help you create the calculator’s user interface.

Project Structure

Let’s create a simple project structure:

calculator-app/
├── index.html
├── src/
│   └── calculator.ts
├── styles.css
├── tsconfig.json
└── package.json

Create these files and folders in your project directory.

Creating the HTML (index.html)

Let’s create the basic HTML structure for our calculator. This includes the display area and the calculator buttons. Add the following code to index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" readonly>
        <div class="buttons">
            <button class="operator" data-value="+">+</button>
            <button class="operator" data-value="-">-</button>
            <button class="operator" data-value="*">*</button>
            <button class="operator" data-value="/">/</button>
            <button data-value="7">7</button>
            <button data-value="8">8</button>
            <button data-value="9">9</button>
            <button data-value="4">4</button>
            <button data-value="5">5</button>
            <button data-value="6">6</button>
            <button data-value="1">1</button>
            <button data-value="2">2</button>
            <button data-value="3">3</button>
            <button data-value="0">0</button>
            <button data-value=".">.</button>
            <button id="clear">C</button>
            <button id="equals">=</button>
        </div>
    </div>
    <script src="./src/calculator.js"></script>
</body>
</html>

This HTML provides the basic structure. The input field with the id “display” will show the calculations. The buttons have data-value attributes to store their respective values. The script tag at the end links our TypeScript code to the HTML.

Styling with CSS (styles.css)

Let’s add some basic CSS styling to make the calculator visually appealing. Add the following code to styles.css:

.calculator {
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin: 20px auto;
    background-color: #f9f9f9;
}

#display {
    width: 100%;
    padding: 10px;
    font-size: 1.5em;
    text-align: right;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

button {
    padding: 10px;
    font-size: 1.2em;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #eee;
    cursor: pointer;
}

button:hover {
    background-color: #ddd;
}

#equals {
    grid-column: span 2;
    background-color: #4CAF50;
    color: white;
}

#clear {
    background-color: #f44336;
    color: white;
}

This CSS styles the calculator’s appearance, including the layout, display, and buttons.

Configuring TypeScript (tsconfig.json)

The tsconfig.json file configures the TypeScript compiler. Create this file in the root directory and add the following content:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es6",
    "outDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

This configuration specifies that the TypeScript compiler should target ES5, use ES6 modules, output the compiled JavaScript to the src directory, and enable strict type checking.

Writing the TypeScript Code (calculator.ts)

Now, let’s write the core TypeScript logic for our calculator. Open src/calculator.ts and add the following code:


// Define the calculator class
class Calculator {
    private display: HTMLInputElement;
    private currentInput: string = '';
    private operator: string | null = null;
    private firstOperand: number | null = null;

    constructor() {
        this.display = document.getElementById('display') as HTMLInputElement;
        this.addEventListeners();
    }

    // Add event listeners to the buttons
    private addEventListeners(): void {
        const buttons = document.querySelector('.buttons') as HTMLDivElement;
        buttons.addEventListener('click', (event: MouseEvent) => {
            const target = event.target as HTMLButtonElement;
            if (!target.matches('button')) return;

            const value = target.dataset.value;

            if (value) {
                this.handleInput(value);
            }
        });

        const clearButton = document.getElementById('clear') as HTMLButtonElement;
        clearButton.addEventListener('click', () => this.clear());

        const equalsButton = document.getElementById('equals') as HTMLButtonElement;
        equalsButton.addEventListener('click', () => this.calculate());
    }

    // Handle input from the buttons
    private handleInput(value: string): void {
        if (/[0-9.]/.test(value)) {
            this.currentInput += value;
            this.updateDisplay();
        } else if (['+', '-', '*', '/'].includes(value)) {
            this.setOperator(value);
        }
    }

    // Set the operator
    private setOperator(operator: string): void {
        if (this.currentInput) {
            this.firstOperand = parseFloat(this.currentInput);
            this.operator = operator;
            this.currentInput = '';
        }
    }

    // Calculate the result
    private calculate(): void {
        if (this.operator && this.firstOperand !== null && this.currentInput) {
            const secondOperand = parseFloat(this.currentInput);
            let result: number;

            switch (this.operator) {
                case '+':
                    result = this.firstOperand + secondOperand;
                    break;
                case '-':
                    result = this.firstOperand - secondOperand;
                    break;
                case '*':
                    result = this.firstOperand * secondOperand;
                    break;
                case '/':
                    result = this.firstOperand / secondOperand;
                    break;
                default:
                    return;
            }

            this.display.value = result.toString();
            this.currentInput = result.toString();
            this.operator = null;
            this.firstOperand = null;
        }
    }

    // Clear the display and reset the calculator
    private clear(): void {
        this.currentInput = '';
        this.operator = null;
        this.firstOperand = null;
        this.display.value = '';
    }

    // Update the display with the current input
    private updateDisplay(): void {
        this.display.value = this.currentInput;
    }
}

// Create a new calculator instance
const calculator = new Calculator();

Let’s break down this code:

  • Calculator Class: This class encapsulates the calculator’s logic and state.
  • Properties:
    • display: HTMLInputElement: Represents the display input field.
    • currentInput: string: Stores the current number being entered.
    • operator: string | null: Stores the selected operator (+, -, *, /).
    • firstOperand: number | null: Stores the first number for calculation.
  • Constructor: Initializes the display element and adds event listeners to the buttons.
  • addEventListeners(): Adds event listeners for button clicks, clear button, and equals button.
  • handleInput(value: string): Handles the input from the buttons. It distinguishes between numbers, decimal points, and operators.
  • setOperator(operator: string): Sets the selected operator and stores the first operand.
  • calculate(): Performs the calculation based on the selected operator and operands.
  • clear(): Clears the display and resets the calculator.
  • updateDisplay(): Updates the display with the current input.

Compiling and Running the Code

To compile the TypeScript code, run the following command in your terminal within the project directory:

tsc

This command will compile the calculator.ts file and create a corresponding calculator.js file in the src directory. Now, open index.html in your browser. You should see the calculator interface. You can now interact with the calculator, enter numbers, perform calculations, and clear the display.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them when building a calculator in TypeScript:

  • Incorrect Type Annotations:
    • Mistake: Using the wrong type annotations (e.g., using string when you need number).
    • Fix: Carefully consider the data types of your variables. For example, use number for numeric values and string for text input.
  • Uninitialized Variables:
    • Mistake: Not initializing variables before using them, which can lead to unexpected behavior.
    • Fix: Initialize variables with appropriate default values. For example, initialize currentInput to an empty string ('') and firstOperand to null.
  • Event Listener Issues:
    • Mistake: Not correctly attaching event listeners to the buttons.
    • Fix: Ensure your event listeners are correctly attached to the buttons and that the event handler functions are properly defined. Use addEventListener and make sure the handler functions are correctly bound to the calculator instance.
  • Incorrect Calculation Logic:
    • Mistake: Errors in the calculation logic (e.g., incorrect order of operations, division by zero).
    • Fix: Carefully review your calculation logic. Use a switch statement or conditional statements to handle different operators. Implement checks for division by zero to prevent errors.
  • Display Updates:
    • Mistake: Display not updating correctly.
    • Fix: Make sure you call updateDisplay() after every change to the currentInput.

Key Takeaways

  • TypeScript Fundamentals: You’ve learned about classes, variables, functions, and event listeners in TypeScript.
  • Type Annotations: You’ve seen how type annotations can improve code quality and prevent errors.
  • DOM Manipulation: You’ve learned how to interact with HTML elements using TypeScript.
  • Event Handling: You’ve implemented event listeners to handle user interactions.
  • Project Structure: You’ve created a basic project structure for your calculator application.

FAQ

Here are some frequently asked questions about building a calculator in TypeScript:

  1. Can I add more complex functions like square root or trigonometric functions?

    Yes, you can extend the calculator by adding more buttons and functions to handle more complex operations. You’ll need to add event listeners for these new buttons and implement the corresponding calculation logic in your calculate() function.

  2. How can I handle errors like division by zero?

    You can add a check in your calculate() function to prevent division by zero. If the user tries to divide by zero, you can display an error message in the display or prevent the calculation from happening.

  3. How do I make the calculator responsive?

    You can use CSS media queries to make your calculator responsive. This will allow the calculator to adapt to different screen sizes and devices.

  4. Can I use a framework like React or Angular to build this calculator?

    Yes, you can. Frameworks like React or Angular can simplify the process of building user interfaces and managing the calculator’s state. However, the core logic of the calculator (handling input, performing calculations) will remain the same.

Building a calculator in TypeScript offers a great way to learn and practice fundamental programming concepts. From understanding variable types to event handling and DOM manipulation, you’ve taken a significant step toward becoming proficient in web development. As you continue to build and experiment, remember that practice is key. Try adding more features to your calculator, like memory functions, scientific operations, or a history of calculations. These challenges will not only sharpen your skills but also deepen your appreciation for TypeScript’s capabilities and how it can make your code more robust, readable, and maintainable. Embrace the iterative process of learning, and enjoy the journey of creating functional, interactive web applications.

More posts