TypeScript Todo App

• Add and delete tasks
• Mark tasks as complete with a strikethrough
• Filter view by All, Active, or Completed
• TypeScript interfaces used for all data structures

Follow these steps in order. Each one builds on the previous.

1. Step 1

   Initialise the project with npm init and install TypeScript

2. Step 2

   Create tsconfig.json targeting ES6 with strict mode on

3. Step 3

   Define a Task interface with id, title, and completed fields

4. Step 4

   Write addTask(), deleteTask(), and toggleTask() functions with full types

5. Step 5

   Build the HTML structure for the task list

6. Step 6

   Write a render() function that re-draws the list from state

7. Step 7

   Compile with tsc and wire up the HTML file

8. Step 8

   Test add, delete, toggle, and filter interactions

• TypeScript Handbook
• TypeScript in 5 minutes
• MDN DOM reference