Building a Simple To-Do App with TypeScript: Step-by-Step Beginner Tutorial

Welcome to this beginner-friendly tutorial where we will build a simple To-Do app using TypeScript. If you have some basic understanding of JavaScript or TypeScript, this guide will help you create an app that lets users add and remove tasks. We will focus on clear, easy-to-follow steps with code examples you can use right away.

First, let's set up a basic TypeScript environment. You can use any code editor like VS Code. Make sure you have Node.js installed, then create a new folder for your project and initialize it with npm:

npm init -y
npm install typescript --save-dev
npx tsc --init

This sets up a TypeScript project. Next, create a file called `app.ts` where we will write our code. Our To-Do app will manage a list of tasks using an array of objects. Each task will have an ID, a description, and a completed status.

type Task = {
  id: number;
  description: string;
  completed: boolean;
};

let tasks: Task[] = [];

Now, let's add a function to create new tasks and add them to the list. This function will accept a task description as a string and push a new task object to the tasks array.

function addTask(description: string): void {
  const newTask: Task = {
    id: tasks.length + 1,
    description: description,
    completed: false
  };
  tasks.push(newTask);
  console.log(`Task added: ${description}`);
}

To display all tasks, let's write a function that prints them in a readable form. We will show the task ID, description, and whether it’s completed.

function listTasks(): void {
  if (tasks.length === 0) {
    console.log("No tasks yet!");
    return;
  }
  console.log("Current Tasks:");
  tasks.forEach(task => {
    const status = task.completed ? "✔" : "✘";
    console.log(`${task.id}. [${status}] ${task.description}`);
  });
}

Next, we will add a function to mark a task as completed by its ID. This function will find the task and update its completed property.

function completeTask(id: number): void {
  const task = tasks.find(t => t.id === id);
  if (task) {
    task.completed = true;
    console.log(`Task completed: ${task.description}`);
  } else {
    console.log(`Task with ID ${id} not found.`);
  }
}

Finally, we want to remove a task from the list after completion or if it is no longer needed. Let's implement a function for that.

function removeTask(id: number): void {
  const index = tasks.findIndex(t => t.id === id);
  if (index !== -1) {
    const removed = tasks.splice(index, 1)[0];
    console.log(`Task removed: ${removed.description}`);
  } else {
    console.log(`Task with ID ${id} not found.`);
  }
}

Let's put it all together by calling these methods and observing the output.

addTask("Learn TypeScript basics");
addTask("Build a simple To-Do app");
listTasks();
completeTask(1);
listTasks();
removeTask(2);
listTasks();

When you run your TypeScript code (compiled to JavaScript using `npx tsc app.ts` and then `node app.js`), you should see tasks being added, marked as complete, and removed with the console reflecting each change.

This simple app demonstrates some of TypeScript's power like type safety and structured code design. You can extend this app by adding features like task editing, saving tasks to local storage, or even building a user interface with frameworks like React. But for now, you have a solid beginner project to practice TypeScript basics and understand fundamental concepts.

Happy coding and keep exploring TypeScript!