TypeScript Tutorial: Building a Simple Calculator App

Written by

learnmodernjavascript

in

In today’s digital world, calculators are indispensable. From simple arithmetic to complex scientific calculations, they’re tools we rely on daily. But have you ever considered building your own? This tutorial will guide you through creating a simple calculator application using TypeScript, a superset of JavaScript that adds static typing, making your code more robust and easier to maintain. This project is ideal for beginners and intermediate developers looking to deepen their understanding of TypeScript and web development principles.

Why Build a Calculator App with TypeScript?

There are several compelling reasons to choose TypeScript for this project:

  • Type Safety: TypeScript’s static typing helps catch errors early in the development process. This reduces the likelihood of runtime errors and makes debugging easier.
  • Code Readability: Types make your code more self-documenting. Developers can quickly understand the purpose of variables and functions.
  • Improved Developer Experience: TypeScript provides excellent tooling support, including autocompletion, refactoring, and error checking, which significantly boosts developer productivity.
  • Learn Core Concepts: Building a calculator allows you to practice essential programming concepts like variables, functions, conditional statements, and event handling.

By the end of this tutorial, you’ll have a fully functional calculator application and a solid foundation in TypeScript development.

Setting Up Your Development Environment

Before we dive into the code, let’s set up the environment:

  1. Install Node.js and npm: If you haven’t already, download and install Node.js from https://nodejs.org/. npm (Node Package Manager) comes bundled with Node.js and is used to manage project dependencies.
  2. Create a Project Directory: Create a new directory for your calculator project (e.g., `calculator-app`). Navigate into this directory using your terminal.
  3. Initialize npm: Run `npm init -y` in your terminal to initialize a new npm project. This will create a `package.json` file.
  4. Install TypeScript: Install TypeScript globally or locally. For local installation, run `npm install –save-dev typescript`.
  5. Create a TypeScript Configuration File: Run `npx tsc –init` in your terminal. This will create a `tsconfig.json` file, which configures the TypeScript compiler.
  6. Create an HTML File: Create an `index.html` file in your project directory. This file will hold the structure of your calculator’s user interface.
  7. Create a TypeScript File: Create a `main.ts` file in your project directory. This file will contain the TypeScript code for your calculator’s logic.

Building the Calculator’s User Interface (HTML)

Let’s create the basic HTML structure for our calculator. Open `index.html` and add the following code:

“`html

Simple Calculator

















“`

This HTML provides the basic structure:

  • A `div` with class `calculator` acts as the main container.
  • An “ element with `id=”display”` is used to show the calculator’s display.
  • A `div` with class `buttons` contains all the calculator buttons.
  • Each button has a `data-value` attribute, which stores the value of the button (e.g., numbers, operators).
  • The `script` tag at the end links to the compiled JavaScript file (`main.js`).

Next, create a simple CSS file (`style.css`) to style your calculator. Here’s a basic example:

“`css
.calculator {
width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
background-color: #f0f0f0;
}

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

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

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

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

.operator {
background-color: #ddd;
}
“`

This CSS provides a basic layout and styling for the calculator. You can customize the styles to your liking.

Writing the TypeScript Logic (main.ts)

Now, let’s write the TypeScript code that powers the calculator. Open `main.ts` and add the following code:

“`typescript
// Get references to 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;

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

// Function to handle number and decimal button clicks
const handleNumberClick = (value: string) => {
currentInput += value;
updateDisplay();
};

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

// Function to handle the equals button click
const handleEqualsClick = () => {
if (currentInput === ” || firstOperand === null || operator === null) return;

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

switch (operator) {
case ‘+’:
result = firstOperand + secondOperand;
break;
case ‘-‘:
result = firstOperand – secondOperand;
break;
case ‘*’:
result = firstOperand * secondOperand;
break;
case ‘/’:
if (secondOperand === 0) {
result = null;
alert(“Division by zero is not allowed.”);
} else {
result = firstOperand / secondOperand;
}
break;
}

if (result !== null) {
currentInput = result.toString();
updateDisplay();
firstOperand = result;
operator = null;
}
};

// Function to handle the clear button click
const handleClearClick = () => {
currentInput = ”;
operator = null;
firstOperand = null;
updateDisplay();
};

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

if (value) {
if (!isNaN(parseFloat(value)) || value === ‘.’) {
handleNumberClick(value);
} else if ([‘+’, ‘-‘, ‘*’, ‘/’].includes(value)) {
handleOperatorClick(value);
} else if (value === ‘=’) {
handleEqualsClick();
} else if (value === ‘C’) {
handleClearClick();
}
}
});
}
“`

Let’s break down this code:

  • Element References: We get references to the display input and the buttons container from the HTML. The `as HTMLInputElement` and `as HTMLDivElement` are type assertions, telling TypeScript the expected types of these elements.
  • Variables: We initialize variables to store the current input, the selected operator, and the first operand.
  • `updateDisplay()` Function: This function updates the calculator’s display with the `currentInput`.
  • `handleNumberClick()` Function: This function appends the clicked number or decimal to the `currentInput` and updates the display.
  • `handleOperatorClick()` Function: This function stores the current input as the first operand, sets the operator, and clears the input for the next number.
  • `handleEqualsClick()` Function: This function performs the calculation based on the selected operator and operands. It handles division by zero and updates the display with the result.
  • `handleClearClick()` Function: This function clears the display, resets the operator, and clears the first operand.
  • Event Listeners: An event listener is added to the buttons container. When a button is clicked, the `event.target` is checked. The `data-value` attribute of the button is used to determine the action to take. Numbers and the decimal point are appended to the `currentInput`. Operators trigger the `handleOperatorClick()` function. The equals button triggers `handleEqualsClick()`, and the clear button triggers `handleClearClick()`.

Compiling and Running the Application

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

“`bash
npx tsc
“`

This command will compile `main.ts` into `main.js`. You can then open `index.html` in your web browser. You should now be able to interact with your calculator and perform basic calculations.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Type Errors: TypeScript’s type checking can catch many errors at compile time. Make sure to fix any type errors reported by the compiler. Common type errors include assigning incorrect types to variables or passing the wrong types to functions.
  • Incorrect Element References: Double-check that you’re correctly referencing HTML elements. Use the browser’s developer tools to inspect the elements and verify that your JavaScript code is selecting the right ones.
  • Operator Precedence: Your calculator currently handles operations sequentially. For more complex calculations, you might need to implement operator precedence (PEMDAS/BODMAS).
  • Division by Zero: The code includes a check for division by zero, but it’s important to handle this case gracefully. Consider displaying an error message to the user.
  • Missing Event Listeners: Ensure that your event listeners are correctly attached to the buttons. If a button click doesn’t trigger the expected action, check the event listener and the button’s `data-value`.

Enhancements and Next Steps

Once you have a basic calculator, you can explore various enhancements:

  • Advanced Operations: Add support for more advanced operations, such as square root, exponents, and trigonometric functions.
  • Memory Functions: Implement memory functions (M+, M-, MR, MC) to store and recall values.
  • User Interface Improvements: Improve the calculator’s appearance and user experience with CSS. Consider adding themes or animations.
  • Error Handling: Implement more robust error handling to catch invalid input and display informative error messages.
  • Testing: Write unit tests to ensure that your calculator’s logic works correctly.
  • Frameworks: Consider using a JavaScript framework like React, Angular, or Vue.js to build more complex calculator applications.

Key Takeaways

  • This tutorial provided a step-by-step guide to build a basic calculator using TypeScript.
  • You learned how to set up a TypeScript project, create an HTML structure, style it with CSS, and write the TypeScript logic.
  • You gained practical experience with essential programming concepts like variables, functions, event handling, and conditional statements.
  • You learned how to handle user input, perform calculations, and display results.
  • You explored common mistakes and potential enhancements.

Building a calculator is a great way to learn and practice TypeScript. As you continue to build projects, you’ll gain a deeper understanding of the language and its benefits. Remember to experiment, explore, and have fun!

The journey of building a calculator, from the initial setup to the final, functional application, is more than just coding; it’s a journey of learning and problem-solving. Each line of code, each button click, and each calculation brings a sense of accomplishment. The skills and knowledge gained from this project will serve as a strong foundation for tackling more complex challenges in the world of web development. Embrace the learning process, iterate on your design, and explore the endless possibilities that TypeScript offers. The calculator you build today is just the beginning.

More posts