TypeScript Tutorial: Building a Simple Expense Tracker

Written by

learnmodernjavascript

in

Managing finances can feel like navigating a complex maze. Tracking expenses, understanding where your money goes, and planning for the future are essential, but often tedious, tasks. Imagine having a simple, yet powerful, tool at your fingertips to effortlessly monitor your spending habits. This tutorial will guide you through building a basic expense tracker using TypeScript, a language known for its type safety and developer-friendly features. This project is perfect for beginners and intermediate developers looking to solidify their TypeScript skills while creating something practical and useful.

Why Build an Expense Tracker?

Beyond the personal benefits of financial awareness, building an expense tracker provides several advantages:

  • Skill Development: You’ll gain hands-on experience with TypeScript fundamentals, including types, interfaces, classes, and more.
  • Practical Application: You’ll create a real-world application that you can customize and extend to meet your specific needs.
  • Code Reusability: The concepts and techniques you learn can be applied to other projects.
  • Portfolio Piece: It’s a great addition to your portfolio, showcasing your TypeScript proficiency.

Setting Up Your Project

Before diving into the code, let’s set up the project environment. We’ll use Node.js and npm (Node Package Manager) for this tutorial. If you haven’t already, install Node.js from the official website (https://nodejs.org/).

1. Create a Project Directory:

mkdir expense-tracker
cd expense-tracker

2. Initialize npm:

npm init -y

This command creates a `package.json` file, which manages your project’s dependencies.

3. Install TypeScript:

npm install typescript --save-dev

The `–save-dev` flag indicates that TypeScript is a development dependency.

4. Initialize TypeScript Configuration:

npx tsc --init

This command creates a `tsconfig.json` file. This file configures the TypeScript compiler. You can customize the compiler options here. For now, we’ll keep the default settings.

5. Create a Source File:

Create a file named `src/index.ts` in your project directory. This is where we’ll write our TypeScript code. You’ll also need to create a `src` directory if you haven’t already.

Defining Data Structures

Let’s define the data structures for our expense tracker. We’ll need a way to represent expenses. We’ll use an interface for this.

// src/index.ts
interface Expense {
  id: number;
  description: string;
  amount: number;
  category: string;
  date: Date;
}

Explanation:

  • `interface Expense`: Defines a blueprint for expense objects.
  • `id: number`: A unique identifier for the expense.
  • `description: string`: A brief description of the expense.
  • `amount: number`: The monetary value of the expense.
  • `category: string`: The category the expense falls under (e.g., “Food”, “Transportation”).
  • `date: Date`: The date the expense occurred.

Creating Expense Management Functions

Now, let’s create functions to manage our expenses. We’ll need functions to add, view, and potentially delete expenses.


// src/index.ts (continued)

let expenses: Expense[] = [];
let nextId: number = 1;

function addExpense(description: string, amount: number, category: string, date: Date): void {
  const newExpense: Expense = {
    id: nextId++,
    description,
    amount,
    category,
    date,
  };
  expenses.push(newExpense);
  console.log("Expense added:", newExpense);
}

function viewExpenses(): void {
  console.log("Expenses:");
  expenses.forEach((expense) => {
    console.log(`- ${expense.description} - $${expense.amount.toFixed(2)} - ${expense.category} - ${expense.date.toLocaleDateString()}`);
  });
}

function deleteExpense(id: number): void {
  const initialLength = expenses.length;
  expenses = expenses.filter((expense) => expense.id !== id);
  if (expenses.length < initialLength) {
    console.log(`Expense with ID ${id} deleted.`);
  } else {
    console.log(`Expense with ID ${id} not found.`);
  }
}

Explanation:

  • `expenses: Expense[] = []`: An array to store our expense objects. Initialized as an empty array.
  • `nextId: number = 1`: A variable to generate unique IDs for each expense.
  • `addExpense()`:
  • Takes description, amount, category, and date as arguments.
  • Creates a new `Expense` object using the provided data and a generated ID.
  • Pushes the new expense to the `expenses` array.
  • Logs a confirmation message to the console.
  • `viewExpenses()`:
  • Iterates through the `expenses` array and logs each expense to the console. Uses `toLocaleDateString()` to format the date.
  • `deleteExpense()`:
  • Takes the expense ID as an argument.
  • Uses the `filter` method to create a new array without the expense matching the given ID.
  • Logs a confirmation or error message to the console.

Putting It All Together (Example Usage)

Let’s add some example expenses and see how our functions work.


// src/index.ts (continued)

// Add some sample expenses
addExpense("Groceries", 50.00, "Food", new Date("2024-01-20"));
addExpense("Gas", 30.00, "Transportation", new Date("2024-01-21"));
addExpense("Dinner", 75.00, "Food", new Date("2024-01-21"));

// View all expenses
viewExpenses();

// Delete an expense
deleteExpense(2);

// View expenses again to confirm deletion
viewExpenses();

How to Run:

  1. Open your terminal in the project directory.
  2. Compile the TypeScript code: `npx tsc`
  3. Run the compiled JavaScript file using Node.js: `node dist/index.js` (assuming the default output directory is `dist`)

You should see the expenses logged to the console, demonstrating the functionality of your expense tracker.

Adding Input and User Interaction (Optional)

The current implementation works, but it’s not very user-friendly. Let’s add some basic input to make it interactive. We’ll use the `readline` module from Node.js.


// src/index.ts (continued)
import * as readline from 'readline';

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

function askQuestion(query: string): Promise {
  return new Promise((resolve) => {
    rl.question(query, resolve);
  });
}

async function main() {
  while (true) {
    const action = await askQuestion(
      "What do you want to do? (add/view/delete/exit): "
    );

    if (action === "add") {
      const description = await askQuestion("Enter description: ");
      const amountStr = await askQuestion("Enter amount: ");
      const amount = parseFloat(amountStr);
      const category = await askQuestion("Enter category: ");
      const dateStr = await askQuestion("Enter date (YYYY-MM-DD): ");
      const date = new Date(dateStr);
      if (isNaN(amount)) {
        console.log("Invalid amount. Please enter a number.");
        continue;
      }
      addExpense(description, amount, category, date);
    } else if (action === "view") {
      viewExpenses();
    } else if (action === "delete") {
      const idStr = await askQuestion("Enter ID of expense to delete: ");
      const id = parseInt(idStr);
      if (isNaN(id)) {
        console.log("Invalid ID. Please enter a number.");
        continue;
      }
      deleteExpense(id);
    } else if (action === "exit") {
      console.log("Exiting expense tracker.");
      rl.close();
      break;
    }
     else {
      console.log("Invalid action. Please choose add, view, delete, or exit.");
    }
  }
}

main();

Explanation:

  • `import * as readline from ‘readline’`: Imports the `readline` module.
  • `const rl = …`: Creates an interface for reading input from the console.
  • `askQuestion()`: A helper function to ask questions and get user input. It uses `Promise` for asynchronous operations.
  • `main()`:
  • The main function that handles user interaction.
  • It presents a menu with options (add, view, delete, exit).
  • Based on the user’s choice, it prompts for necessary information and calls the relevant expense management functions.
  • It includes input validation to handle potential errors (e.g., invalid amount or ID).
  • The `rl.close()` function closes the readline interface.

To run this version:

  1. Compile the TypeScript code again: `npx tsc`
  2. Run the compiled JavaScript file: `node dist/index.js`

Now, you can interact with the expense tracker through the command line.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Type Errors: TypeScript is designed to catch type errors during development. Make sure your code adheres to the defined types. If you encounter a type error, carefully review the error message and the types of your variables and function parameters.
  • Incorrect Date Formatting: When working with dates, ensure you handle the formatting correctly. The example uses `toLocaleDateString()` for display. If you need to store dates, use the `Date` object correctly.
  • Input Validation: Always validate user input to prevent unexpected behavior. The example includes basic input validation for amount and ID. Expand this for more robust validation.
  • Incorrect File Paths: Double-check your file paths when importing modules or working with files.
  • Forgetting to Compile: Remember to compile your TypeScript code (`npx tsc`) before running the JavaScript version.

Enhancements and Next Steps

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

  • Data Persistence: Store expenses in a file (e.g., JSON, CSV) or a database (e.g., SQLite, PostgreSQL) so that data is not lost when the program closes.
  • More Advanced Reporting: Add features to generate reports, such as monthly summaries, category breakdowns, and visualizations (using a library like Chart.js).
  • User Authentication: Implement user accounts and authentication to protect user data.
  • GUI Interface: Create a graphical user interface using a framework like React, Angular, or Vue.js for a more user-friendly experience.
  • Import/Export Functionality: Allow users to import and export expense data.
  • Budgeting Features: Add budgeting capabilities, such as setting monthly budgets and tracking progress.
  • Categories Management: Allow users to create, edit, and delete expense categories.

Key Takeaways

In this tutorial, you’ve learned how to build a simple expense tracker using TypeScript. You’ve gained experience with:

  • TypeScript basics (interfaces, types, functions).
  • Project setup and configuration.
  • User input and interaction.
  • Basic data management.
  • Fundamental software development practices.

This project is a solid foundation for building more complex financial applications. Remember to experiment, explore, and expand upon these concepts to further your TypeScript skills.

FAQ

Q: What is TypeScript?

A: TypeScript is a superset of JavaScript that adds static typing. It allows you to write more robust and maintainable code by catching errors during development, before the code is run.

Q: Why use TypeScript instead of JavaScript?

A: TypeScript offers several benefits over JavaScript, including:

  • Type Safety: Catches type-related errors early.
  • Improved Code Readability: Makes code easier to understand and maintain.
  • Better Tooling: Provides better autocompletion, refactoring, and other developer tools.
  • Scalability: Makes it easier to manage large codebases.

Q: How do I compile TypeScript code?

A: You compile TypeScript code using the TypeScript compiler (tsc). In your project directory, run the command `npx tsc`. This will compile your `.ts` files into `.js` files.

Q: Can I use this expense tracker for real-world financial management?

A: This is a basic example. For real-world use, you’ll need to add features like data persistence, more robust input validation, and security measures. Consider using a dedicated financial management application for serious financial tracking.

Q: Where can I learn more about TypeScript?

A: You can find extensive documentation and tutorials on the official TypeScript website (https://www.typescriptlang.org/). There are also many online courses and resources available on platforms like Udemy, Coursera, and freeCodeCamp.

Building this expense tracker has been a journey through the fundamentals of TypeScript. From defining interfaces to handling user input, you’ve touched on key aspects of the language. This is just the beginning. The world of TypeScript is vast, offering endless possibilities for creating robust and scalable applications. Embrace the power of types, explore the advanced features, and keep coding – your journey into the world of TypeScript is only just beginning.

More posts