Building Your First To-Do App with TypeScript: A Step-by-Step Tutorial
Learn how to build a simple and functional To-Do application using TypeScript with this easy step-by-step tutorial designed for beginners.
Welcome to this beginner-friendly tutorial where you will build your very first To-Do app using TypeScript! This step-by-step guide will teach you the fundamentals of TypeScript while creating a practical app that lets users add and manage tasks.
Before we start coding, make sure you have Node.js installed on your computer. Also, we'll use a simple HTML page and TypeScript to create the app. Let's begin by setting up the structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To-Do App with TypeScript</title>
</head>
<body>
<h1>My To-Do List</h1>
<input type="text" id="taskInput" placeholder="Enter a new task" />
<button id="addTaskBtn">Add Task</button>
<ul id="taskList"></ul>
<script src="app.js"></script>
</body>
</html>This is a simple HTML setup with an input box to enter tasks, a button to add tasks, and an unordered list to display the tasks. Now, let's write the TypeScript code that will power the app.
interface Task {
id: number;
description: string;
completed: boolean;
}
const taskInput = document.getElementById('taskInput') as HTMLInputElement;
const addTaskBtn = document.getElementById('addTaskBtn') as HTMLButtonElement;
const taskList = document.getElementById('taskList') as HTMLUListElement;
let tasks: Task[] = [];
let taskId = 0;
function addTask(description: string) {
const newTask: Task = {
id: taskId++,
description,
completed: false,
};
tasks.push(newTask);
renderTasks();
}
function renderTasks() {
taskList.innerHTML = '';
tasks.forEach(task => {
const li = document.createElement('li');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = task.completed;
checkbox.addEventListener('change', () => toggleTaskCompletion(task.id));
const span = document.createElement('span');
span.textContent = task.description;
if (task.completed) {
span.style.textDecoration = 'line-through';
}
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.addEventListener('click', () => deleteTask(task.id));
li.appendChild(checkbox);
li.appendChild(span);
li.appendChild(deleteBtn);
taskList.appendChild(li);
});
}
function toggleTaskCompletion(id: number) {
tasks = tasks.map(task =>
task.id === id ? { ...task, completed: !task.completed } : task
);
renderTasks();
}
function deleteTask(id: number) {
tasks = tasks.filter(task => task.id !== id);
renderTasks();
}
addTaskBtn.addEventListener('click', () => {
const description = taskInput.value.trim();
if(description) {
addTask(description);
taskInput.value = '';
}
});Let's break down what this code does. We define a Task interface describing each to-do item with an id, description, and whether it’s completed. We keep track of tasks in an array and use functions to add, render, toggle completion, and delete tasks. Event listeners are used to respond when the user clicks buttons or checks off tasks.
To try this app out, save the HTML in an index.html file and the TypeScript code in an app.ts file. Use the TypeScript compiler (tsc) to compile app.ts to app.js by running `tsc app.ts` in your terminal. Then open index.html in your browser to interact with your To-Do app.
Congratulations! You have successfully built a simple To-Do app using TypeScript. This project introduced you to basic TypeScript features like interfaces, types, and DOM manipulation. Keep exploring TypeScript and try adding more features like task editing or persistent storage. Happy coding!