Building Vitta Nipun: My first TypeScript project

The Genesis of Vitta Nipun

Vitta Nipun is a personal finance management app. It aggregates monthly transactions, categories budget limits, and forecasts savings. Initially, I started writing this in plain React and JavaScript. As the state object grew (tracking complex recurring invoices, currencies, and budgets), debugging became a nightmare. One minor typo in a key name would break the graph calculation silently.

The Switch to TypeScript

I paused development for two days to migrate the codebase to TypeScript. Here is the transaction interface that saved the project's stability:

export type TransactionCategory = 'Food' | 'Utilities' | 'Rent' | 'Salary' | 'Investments';

export interface Transaction {
  id: string;
  amount: number;
  type: 'income' | 'expense';
  category: TransactionCategory;
  date: string;
  description?: string;
  isRecurring: boolean;
}

export interface Budget {
  category: TransactionCategory;
  limit: number;
  spent: number;
}

What Broke During Migration

Almost everything! I had to clean up dozens of implicit any types, especially in my custom hooks handling localStorage caches and charting data. But as soon as the compiler built with zero warnings, the app ran flawlessly. The IDE autocomplete meant I didn't have to look up the database structure ever again.

The Verdict

If you're building anything more complex than a static landing page, starting with TypeScript pays off in safety, efficiency, and confidence. I will never write complex state systems in vanilla JavaScript again.