TypeScript Tutorial: Creating a Simple Web-Based Expense Tracker

Written by

learnmodernjavascript

in

Managing finances can be a daunting task. Tracking expenses, budgeting, and understanding where your money goes often involves spreadsheets, notebooks, and a lot of manual data entry. What if you could build a simple, yet effective, web-based tool to simplify this process? This tutorial will guide you through creating an expense tracker using TypeScript, a powerful language that brings type safety and enhanced code organization to your projects. We’ll cover the core concepts, step-by-step implementation, and address common pitfalls, making it a perfect learning experience for both beginners and intermediate developers.

Why TypeScript for an Expense Tracker?

TypeScript offers several advantages that make it an excellent choice for this project:

  • Type Safety: TypeScript helps catch errors early by identifying type mismatches during development, reducing the chances of runtime bugs.
  • Code Readability: Types and interfaces make your code easier to understand and maintain.
  • Enhanced Development Experience: Modern IDEs provide excellent support for TypeScript, including autocompletion, refactoring, and error checking.
  • Scalability: TypeScript is designed to handle large codebases, making it suitable for projects that might grow over time.

This tutorial will not only teach you how to build an expense tracker, but it will also introduce you to fundamental TypeScript concepts that you can apply to other projects.

Setting Up Your Development Environment

Before we start coding, let’s set up our development environment. You’ll need the following:

  • Node.js and npm (or yarn): Node.js provides the JavaScript runtime, and npm (Node Package Manager) or yarn is used to manage project dependencies. Download and install them from https://nodejs.org/.
  • A Code Editor: Visual Studio Code (VS Code) is highly recommended due to its excellent TypeScript support. You can download it from https://code.visualstudio.com/.
  • TypeScript Compiler: You’ll install this globally using npm.

Step 1: Install TypeScript

Open your terminal or command prompt and run the following command to install the TypeScript compiler globally:

npm install -g typescript

Step 2: Create a Project Directory

Create a new directory for your project, navigate into it, and initialize a new npm project:

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

This will create a `package.json` file in your project directory.

Step 3: Initialize TypeScript

Initialize a TypeScript configuration file (`tsconfig.json`) using the TypeScript compiler:

tsc --init

This command creates a `tsconfig.json` file with default settings. You can customize this file to configure how TypeScript compiles your code.

Project Structure and Core Concepts

Let’s define the project structure and the key TypeScript concepts we’ll use:

Project Structure:

expense-tracker/
├── src/
│   ├── index.ts           // Main application file
│   ├── models/
│   │   └── expense.ts     // Expense model
│   ├── services/
│   │   └── expenseService.ts // Service for expense operations
│   └── utils/
│       └── dateUtils.ts   // Utility functions
├── tsconfig.json          // TypeScript configuration
├── package.json           // npm package configuration
└── ...

Core TypeScript Concepts:

  • Types: TypeScript adds static typing to JavaScript. We’ll use types like `string`, `number`, `Date`, and custom types defined using interfaces.
  • Interfaces: Interfaces define the structure of objects. We’ll use interfaces to model our `Expense` data.
  • Classes: Classes are blueprints for creating objects. While not strictly necessary for this simple project, we might use them for service classes.
  • Functions: We’ll write functions to perform actions like adding expenses, calculating totals, and displaying data.
  • Modules: We’ll organize our code into modules to improve readability and maintainability.

Building the Expense Model

The `Expense` model represents a single expense item. Create a file named `expense.ts` inside the `src/models` directory. Add the following code:

// src/models/expense.ts

export interface Expense {
    id: number;
    description: string;
    amount: number;
    date: Date;
    category: string;
}

This code defines an interface called `Expense`. It specifies the properties of an expense: `id`, `description`, `amount`, `date`, and `category`. The `id` will be a unique identifier for each expense, we will not implement the logic to create the id in this tutorial.

Creating the Expense Service

The `ExpenseService` will handle the logic for managing expenses, such as adding, retrieving, and calculating totals. Create a file named `expenseService.ts` inside the `src/services` directory. Add the following code:

// src/services/expenseService.ts
import { Expense } from '../models/expense';

export class ExpenseService {
    private expenses: Expense[] = [];

    addExpense(expense: Expense): void {
        this.expenses.push(expense);
    }

    getExpenses(): Expense[] {
        return this.expenses;
    }

    getTotalExpenses(): number {
        return this.expenses.reduce((sum, expense) => sum + expense.amount, 0);
    }

    getExpensesByCategory(category: string): Expense[] {
        return this.expenses.filter(expense => expense.category === category);
    }
}

Here’s a breakdown of the `ExpenseService`:

  • Import: We import the `Expense` interface from the `../models/expense` module.
  • `expenses` Array: This private array stores our expense objects.
  • `addExpense(expense: Expense): void`: This method adds a new expense to the `expenses` array. It takes an `Expense` object as a parameter. The `void` return type means the function doesn’t return anything.
  • `getExpenses(): Expense[]`: This method returns all expenses.
  • `getTotalExpenses(): number`: This method calculates the sum of all expenses using the `reduce` method.
  • `getExpensesByCategory(category: string): Expense[]`: This method filters expenses by category.

Implementing Utility Functions

Create a file named `dateUtils.ts` inside the `src/utils` directory. This will hold utility functions for formatting dates. Add the following code:

// src/utils/dateUtils.ts

export function formatDate(date: Date): string {
    const options: Intl.DateTimeFormatOptions = {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
    };
    return date.toLocaleDateString(undefined, options);
}

This `formatDate` function takes a `Date` object and returns a formatted date string (e.g., “January 1, 2024”).

Building the Main Application Logic

Now, let’s put everything together in `index.ts`. This file will contain the main application logic. Create the file `index.ts` in the `src` directory and add the following code:

// src/index.ts
import { Expense } from './models/expense';
import { ExpenseService } from './services/expenseService';
import { formatDate } from './utils/dateUtils';

// Initialize ExpenseService
const expenseService = new ExpenseService();

// Sample Expenses
const expenses: Expense[] = [
    {
        id: 1,
        description: 'Groceries',
        amount: 50,
        date: new Date('2024-01-01'),
        category: 'Food',
    },
    {
        id: 2,
        description: 'Movie ticket',
        amount: 15,
        date: new Date('2024-01-05'),
        category: 'Entertainment',
    },
    {
        id: 3,
        description: 'Gas',
        amount: 40,
        date: new Date('2024-01-10'),
        category: 'Transportation',
    },
];

// Add expenses
expenses.forEach(expense => expenseService.addExpense(expense));

// Display Expenses
console.log('Expenses:');
expenseService.getExpenses().forEach(expense => {
    console.log(`- ${expense.description} - $${expense.amount} - ${formatDate(expense.date)}`);
});

// Display Total
const total = expenseService.getTotalExpenses();
console.log(`nTotal Expenses: $${total}`);

// Display Expenses by Category
const foodExpenses = expenseService.getExpensesByCategory('Food');
console.log('nFood Expenses:');
foodExpenses.forEach(expense => {
    console.log(`- ${expense.description} - $${expense.amount} - ${formatDate(expense.date)}`);
});

Let’s break down the `index.ts` file:

  • Imports: We import the `Expense` interface, `ExpenseService`, and `formatDate` from the respective modules.
  • Initialization: We create a new instance of `ExpenseService`.
  • Sample Expenses: We create an array of sample `Expense` objects.
  • Adding Expenses: We add the sample expenses using the `addExpense` method.
  • Displaying Expenses: We retrieve all expenses using `getExpenses()` and then iterate through them, displaying each expense’s details using `console.log`. The `formatDate` function is used to format the date.
  • Calculating and Displaying Total: We calculate the total expenses using `getTotalExpenses()` and display the result.
  • Filtering and Displaying by Category: We filter expenses by category (‘Food’) and display them.

Compiling and Running Your Code

Now that we’ve written our code, let’s compile and run it. Open your terminal in the project directory and run the following commands:

Step 1: Compile the TypeScript Code

tsc

This command will compile all TypeScript files in the `src` directory and generate corresponding JavaScript files in the same directory. If there are any type errors, the compiler will display them here.

Step 2: Run the JavaScript Code

node src/index.js

This command executes the compiled JavaScript code using Node.js. You should see the expense details and the total expenses printed in your terminal.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Type Errors: The TypeScript compiler will catch type errors. Carefully review the error messages and ensure that the types match. For example, if you try to assign a string to a number variable, the compiler will flag this.
  • Incorrect File Paths: Double-check your import statements to ensure that the file paths are correct.
  • Missing Dependencies: If you’re using external libraries, make sure you’ve installed them using npm (e.g., `npm install [library-name]`).
  • Incorrect `tsconfig.json` Configuration: The `tsconfig.json` file controls how TypeScript compiles your code. If you’re having trouble, try using the default settings or consult the TypeScript documentation for advanced configuration options.
  • Incorrect Date Formatting: Make sure the date format matches the format expected by the `Date` constructor or any date parsing libraries you’re using.

If you encounter issues, carefully examine the error messages provided by the TypeScript compiler or the Node.js runtime. The error messages often provide valuable clues about the source of the problem.

Enhancements and Next Steps

This is a basic expense tracker. Here are some ideas for enhancements:

  • User Interface: Create a user interface using HTML, CSS, and JavaScript (or a framework like React, Angular, or Vue.js) to allow users to interact with the expense tracker.
  • Data Persistence: Store the expense data in a database (e.g., SQLite, PostgreSQL, or MongoDB) or local storage to persist the data between sessions.
  • Input Validation: Add input validation to ensure that users enter valid data.
  • More Features: Implement features like budgeting, expense reports, and data visualization.
  • Testing: Write unit tests to ensure the correctness of your code.
  • Error Handling: Implement error handling to gracefully handle unexpected situations.

Key Takeaways

This tutorial provided a practical introduction to building a web-based expense tracker using TypeScript. You learned about:

  • Setting up a TypeScript development environment.
  • Defining interfaces and classes to model data.
  • Creating service classes to manage data.
  • Using utility functions for common tasks.
  • Compiling and running TypeScript code.
  • Troubleshooting common issues.

By following this tutorial, you’ve gained valuable experience with TypeScript, which can be applied to a wide range of web development projects.

FAQ

Q: What are the benefits of using TypeScript?

A: TypeScript provides type safety, improved code readability, a better development experience, and enhanced maintainability, leading to fewer runtime errors and more robust applications.

Q: How do I handle errors in TypeScript?

A: TypeScript helps catch errors during development. You can also use `try…catch` blocks to handle runtime errors. Implementing proper error handling is crucial for robust applications.

Q: Can I use TypeScript with existing JavaScript code?

A: Yes, TypeScript is designed to be compatible with JavaScript. You can gradually introduce TypeScript into your existing JavaScript projects.

Q: What are the best practices for writing TypeScript code?

A: Use clear and descriptive type annotations, follow a consistent coding style, and write modular code. Utilize interfaces and classes effectively, and write unit tests to ensure code correctness.

Conclusion

Building a simple expense tracker is just the beginning. The concepts and techniques you’ve learned here—from setting up your environment to structuring your code with types and modules—form a solid foundation for more complex TypeScript projects. As you continue to explore TypeScript, remember that practice is key. Experiment with new features, refactor your code, and always strive to write clean, maintainable, and well-documented code. The journey of a thousand lines of code begins with a single expense entry, and with TypeScript, you’re well-equipped to make that journey a rewarding one.

More posts