TypeScript Tutorial: Creating a Simple Web Application for a Basic Calculator

Written by

learnmodernjavascript

in

In today’s digital world, calculators are indispensable. From simple arithmetic to complex scientific calculations, they’re essential tools for everyday tasks. But have you ever considered building your own? This tutorial will guide you through creating a basic calculator web application using TypeScript, a powerful superset of JavaScript. We’ll break down the concepts, provide clear code examples, and walk you through the entire process, making it easy for beginners and intermediate developers to follow along and learn.

Why Build a Calculator with TypeScript?

While JavaScript can certainly handle this task, TypeScript offers several advantages:

  • Type Safety: TypeScript introduces static typing, which helps catch errors early in development. This leads to more robust and reliable code.
  • Improved Code Readability: Types make your code easier to understand and maintain.
  • Enhanced Development Experience: TypeScript provides better code completion, refactoring, and other features that improve developer productivity.

Building this calculator will not only teach you the fundamentals of TypeScript but also provide practical experience in web development.

Setting Up Your Development Environment

Before we dive into the code, let’s set up our development environment. You’ll need the following:

  • Node.js and npm (Node Package Manager): Used for managing project dependencies and running the development server. Download and install them from nodejs.org.
  • A Code Editor: Visual Studio Code (VS Code) is highly recommended due to its excellent TypeScript support.

Once you have these installed, create a new project directory for your calculator application. Open your terminal or command prompt and navigate to this directory. Then, initialize a new npm project using the following command:

npm init -y

This command creates a package.json file, which will store your project’s metadata and dependencies.

Installing TypeScript

Next, install TypeScript as a development dependency:

npm install --save-dev typescript

This command installs the TypeScript compiler (tsc) and saves it as a development dependency. Now, let’s initialize a TypeScript configuration file (tsconfig.json) in your project directory:

npx tsc --init

This command generates a tsconfig.json file with default settings. You can customize these settings to suit your project’s needs. For this tutorial, we can use the default settings, but it’s a good idea to understand some of the key options. Open tsconfig.json in your code editor. Here are a few settings you might want to adjust:

  • target: Specifies the JavaScript version to compile to (e.g., “ES5”, “ES6”, “ESNext”).
  • module: Specifies the module system to use (e.g., “commonjs”, “esnext”).
  • outDir: Specifies the output directory for the compiled JavaScript files (e.g., “./dist”).
  • sourceMap: Generates source map files for debugging.

For this tutorial, the default settings should be fine. However, you might want to change outDir to “./dist” to keep your compiled JavaScript separate from your TypeScript source files.

Creating the HTML Structure

Now, let’s create the basic HTML structure for our calculator. Create a file named index.html in your project directory. Add 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>TypeScript Calculator</title>
    <link rel="stylesheet" href="style.css"> <!-- Link to your CSS file -->
</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="./dist/script.js"></script> <!-- Link to your compiled JavaScript file -->
</body>
</html>

This HTML provides the basic structure of the calculator, including the display and the buttons. Note the following:

  • The <input> element with id="display" will be used to show the calculator’s input and output.
  • The <div class="buttons"> contains all the calculator buttons. Each button has a data-value attribute, which will store the value of the button.
  • The <script src="./dist/script.js"></script> tag links to our compiled JavaScript file. We’ll write the TypeScript code that compiles to this JavaScript file.

Styling the Calculator with CSS

To make the calculator look appealing, let’s add some basic CSS. Create a file named style.css in your project directory and add the following code:

.calculator {
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

#display {
    width: 100%;
    padding: 10px;
    font-size: 1.5em;
    text-align: right;
    border: none;
    background-color: #f4f4f4;
}

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

button {
    padding: 15px;
    font-size: 1.2em;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
}

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

.operator {
    background-color: #f0f0f0;
}

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

#equals {
    background-color: #007bff;
    color: white;
}

This CSS provides basic styling for the calculator, including the layout, button appearance, and display. You can customize the styles to your liking.

Writing the TypeScript Code

Now, let’s write the TypeScript code that will bring our calculator to life. Create a file named script.ts in your project directory. Add the following code:


// Get references to the HTML elements
const display = document.getElementById('display') as HTMLInputElement;
const buttons = document.querySelector('.buttons') as HTMLDivElement;

// Initialize variables
let currentInput = '';
let operator: string | null = null;
let firstOperand: number | null = null;
let shouldResetDisplay = false;

// Function to update the display
const updateDisplay = () => {
  if (display) {
    display.value = currentInput;
  }
};

// Function to handle number and decimal button clicks
const handleNumberClick = (value: string) => {
  if (shouldResetDisplay) {
    currentInput = value;
    shouldResetDisplay = false;
  } else {
    if (currentInput === '0' && value !== '.') {
      currentInput = value; // Replace leading zero
    } else {
      currentInput += value;
    }
  }
  updateDisplay();
};

// Function to handle operator button clicks
const handleOperatorClick = (op: string) => {
  if (currentInput === '') return;

  if (firstOperand !== null && operator !== null) {
    calculate();
  }

  firstOperand = parseFloat(currentInput);
  operator = op;
  shouldResetDisplay = true;
};

// Function to calculate the result
const calculate = () => {
  if (firstOperand === null || operator === null || currentInput === '') {
    return;
  }

  const secondOperand = parseFloat(currentInput);
  let result: number;

  switch (operator) {
    case '+':
      result = firstOperand + secondOperand;
      break;
    case '-':
      result = firstOperand - secondOperand;
      break;
    case '*':
      result = firstOperand * secondOperand;
      break;
    case '/':
      if (secondOperand === 0) {
        alert('Cannot divide by zero!');
        return;
      }
      result = firstOperand / secondOperand;
      break;
    default:
      return;
  }

  currentInput = result.toString();
  operator = null;
  firstOperand = null;
  shouldResetDisplay = true;
  updateDisplay();
};

// Function to clear the display and reset variables
const clearDisplay = () => {
  currentInput = '0';
  operator = null;
  firstOperand = null;
  shouldResetDisplay = false;
  updateDisplay();
};

// Add event listeners to the buttons
if (buttons) {
  buttons.addEventListener('click', (event: MouseEvent) => {
    const target = event.target as HTMLButtonElement;
    const value = target.dataset.value;

    if (!value) return;

    if (!isNaN(parseFloat(value)) || value === '.') {
      handleNumberClick(value);
    } else if (value === '+' || value === '-' || value === '*' || value === '/') {
      handleOperatorClick(value);
    } else if (value === '=') {
      calculate();
    } else if (value === 'C') {
      clearDisplay();
    }
  });
}

// Initialize the display
updateDisplay();

Let’s break down this code:

  • Getting references: We first get references to the display input and the buttons container from the HTML. The as HTMLInputElement and as HTMLDivElement are type assertions, which tell TypeScript the expected type of the elements.
  • Initializing variables: We initialize variables to store the current input, the selected operator, the first operand, and a flag to reset the display after an operation.
  • updateDisplay() function: This function updates the calculator’s display with the current input.
  • handleNumberClick() function: This function handles number and decimal button clicks. It appends the clicked number or decimal point to the currentInput. It also handles the leading zero and resets the display after an operation.
  • handleOperatorClick() function: This function handles operator button clicks. It stores the first operand and the selected operator. It also calls the calculate() function if there’s a previous calculation to perform.
  • calculate() function: This function performs the calculation based on the selected operator and operands. It uses a switch statement to handle the different operators. It also includes error handling for division by zero.
  • clearDisplay() function: This function clears the display and resets all variables to their initial state.
  • Event listeners: We add an event listener to the buttons container to handle button clicks. The event listener determines which button was clicked and calls the appropriate function (handleNumberClick(), handleOperatorClick(), calculate(), or clearDisplay()).
  • Initializing the display: Finally, we call updateDisplay() to initialize the display with the value ‘0’.

Compiling and Running the Application

Now that we have written the TypeScript code, we need to compile it into JavaScript. Open your terminal and navigate to your project directory. Then, run the following command:

tsc

This command will compile your script.ts file into a script.js file in the dist directory (or the directory specified by your outDir setting in tsconfig.json). After compilation, open index.html in your web browser. You should see the calculator interface. You can now interact with the calculator by clicking the buttons. The calculations should be performed correctly, and the result should be displayed.

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: Using incorrect type annotations can lead to unexpected behavior and errors. For example, if you declare a variable as string and try to perform mathematical operations on it, you’ll get incorrect results. Make sure to use the correct data types (number, string, boolean, etc.) and type assertions (as) when necessary.
  • Missing Event Listener: Forgetting to add event listeners to the buttons will prevent the calculator from responding to clicks. Ensure you’ve correctly selected the buttons and attached event listeners to them.
  • Incorrect Operator Precedence: The order of operations is crucial in calculations. Without proper handling of operator precedence, the calculator might produce incorrect results (e.g., performing addition before multiplication). You might need to implement a more advanced parsing logic to handle operator precedence correctly.
  • Division by Zero Error: Dividing by zero is mathematically undefined. You need to handle this error to prevent the calculator from crashing or producing unexpected results. Check for division by zero and display an appropriate error message to the user.
  • Ignoring User Input Validation: While this basic calculator doesn’t have extensive input validation, in a more complex application, it’s essential to validate user input. This includes checking for invalid characters, preventing multiple decimal points, and handling very large or small numbers.
  • Incorrect DOM Element Selection: If you use the wrong selectors or don’t get the correct HTML elements, the calculator won’t work correctly. Double-check your element selections using the browser’s developer tools to ensure you’re targeting the right elements.
  • Not Using Source Maps: When debugging, source maps are invaluable. If you haven’t enabled source maps in your tsconfig.json file, debugging your TypeScript code in the browser will be difficult. Enable source maps to make debugging easier.

Key Takeaways

  • Type Safety: TypeScript’s static typing helps catch errors early and improves code readability.
  • HTML Structure: Proper HTML structure is essential for the calculator’s layout and button functionality.
  • CSS Styling: CSS enhances the calculator’s appearance and user experience.
  • Event Handling: Event listeners are crucial for capturing button clicks and triggering calculations.
  • Error Handling: Handling potential errors (like division by zero) is important for creating a robust application.

FAQ

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

  1. Can I use a different framework or library?

    Yes, you can use frameworks like React, Angular, or Vue.js to build a calculator. However, this tutorial focuses on a basic implementation using vanilla JavaScript and TypeScript to understand the fundamental concepts.

  2. How can I add more advanced features?

    You can add features like memory functions (M+, M-, MR, MC), trigonometric functions (sin, cos, tan), and scientific notation. You’ll need to expand the HTML, CSS, and TypeScript code to accommodate these features.

  3. How do I deploy my calculator?

    You can deploy your calculator to a web server or a platform like GitHub Pages or Netlify. You’ll need to upload the HTML, CSS, and JavaScript files to the server.

  4. What are the best practices for code organization?

    For larger projects, it’s recommended to organize your code into separate modules or classes. This improves maintainability and reusability. You can also use design patterns like the Model-View-Controller (MVC) pattern to separate concerns.

  5. How do I handle user input validation?

    You can use regular expressions and conditional statements to validate user input. For example, you can check if the input contains only valid characters (numbers, operators, and decimal points) and prevent multiple decimal points.

Building a calculator in TypeScript is an excellent way to learn the fundamentals of web development and TypeScript. This tutorial provides a solid foundation for creating your own calculator application. Remember to practice, experiment, and explore different features to enhance your skills. With the knowledge you’ve gained, you can now embark on more complex projects and continue to refine your programming abilities. As you delve deeper, consider exploring more advanced features and libraries to further enhance your calculator. The journey of learning never truly ends, and each project is a step forward in your development as a software engineer.

More posts