Type-Safe To-Do List with TypeScript

A Type-Safe To-Do List should prove that you can model data clearly. The most common mistake is adding TypeScript to the project but still using any for tasks, props, events, and state updates. The app may work, but it does not demonstrate real type safety. TypeScript becomes decoration instead of a tool that prevents invalid data from moving through the application.

Problematic approach:

          const [tasks, setTasks] = useState<any[]>([]);

          function addTask(task: any) {
            setTasks([...tasks, task]);
          }

          function TaskItem({ task }: any) {
            return (
              <li>
                {task.name}
              </li>
            );
          }

This code accepts anything. A task could have name, title, text, or no readable field at all. TypeScript cannot help because the code explicitly disables useful checking.

Better approach:

          export interface Task {
            id: string;
            title: string;
            completed: boolean;
            createdAt: string;
          }

          const [tasks, setTasks] = useState<Task[]>([]);

          function addTask(title: string): void {
            const newTask: Task = {
              id: crypto.randomUUID(),
              title,
              completed: false,
              createdAt: new Date().toISOString()
            };

            setTasks((currentTasks) => [
              ...currentTasks,
              newTask
            ]);
          }

Typed component props:

          interface TaskItemProps {
            task: Task;
            onToggle: (taskId: string) => void;
            onDelete: (taskId: string) => void;
          }

          function TaskItem({ task, onToggle, onDelete }: TaskItemProps) {
            return (
              <li>
                <span>{task.title}</span>

                <button type="button" onClick={() => onToggle(task.id)}>
                  {task.completed ? "Undo" : "Complete"}
                </button>

                <button type="button" onClick={() => onDelete(task.id)}>
                  Delete
                </button>
              </li>
            );
          }

Pay attention to: Avoid any in beginner TypeScript projects. Define task interfaces, typed props, typed callbacks, and typed state from the beginning.

A to-do list seems simple because every task has a title and a completed state. But once users can toggle or delete tasks, every task needs a stable identifier. Beginners often use the array index as the task ID. This works until the list changes order, a task is deleted, or filters hide some items. Then the wrong task may be updated.

Problematic code:

          const tasks = [
            { title: "Learn TypeScript", completed: false },
            { title: "Build todo app", completed: false }
          ];

          function toggleTask(index: number): void {
            setTasks((currentTasks) => {
              return currentTasks.map((task, taskIndex) => {
                if (taskIndex === index) {
                  return {
                    ...task,
                    completed: !task.completed
                  };
                }

                return task;
              });
            });
          }

This relies on the task position. If a filter is active or an item is removed, the index may no longer point to the task the user intended to update.

Better approach:

          interface Task {
            id: string;
            title: string;
            completed: boolean;
            createdAt: string;
          }

          function createTask(title: string): Task {
            return {
              id: crypto.randomUUID(),
              title,
              completed: false,
              createdAt: new Date().toISOString()
            };
          }

          function toggleTask(taskId: string): void {
            setTasks((currentTasks) => {
              return currentTasks.map((task) => {
                if (task.id !== taskId) {
                  return task;
                }

                return {
                  ...task,
                  completed: !task.completed
                };
              });
            });
          }

Rendering with stable keys:

          {visibleTasks.map((task) => (
            <TaskItem
              key={task.id}
              task={task}
              onToggle={toggleTask}
              onDelete={deleteTask}
            />
          ))}

Pay attention to: Use stable IDs for every task. Do not use array indexes for updates or React keys when items can be added, deleted, reordered, or filtered.

Type safety does not automatically make state updates safe. A common mistake is finding a task object and changing it directly. In React and Next.js apps, direct mutation can cause confusing render behavior because the array or object reference may not change in the way React expects.

Problematic approach:

          function toggleTask(taskId: string): void {
            const task = tasks.find((item) => item.id === taskId);

            if (task) {
              task.completed = !task.completed;
            }

            setTasks(tasks);
          }

This changes the existing task object. The code is typed, but the update pattern is still fragile because it mutates existing state.

Better immutable update:

          function toggleTask(taskId: string): void {
            setTasks((currentTasks) => {
              return currentTasks.map((task) => {
                if (task.id !== taskId) {
                  return task;
                }

                return {
                  ...task,
                  completed: !task.completed
                };
              });
            });
          }

          function deleteTask(taskId: string): void {
            setTasks((currentTasks) => {
              return currentTasks.filter((task) => task.id !== taskId);
            });
          }

Optional readonly model:

          export interface Task {
            readonly id: string;
            readonly title: string;
            readonly completed: boolean;
            readonly createdAt: string;
          }

Using readonly is not required for a beginner project, but it helps communicate that task objects should be replaced through state updates rather than changed directly.

Pay attention to: TypeScript helps define valid data, but you still need predictable update patterns. Prefer immutable state updates for add, toggle, edit, delete, and clear-completed actions.

To-do apps often include filters such as all, active, and completed. A common mistake is storing the filter as a regular string. That allows invalid values like "done", "finished", "activee", or an empty string. The UI may render nothing or behave unpredictably, and TypeScript will not warn you if the filter type is too loose.

Problematic code:

          const [filter, setFilter] = useState<string>("all");

          function getVisibleTasks(tasks: Task[]) {
            if (filter === "active") {
              return tasks.filter((task) => !task.completed);
            }

            if (filter === "completed") {
              return tasks.filter((task) => task.completed);
            }

            return tasks;
          }

          setFilter("complete");

TypeScript allows "complete" because the filter is just a string, even though the app expects "completed".

Better approach:

          type TaskFilter = "all" | "active" | "completed";

          const [filter, setFilter] = useState<TaskFilter>("all");

          function getVisibleTasks(tasks: Task[], filter: TaskFilter): Task[] {
            switch (filter) {
              case "active":
                return tasks.filter((task) => !task.completed);

              case "completed":
                return tasks.filter((task) => task.completed);

              case "all":
                return tasks;
            }
          }

Typed filter options:

          const filterOptions: Array<{
            label: string;
            value: TaskFilter;
          }> = [
            { label: "All", value: "all" },
            { label: "Active", value: "active" },
            { label: "Completed", value: "completed" }
          ];

Material UI example:

          <ToggleButtonGroup
            value={filter}
            exclusive
            onChange={(_, nextFilter: TaskFilter | null) => {
              if (nextFilter) {
                setFilter(nextFilter);
              }
            }}
          >
            {filterOptions.map((option) => (
              <ToggleButton key={option.value} value={option.value}>
                {option.label}
              </ToggleButton>
            ))}
          </ToggleButtonGroup>

Pay attention to: Use union types for small sets of allowed values. This is one of the easiest ways to make a beginner TypeScript project feel genuinely type-safe.

If you add persistence, do not assume saved data is always valid. localStorage can contain old data from a previous version, manually edited values, corrupted JSON, or a shape that no longer matches your Task interface. TypeScript checks your code at build time, but it does not automatically validate runtime data from browser storage.

Problematic code:

          function loadTasks(): Task[] {
            return JSON.parse(localStorage.getItem("tasks") || "[]");
          }

          const [tasks, setTasks] = useState<Task[]>(loadTasks);

This tells TypeScript the result is Task[], but it may not be true. If localStorage contains invalid data, the app can break when rendering or updating tasks.

Better approach:

          function isTask(value: unknown): value is Task {
            if (!value || typeof value !== "object") {
              return false;
            }

            const task = value as Record<string, unknown>;

            return (
              typeof task.id === "string" &&
              typeof task.title === "string" &&
              typeof task.completed === "boolean" &&
              typeof task.createdAt === "string"
            );
          }

          function loadTasks(): Task[] {
            const savedTasks = localStorage.getItem("tasks");

            if (!savedTasks) {
              return [];
            }

            try {
              const parsedTasks: unknown = JSON.parse(savedTasks);

              if (!Array.isArray(parsedTasks)) {
                return [];
              }

              return parsedTasks.filter(isTask);
            } catch {
              localStorage.removeItem("tasks");
              return [];
            }
          }

Saving typed data:

          useEffect(() => {
            localStorage.setItem("tasks", JSON.stringify(tasks));
          }, [tasks]);

Pay attention to: Runtime data still needs validation. Use type guards when reading from localStorage, APIs, URL params, or any external source.