TypeScript Tutorial: Build a Simple Interactive To-Do List

Written by

learnmodernjavascript

in

Are you tired of juggling tasks in your head, losing track of deadlines, and feeling overwhelmed by your to-do list? In today’s fast-paced world, staying organized is crucial. A well-designed to-do list can be your secret weapon, helping you prioritize tasks, manage your time effectively, and boost your productivity. This tutorial will guide you through building a simple, yet functional, interactive to-do list application using TypeScript. We’ll explore the core concepts of TypeScript, learn how to handle user input, and manipulate the DOM to create a dynamic and engaging user experience. By the end of this tutorial, you’ll have a practical application that you can customize and expand upon, along with a solid understanding of TypeScript fundamentals.

Why TypeScript?

Before we dive into the code, let’s talk about why we’re using TypeScript. TypeScript is a superset of JavaScript that adds static typing. This means that you can define the types of variables, function parameters, and return values. This provides several benefits:

  • Early Error Detection: TypeScript catches errors during development, before you even run your code. This saves you time and frustration by preventing common mistakes.
  • Improved Code Readability: Type annotations make your code easier to understand and maintain. They act as self-documenting comments, clearly indicating the expected data types.
  • Enhanced Code Completion: TypeScript provides better code completion and suggestions in your IDE, making you more productive.
  • Refactoring Safety: With TypeScript, refactoring becomes safer because the compiler can help you identify and fix potential issues.

In essence, TypeScript helps you write more robust, maintainable, and scalable code. It’s a valuable skill for any modern web developer.

Setting Up Your Project

Let’s get started by setting up our project. You’ll need Node.js and npm (Node Package Manager) installed on your system. If you don’t have them, you can download them from the official Node.js website. Open your terminal or command prompt and follow these steps:

  1. Create a Project Directory: Create a new directory for your project and navigate into it.
  2. Initialize npm: Run npm init -y. This will create a package.json file in your project directory.
  3. Install TypeScript: Run npm install typescript --save-dev. This will install TypeScript as a development dependency.
  4. Create a tsconfig.json file: Run npx tsc --init. This will generate a tsconfig.json file, which configures the TypeScript compiler. You can customize the settings in this file to fit your needs. For this tutorial, you can use the default settings.
  5. Create an index.html file: Create an index.html file in your project directory. This will be the entry point for your application.
  6. Create an index.ts file: Create an index.ts file in your project directory. This is where we’ll write our TypeScript code.

Your project structure should now look something like this:

my-todo-list/
├── index.html
├── index.ts
├── node_modules/
├── package.json
├── package-lock.json
└── tsconfig.json

Writing the HTML

Let’s start by writing the HTML for our to-do list application. Open your index.html file and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>To-Do List</h1>
        <input type="text" id="taskInput" placeholder="Add a task...">
        <button id="addTaskButton">Add</button>
        <ul id="taskList">
            <!-- Tasks will be added here -->
        </ul>
    </div>
    <script src="index.js"></script>
</body>
</html>

This HTML provides the basic structure for our application. We have a title, an input field for adding tasks, a button to add tasks, and an unordered list (<ul>) to display the tasks. We’ve also included a link to a CSS file (style.css) for styling and a script tag to include our compiled JavaScript file (index.js).

Styling with CSS (Optional)

For a basic style, create a file named style.css in your project directory and add the following CSS rules. This makes the application more visually appealing. The styling is optional, but it enhances the user experience.

body {
    font-family: sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 80%;
    max-width: 400px;
}

h1 {
    text-align: center;
    color: #333;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

button:hover {
    background-color: #3e8e41;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    padding: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

li:last-child {
    border-bottom: none;
}

.delete-button {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.delete-button:hover {
    background-color: #da190b;
}

Writing the TypeScript Code

Now, let’s write the TypeScript code that will bring our to-do list to life. Open your index.ts file and add the following code:


// Define a Task interface
interface Task {
  id: number;
  text: string;
  completed: boolean;
}

// Get references to HTML elements
const taskInput = document.getElementById('taskInput') as HTMLInputElement;
const addTaskButton = document.getElementById('addTaskButton') as HTMLButtonElement;
const taskList = document.getElementById('taskList') as HTMLUListElement;

// Initialize task array and next ID
let tasks: Task[] = [];
let nextId: number = 1;

// Function to add a new task
function addTask() {
  const taskText = taskInput.value.trim();
  if (taskText !== '') {
    const newTask: Task = {
      id: nextId++,
      text: taskText,
      completed: false,
    };
    tasks.push(newTask);
    renderTasks();
    taskInput.value = ''; // Clear the input field
  }
}

// Function to remove a task
function removeTask(id: number) {
  tasks = tasks.filter((task) => task.id !== id);
  renderTasks();
}

// Function to toggle task completion
function toggleTaskCompletion(id: number) {
  tasks = tasks.map((task) =>
    task.id === id ? { ...task, completed: !task.completed } : task
  );
  renderTasks();
}

// Function to render tasks to the DOM
function renderTasks() {
  taskList.innerHTML = ''; // Clear the task list
  tasks.forEach((task) => {
    const listItem = document.createElement('li');
    listItem.innerHTML = `
            <input type="checkbox" ${task.completed ? 'checked' : ''} data-id="${task.id}">
            <span style="text-decoration: ${task.completed ? 'line-through' : 'none'}">${task.text}</span>
            <button class="delete-button" data-id="${task.id}">Delete</button>
        `;

    // Add event listeners
    const checkbox = listItem.querySelector('input[type="checkbox"]') as HTMLInputElement;
    const deleteButton = listItem.querySelector('.delete-button') as HTMLButtonElement;

    checkbox.addEventListener('change', () => {
      toggleTaskCompletion(task.id);
    });

    deleteButton.addEventListener('click', () => {
      removeTask(task.id);
    });
    taskList.appendChild(listItem);
  });
}

// Add event listener to the add button
addTaskButton.addEventListener('click', addTask);

Let’s break down this code step by step:

1. Defining the Task Interface

We start by defining a Task interface. This interface specifies the structure of our task objects. It includes three properties: id (a number), text (a string), and completed (a boolean). This interface helps us ensure that our task objects have the correct properties and data types.


interface Task {
  id: number;
  text: string;
  completed: boolean;
}

2. Getting References to HTML Elements

We then get references to the HTML elements we’ll be interacting with. We use document.getElementById() to get the input field, the add button, and the task list. We also use type assertions (as HTMLInputElement, as HTMLButtonElement, as HTMLUListElement) to tell TypeScript the specific type of each element. This allows us to use specific properties and methods of these elements without type errors.


const taskInput = document.getElementById('taskInput') as HTMLInputElement;
const addTaskButton = document.getElementById('addTaskButton') as HTMLButtonElement;
const taskList = document.getElementById('taskList') as HTMLUListElement;

3. Initializing Variables

We initialize two variables: tasks, an array to store our tasks, and nextId, a number to keep track of the next available ID for a new task. We initialize tasks as an empty array of type Task[].


let tasks: Task[] = [];
let nextId: number = 1;

4. Adding a Task (addTask Function)

The addTask function is responsible for adding new tasks to the tasks array. It gets the task text from the input field, checks if it’s not empty, creates a new Task object, adds it to the tasks array, calls the renderTasks function to update the DOM, and clears the input field.


function addTask() {
  const taskText = taskInput.value.trim();
  if (taskText !== '') {
    const newTask: Task = {
      id: nextId++,
      text: taskText,
      completed: false,
    };
    tasks.push(newTask);
    renderTasks();
    taskInput.value = ''; // Clear the input field
  }
}

5. Removing a Task (removeTask Function)

The removeTask function removes a task from the tasks array based on its ID. It uses the filter method to create a new array that excludes the task with the specified ID. It then calls renderTasks to update the DOM.


function removeTask(id: number) {
  tasks = tasks.filter((task) => task.id !== id);
  renderTasks();
}

6. Toggling Task Completion (toggleTaskCompletion Function)

The toggleTaskCompletion function toggles the completed status of a task. It uses the map method to create a new array where the completed property of the task with the specified ID is flipped (from true to false or vice versa). It then calls renderTasks to update the DOM.


function toggleTaskCompletion(id: number) {
  tasks = tasks.map((task) =>
    task.id === id ? { ...task, completed: !task.completed } : task
  );
  renderTasks();
}

7. Rendering Tasks (renderTasks Function)

The renderTasks function is responsible for updating the DOM to reflect the current state of the tasks array. It first clears the task list by setting taskList.innerHTML = ''. Then, it iterates through the tasks array and creates a list item (<li>) for each task. The list item includes a checkbox, the task text (with a line-through if the task is completed), and a delete button. Event listeners are added to the checkbox to toggle task completion and to the delete button to remove the task. Finally, each list item is appended to the taskList.


function renderTasks() {
  taskList.innerHTML = ''; // Clear the task list
  tasks.forEach((task) => {
    const listItem = document.createElement('li');
    listItem.innerHTML = `
            <input type="checkbox" ${task.completed ? 'checked' : ''} data-id="${task.id}">
            <span style="text-decoration: ${task.completed ? 'line-through' : 'none'}">${task.text}</span>
            <button class="delete-button" data-id="${task.id}">Delete</button>
        `;

    // Add event listeners
    const checkbox = listItem.querySelector('input[type="checkbox"]') as HTMLInputElement;
    const deleteButton = listItem.querySelector('.delete-button') as HTMLButtonElement;

    checkbox.addEventListener('change', () => {
      toggleTaskCompletion(task.id);
    });

    deleteButton.addEventListener('click', () => {
      removeTask(task.id);
    });
    taskList.appendChild(listItem);
  });
}

8. Adding Event Listeners

Finally, we add an event listener to the add button (addTaskButton) to call the addTask function when the button is clicked. This ensures that when the user clicks the “Add” button, a new task is added to the list.


addTaskButton.addEventListener('click', addTask);

Compiling and Running the Code

Now that we have written our TypeScript code, we need to compile it into JavaScript. Open your terminal and run the following command in your project directory:

tsc

This command will use the TypeScript compiler (tsc) to compile your index.ts file into a index.js file. The generated JavaScript file can then be included in your HTML file.

To run the application, simply open your index.html file in a web browser. You should see the to-do list interface. You can now add tasks, mark them as completed, and delete them.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them when working with TypeScript and this to-do list application:

  • Type Errors: TypeScript is strict about types. If you try to assign a value of the wrong type to a variable, the compiler will throw an error. For example, if you try to assign a string to a variable that is declared as a number, you’ll get an error. To fix this, make sure your variables are assigned values of the correct type.
  • Incorrect Element Selection: If you misspell the ID of an HTML element when using document.getElementById(), the function will return null. This can lead to errors when you try to interact with the element. Always double-check that the ID in your TypeScript code matches the ID in your HTML code. You can use the browser’s developer tools to inspect the HTML and verify the IDs.
  • Event Listener Issues: Make sure you are correctly attaching event listeners to the appropriate elements. For example, if you attach an event listener to a button that doesn’t exist, the event listener will not work. Also, ensure that the event listener is attached *after* the element has been created and added to the DOM.
  • Incorrect Data Handling: When adding, removing, or updating tasks, ensure that you are correctly manipulating the tasks array. Common mistakes include incorrect array indexing, or forgetting to update the DOM after modifying the array. Double-check your logic and use console.log() to debug the state of your array.
  • Missing Type Annotations: While TypeScript can infer types in many cases, it’s good practice to explicitly annotate your variables, function parameters, and return values. This makes your code more readable and helps prevent type-related errors.

Key Takeaways

  • TypeScript Fundamentals: You’ve learned the basics of TypeScript, including interfaces, type annotations, and how to work with the DOM.
  • Event Handling: You’ve learned how to add event listeners to HTML elements to handle user interactions.
  • DOM Manipulation: You’ve learned how to create, modify, and delete HTML elements dynamically.
  • Project Structure: You’ve gained experience setting up a TypeScript project and organizing your code.

FAQ

  1. Can I add more features to this to-do list?

    Yes, absolutely! You can add features such as due dates, task priorities, categories, and the ability to save the tasks to local storage so they persist across sessions. You can also integrate with a backend database to store tasks remotely.

  2. How can I style the to-do list differently?

    You can customize the appearance of the to-do list by modifying the CSS in the style.css file. Experiment with different colors, fonts, layouts, and other styling properties to create a design that suits your preferences.

  3. How can I deploy this to-do list online?

    You can deploy your to-do list online using various platforms such as Netlify, Vercel, or GitHub Pages. These platforms allow you to host your static website for free or at a low cost. You’ll need to build your TypeScript code (tsc) and then deploy the HTML, CSS, and JavaScript files to the hosting platform.

  4. What are the benefits of using an interface in TypeScript?

    Interfaces define the structure of objects. They provide a contract that ensures that objects conform to a specific shape. This helps with code organization, readability, and maintainability. Interfaces are particularly useful when working with complex data structures and when defining the types of function parameters and return values.

With this foundation, you can now embark on more complex projects, further refining your skills and creating innovative web applications.

More posts