TypeScript Tutorial: Creating a Simple Interactive Expense Tracker

Written by

learnmodernjavascript

in

Managing personal finances can often feel like navigating a complex maze. Keeping track of income, expenses, and budgets is crucial for financial health, yet the tools available can sometimes be clunky or overwhelming. This tutorial will guide you through creating a simple, interactive expense tracker using TypeScript. We’ll build a web application that allows users to add expenses, categorize them, and view a summary of their spending habits. This project is ideal for beginners and intermediate developers looking to solidify their understanding of TypeScript while building a practical application.

Why Build an Expense Tracker?

An expense tracker provides a tangible project to learn and apply TypeScript concepts. It covers fundamental aspects such as data types, interfaces, classes, and event handling. Building this application will give you a solid foundation for more complex projects. Moreover, understanding how to manage finances is a valuable skill, and this project combines coding with a practical real-world application.

Prerequisites

Before we begin, ensure you have the following installed on your system:

  • Node.js and npm (Node Package Manager): Required to manage project dependencies and run the application.
  • A code editor: Visual Studio Code (VS Code) is recommended, but you can use any editor you prefer.
  • Basic knowledge of HTML, CSS, and JavaScript is helpful, but not strictly required.

Setting Up the Project

Let’s start by setting up our project directory and initializing it with npm. Open your terminal and run the following commands:

mkdir expense-tracker
cd expense-tracker
npm init -y

This creates a new directory, navigates into it, and initializes a new Node.js project. The -y flag automatically accepts the default settings.

Next, install TypeScript and a few other necessary packages:

npm install typescript --save-dev
npm install --save-dev @types/node
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
  • typescript: The TypeScript compiler.
  • @types/node: Type definitions for Node.js, allowing TypeScript to understand Node.js modules.
  • webpack, webpack-cli, webpack-dev-server, and html-webpack-plugin: These are used for bundling our JavaScript and serving the application.

Configuring TypeScript

Now, let’s configure TypeScript. Create a tsconfig.json file in the root of your project with the following content:

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

This configuration specifies:

  • target: "es5": Compiles to ECMAScript 5, ensuring broader browser compatibility.
  • module: "commonjs": Specifies the module system.
  • outDir: "./dist": The output directory for compiled JavaScript files.
  • rootDir: "./src": The root directory of your TypeScript source files.
  • strict: true: Enables strict type checking.
  • esModuleInterop: true: Allows interoperability between CommonJS and ES modules.
  • skipLibCheck: true: Skips type checking of declaration files.
  • forceConsistentCasingInFileNames: true: Enforces consistent casing in filenames.
  • include: ["src/**/*"]: Includes all TypeScript files in the src directory.

Setting Up Webpack

Next, configure Webpack to bundle our application. Create a webpack.config.js file in the root of your project:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    open: true,
  },
};

This configuration:

  • Specifies the entry point (./src/index.ts) and output path (./dist).
  • Uses ts-loader to transpile TypeScript files.
  • Resolves files with .ts and .js extensions.
  • Uses HtmlWebpackPlugin to generate an HTML file from a template.
  • Configures a development server with the port 8080 and opens the browser.

Creating the HTML Template

Create an index.html file in the src directory. This will be the basic structure of your expense tracker:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expense Tracker</title>
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

This is a simple HTML structure. The <div id="app"></div> element will be where we render our React components.

Writing the TypeScript Code

Now, let’s write the TypeScript code for our expense tracker. Create an index.ts file in the src directory. This is where the core logic of the application will reside.

// src/index.ts

// Define an interface for an expense
interface Expense {
    id: number;
    description: string;
    amount: number;
    category: string;
    date: string;
}

// Initialize an array to store expenses
let expenses: Expense[] = [];

// Function to add an expense
function addExpense(description: string, amount: number, category: string, date: string): void {
    const newExpense: Expense = {
        id: Date.now(), // Generate a unique ID
        description: description,
        amount: amount,
        category: category,
        date: date,
    };
    expenses.push(newExpense);
    renderExpenses();
    updateSummary();
}

// Function to delete an expense
function deleteExpense(id: number): void {
    expenses = expenses.filter(expense => expense.id !== id);
    renderExpenses();
    updateSummary();
}

// Function to render expenses in the UI
function renderExpenses(): void {
    const expenseList = document.getElementById('expense-list');
    if (!expenseList) return;

    expenseList.innerHTML = ''; // Clear previous expenses

    expenses.forEach(expense => {
        const listItem = document.createElement('li');
        listItem.innerHTML = `
            <div>${expense.description} - $${expense.amount} - ${expense.category} - ${expense.date}</div>
            <button class="delete-button" data-id="${expense.id}">Delete</button>
        `;
        expenseList.appendChild(listItem);

        // Add event listener for delete button
        const deleteButton = listItem.querySelector('.delete-button');
        if (deleteButton) {
            deleteButton.addEventListener('click', () => {
                const expenseId = parseInt(deleteButton.getAttribute('data-id') || '0', 10);
                deleteExpense(expenseId);
            });
        }
    });
}

// Function to update the summary
function updateSummary(): void {
    const totalExpensesElement = document.getElementById('total-expenses');
    const categorySummaryElement = document.getElementById('category-summary');

    if (!totalExpensesElement || !categorySummaryElement) return;

    const totalExpenses = expenses.reduce((sum, expense) => sum + expense.amount, 0);

    totalExpensesElement.textContent = `Total: $${totalExpenses.toFixed(2)}`;

    // Calculate category-wise spending
    const categorySpending: { [category: string]: number } = {};
    expenses.forEach(expense => {
        categorySpending[expense.category] = (categorySpending[expense.category] || 0) + expense.amount;
    });

    let categorySummaryHTML = '';
    for (const category in categorySpending) {
        categorySummaryHTML += `<p>${category}: $${categorySpending[category].toFixed(2)}</p>`;
    }

    categorySummaryElement.innerHTML = categorySummaryHTML;
}

// Function to handle form submission
function handleFormSubmit(event: Event): void {
    event.preventDefault(); // Prevent form from refreshing the page

    const descriptionInput = document.getElementById('description') as HTMLInputElement;
    const amountInput = document.getElementById('amount') as HTMLInputElement;
    const categoryInput = document.getElementById('category') as HTMLSelectElement;
    const dateInput = document.getElementById('date') as HTMLInputElement;

    if (!descriptionInput || !amountInput || !categoryInput || !dateInput) return;

    const description = descriptionInput.value;
    const amount = parseFloat(amountInput.value);
    const category = categoryInput.value;
    const date = dateInput.value;

    if (description && !isNaN(amount) && amount > 0 && category && date) {
        addExpense(description, amount, category, date);
        // Clear the form
        descriptionInput.value = '';
        amountInput.value = '';
        categoryInput.value = '';
        dateInput.value = '';
    }
}

// Initialize the app
function initializeApp(): void {
    const form = document.getElementById('expense-form');
    if (!form) return;

    form.addEventListener('submit', handleFormSubmit);

    renderExpenses();
    updateSummary();
}

// Call the initialization function when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', initializeApp);

This code:

  • Defines an Expense interface to structure expense data.
  • Uses an array called expenses to store the expenses.
  • Implements the addExpense function to add a new expense to the expenses array.
  • Implements the deleteExpense function to remove an expense from the expenses array.
  • The renderExpenses function dynamically generates the list items and delete buttons.
  • The updateSummary function calculates and displays the total expenses and category spending.
  • The handleFormSubmit function handles the form submission, adds the expense, and clears the form.
  • The initializeApp function initializes the app and adds event listeners.

Adding HTML and CSS for the UI

To make the application interactive, we need to create the HTML structure and CSS styles. Add the following HTML inside the <body> tags of your src/index.html file:

<h2>Expense Tracker</h2>

<form id="expense-form">
    <label for="description">Description:</label>
    <input type="text" id="description" name="description" required>

    <label for="amount">Amount:</label>
    <input type="number" id="amount" name="amount" required>

    <label for="category">Category:</label>
    <select id="category" name="category" required>
        <option value="" disabled selected>Select Category</option>
        <option value="food">Food</option>
        <option value="transportation">Transportation</option>
        <option value="housing">Housing</option>
        <option value="entertainment">Entertainment</option>
        <option value="other">Other</option>
    </select>

    <label for="date">Date:</label>
    <input type="date" id="date" name="date" required>

    <button type="submit">Add Expense</button>
</form>

<div id="summary">
    <h3>Summary</h3>
    <p id="total-expenses">Total: $0.00</p>
    <div id="category-summary"></div>
</div>

<h3>Expenses</h3>
<ul id="expense-list"></ul>

Create a style.css file in the src directory and add the following CSS styles:

body {
    font-family: sans-serif;
    margin: 20px;
}

#expense-form {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"], input[type="number"], select, input[type="date"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #3e8e41;
}

#expense-list {
    list-style: none;
    padding: 0;
}

#expense-list li {
    padding: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.delete-button {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.delete-button:hover {
    background-color: #da190b;
}

To include your CSS in the application, you need to import it into your index.ts file. Add this line at the top of your src/index.ts file:

import './style.css';

Building and Running the Application

Now that you’ve written the code and set up the HTML and CSS, let’s build and run the application. In your terminal, run the following commands:

npx tsc
npx webpack serve

The npx tsc command compiles the TypeScript code. The npx webpack serve command starts the webpack development server, which serves the application at http://localhost:8080/. Open your browser and navigate to this URL to see your expense tracker in action.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them:

  • Incorrect TypeScript Syntax: Ensure you are following TypeScript syntax rules. Use type annotations, interfaces, and classes correctly. The TypeScript compiler will catch syntax errors.
  • Incorrect HTML IDs or Class Names: Double-check that your HTML IDs and class names match the ones used in your JavaScript code. Use the browser’s developer tools to inspect elements and verify IDs.
  • Typing Errors: Ensure that the correct types are used for variables and function parameters. TypeScript helps catch these errors during development.
  • Incorrect Event Handling: Ensure that event listeners are attached correctly to the appropriate elements. Use the browser’s developer tools to verify event listeners.
  • Webpack Configuration Errors: Ensure that your webpack.config.js file is configured correctly. Check for any errors during the build process.

Enhancements and Next Steps

Here are some ideas for enhancing your expense tracker:

  • Implement Data Persistence: Save expenses to local storage or a database so the data persists even after the browser is closed.
  • Add Date Filtering: Allow users to filter expenses by date range.
  • Implement Budgeting: Add a budgeting feature to help users track their spending against a budget.
  • Create Charts and Graphs: Visualize spending patterns using charts and graphs.
  • Add User Authentication: Implement user accounts to allow multiple users to use the app.

Key Takeaways

In this tutorial, you’ve learned how to create a simple, interactive expense tracker using TypeScript. You’ve covered the basics of setting up a TypeScript project, working with interfaces, handling user input, and dynamically updating the user interface. This project serves as a practical example for beginners to understand and apply TypeScript concepts. By following this tutorial, you’ve gained hands-on experience in building a web application and learned how to manage and visualize financial data. The skills and knowledge gained from this project can be applied to create more complex and feature-rich applications.

FAQ

1. How do I debug TypeScript code?

You can debug TypeScript code by using your browser’s developer tools (e.g., Chrome DevTools). Set breakpoints in your TypeScript files and the debugger will stop at those points, allowing you to inspect variables and step through your code.

2. Can I use a different UI framework or library?

Yes, you can. While this tutorial focuses on vanilla JavaScript for simplicity, you can integrate frameworks like React, Angular, or Vue.js. The TypeScript code would remain largely the same, but the UI rendering would be handled by the chosen framework.

3. How do I deploy this application?

You can deploy the application to a hosting platform like Netlify, Vercel, or GitHub Pages. You’ll need to build your project (npx webpack) and then upload the contents of the dist directory to your hosting provider.

4. What are some good resources for learning more about TypeScript?

The official TypeScript documentation is an excellent resource. You can also find many tutorials, articles, and courses on platforms like Udemy, Coursera, and freeCodeCamp. Explore the TypeScript Playground to experiment with code interactively.

5. How can I improve the performance of my expense tracker?

To improve performance, consider optimizing your rendering logic (e.g., using virtual DOM), using lazy loading for images or data, and minimizing the amount of data transferred over the network. Also, consider using a framework like React or Vue.js for more efficient UI updates.

Building this expense tracker, you’ve taken a significant step in your TypeScript journey. Remember that practice is key. Experiment with the code, add new features, and try different approaches to solidify your understanding. As you continue to build and refine your skills, you’ll find yourself more confident in tackling increasingly complex projects. The ability to create functional and user-friendly applications is within your reach, and this project serves as a solid foundation for your future endeavors.

More posts