Practical Projects

Learning objectives#

• Model a domain with interfaces, unions and literal types
• Write reusable generic code
• Handle external data safely
• Migrate JavaScript to TypeScript
• Build portfolio pieces that show TypeScript skills

Explanation#

Project 1 — Expense tracker (beginner): Expense interface, Category literal union, functions to add, filter and total expenses, Record<Category, number> for summaries.

Project 2 — Generic data table (intermediate): a function or React component that sorts and filters any T[] with columns typed as { key: keyof T; label: string }[].

Project 3 — Typed API client (intermediate): api<T>() helper, ApiError class, request/response DTOs derived with Omit and Partial, type guards for responses.

Project 4 — Form validator (intermediate): Validator types, a schema typed as Record<keyof FormValues, Validator[]>, results typed as Partial<Record<keyof FormValues, string>>.

Project 5 — Migration (advanced): take an old JavaScript project, add tsconfig with allowJs, rename files one at a time, then enable strict and fix the errors.

Code example: Project 1 — Typed expense tracker (solution)#

1const CATEGORIES = ['food', 'travel', 'bills', 'shopping'] as const;
2type Category = (typeof CATEGORIES)[number];
3

4interface Expense {
5  readonly id: number;
6  title: string;
7  amount: number;
8  category: Category;
9  date: Date;
10}
11

12type NewExpense = Omit<Expense, 'id'>;
13

14class ExpenseTracker {
15  #expenses: Expense[] = [];
16  #nextId = 1;
17

18  add(data: NewExpense): Expense {
19    if (data.amount <= 0) throw new Error('Amount must be positive');
20    const expense = { id: this.#nextId++, ...data };
21    this.#expenses.push(expense);
22    return expense;
23  }
24

25  byCategory(category: Category): Expense[] {
26    return this.#expenses.filter(e => e.category === category);
27  }
28

29  summary(): Record<Category, number> {
30    const totals = Object.fromEntries(CATEGORIES.map(c => [c, 0])) as Record<Category, number>;
31    for (const e of this.#expenses) totals[e.category] += e.amount;
32    return totals;
33  }
34}
35

36const tracker = new ExpenseTracker();
37tracker.add({ title: 'Lunch', amount: 250, category: 'food', date: new Date() });
38tracker.add({ title: 'Metro card', amount: 500, category: 'travel', date: new Date() });
39tracker.add({ title: 'Dinner', amount: 400, category: 'food', date: new Date() });
40console.log(tracker.summary());
41tracker.add({ title: 'Movie', amount: 300, category: 'fun', date: new Date() });
42// ✗ Type '"fun"' is not assignable to type 'Category'

{ food: 650, travel: 500, bills: 0, shopping: 0 } — and a compile error for the unknown "fun" category.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. CATEGORIES as const is the single source for both the runtime list and the Category type.
2. Expense uses readonly id and the Category union.
3. NewExpense is derived with Omit, so callers never invent ids.
4. Private #fields keep the data safe inside the class.
5. summary() returns a Record that is guaranteed to contain every category.
6. Invalid categories are rejected at compile time.

Real-world use case#

Common mistakes#

Best practices#

• Start each project by writing the types first
• Keep strict mode on
• Derive types instead of duplicating them
• Put projects on GitHub with a README explaining the type design

Remember this#

Practice exercise#

1function sortBy<T>(items: T[], key: keyof T, dir: 'asc' | 'desc' = 'asc'): T[] {
2  const factor = dir === 'asc' ? 1 : -1;
3  return [...items].sort((a, b) => (a[key] > b[key] ? 1 : a[key] < b[key] ? -1 : 0) * factor);
4}
5

6const people = [{ name: 'Ravi', age: 30 }, { name: 'Asha', age: 24 }];
7sortBy(people, 'age');        // Asha, Ravi
8sortBy(people, 'email');      // ✗ not a key of the items

Mini quiz#

Want more? Practise all TypeScript MCQs · TypeScript interview questions

Related topics#

My notes#

Saved in this browser.