TypeScript: Building a Simple To-Do List with Local Storage

Written by

learnmodernjavascript

in

In the world of web development, managing tasks and staying organized is crucial. A well-designed to-do list application can significantly boost productivity, helping users keep track of their daily activities, projects, and goals. While numerous to-do list apps exist, building your own offers a fantastic learning opportunity. This tutorial will guide you through creating a simple, yet functional, to-do list application using TypeScript, incorporating local storage for data persistence, ensuring your tasks are saved even when the browser is closed.

Why TypeScript?

TypeScript, a superset of JavaScript, brings static typing to the language, enhancing code readability, maintainability, and helping catch errors early in the development process. By using TypeScript, we can define the structure of our data, making our code more robust and less prone to runtime errors. This is particularly beneficial in larger projects, but even for a simple application like a to-do list, the benefits are clear. You’ll find that refactoring and debugging become much easier with TypeScript’s type checking capabilities.

Setting Up Your Project

Before we dive into the code, let’s set up our development environment. We’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.

  1. Create a Project Directory: Open your terminal and create a new directory for your project.
mkdir typescript-todo-app
cd typescript-todo-app
  1. Initialize npm: Initialize a new npm project.
npm init -y
  1. Install TypeScript: Install TypeScript globally or locally. For this project, let’s install it locally as a dev dependency.
npm install --save-dev typescript
  1. Create a TypeScript Configuration File: Create a tsconfig.json file in the root of your project. This file configures the TypeScript compiler. You can generate a basic one using the following command:
npx tsc --init

This command creates a tsconfig.json file with default settings. You can customize these settings to fit your project needs. For this tutorial, we’ll keep the default settings, but you might want to consider adjusting the outDir option to specify where the compiled JavaScript files will be placed, and the target option to specify the ECMAScript version to compile to.

  1. Create Project Files: Create an index.html file for the user interface and an index.ts file for our TypeScript code.

Defining the To-Do Item Interface

The first step in building our to-do list is defining the structure of a to-do item. In TypeScript, we use interfaces to define the shape of an object. This ensures that our data has a consistent structure, making it easier to manage and prevent errors.

Open index.ts and add the following code:

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

This interface, TodoItem, defines three properties: id (a unique identifier), text (the task description), and completed (a boolean indicating whether the task is done). This structure is essential for organizing our tasks.

Building the User Interface (HTML)

Now, let’s create the HTML structure for our to-do list. This includes an input field for adding new tasks, a button to submit, and a list to display the tasks. Open index.html 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>
    <style>
        body {
            font-family: sans-serif;
            margin: 20px;
        }
        .todo-item {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }
        .todo-item input[type="checkbox"] {
            margin-right: 10px;
        }
        .todo-item.completed {
            text-decoration: line-through;
            color: #888;
        }
    </style>
</head>
<body>
    <h2>To-Do List</h2>
    <div>
        <input type="text" id="todoInput" placeholder="Add a task">
        <button id="addButton">Add</button>
    </div>
    <ul id="todoList"></ul>
    <script src="index.js"></script>
</body>
</html>

This HTML provides the basic structure. The <input> element with the ID todoInput will be used to enter new tasks. The <button> with the ID addButton will trigger the addition of a new task. The <ul> element with the ID todoList will display our to-do items.

Implementing the TypeScript Logic

Now, let’s write the TypeScript code that brings our to-do list to life. This involves handling user input, managing the to-do items, and updating the UI.

Open index.ts and add the following code:

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

const todoInput = document.getElementById('todoInput') as HTMLInputElement;
const addButton = document.getElementById('addButton') as HTMLButtonElement;
const todoList = document.getElementById('todoList') as HTMLUListElement;

let todos: TodoItem[] = [];

// Load todos from local storage
function loadTodos(): void {
  const storedTodos = localStorage.getItem('todos');
  if (storedTodos) {
    todos = JSON.parse(storedTodos);
    renderTodos();
  }
}

// Save todos to local storage
function saveTodos(): void {
  localStorage.setItem('todos', JSON.stringify(todos));
}

function renderTodos(): void {
  todoList.innerHTML = '';
  todos.forEach(todo => {
    const listItem = document.createElement('li');
    listItem.classList.add('todo-item');

    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.checked = todo.completed;
    checkbox.addEventListener('change', () => {
      toggleComplete(todo.id);
    });

    const textSpan = document.createElement('span');
    textSpan.textContent = todo.text;
    if (todo.completed) {
      listItem.classList.add('completed');
    }

    listItem.appendChild(checkbox);
    listItem.appendChild(textSpan);
    todoList.appendChild(listItem);
  });
}

function addTodo(): void {
  const text = todoInput.value.trim();
  if (text !== '') {
    const newTodo: TodoItem = {
      id: Date.now(),
      text, 
      completed: false,
    };
    todos.push(newTodo);
    renderTodos();
    saveTodos();
    todoInput.value = '';
  }
}

function toggleComplete(id: number): void {
  todos = todos.map(todo =>
    todo.id === id ? { ...todo, completed: !todo.completed } : todo
  );
  renderTodos();
  saveTodos();
}

addButton.addEventListener('click', addTodo);

// Load todos when the page loads
loadTodos();

Let’s break down this code:

  • Interface Definition: The TodoItem interface defines the structure of each to-do item.
  • DOM Element Selection: We select the HTML elements (input, button, list) using their IDs. The as HTMLInputElement and as HTMLButtonElement assertions tell TypeScript the specific type of these elements.
  • todos Array: This array stores our to-do items.
  • loadTodos(): This function retrieves the to-do items from local storage when the page loads.
  • saveTodos(): This function saves the to-do items to local storage whenever the todos array is updated.
  • renderTodos(): This function dynamically creates and renders the to-do items in the <ul> element. It iterates over the todos array and creates a list item (<li>) for each to-do item. It also adds event listeners to the checkboxes.
  • addTodo(): This function is called when the “Add” button is clicked. It retrieves the text from the input field, creates a new TodoItem, adds it to the todos array, calls renderTodos() to update the UI, saves the updated list to local storage, and clears the input field.
  • toggleComplete(): This function toggles the completed status of a to-do item when its checkbox is clicked. It uses the map method to create a new array with the updated item. Then, it calls renderTodos() to update the UI and saves the updated list to local storage.
  • Event Listener: An event listener is added to the “Add” button to call the addTodo() function when clicked.
  • Initial Load: The loadTodos() function is called when the page loads to load any existing to-do items from local storage.

Compiling and Running the Application

Now that we’ve written the code, it’s time to compile it and run the application. To compile the TypeScript code, open your terminal and run the following command in your project directory:

tsc

This command compiles index.ts into index.js. If you set the outDir option in your tsconfig.json file, the compiled JavaScript file will be placed in the directory you specified.

After compiling the code, open index.html in your web browser. You should see the basic to-do list interface. You can now add tasks, and they will be displayed in the list. When you refresh the page or close and reopen the browser, your tasks will still be there, thanks to local storage.

Common Mistakes and How to Fix Them

When building a to-do list application, beginners often make a few common mistakes. Here are some of them and how to fix them:

  • Incorrectly Typed DOM Elements: Forgetting to specify the correct type when selecting DOM elements (e.g., document.getElementById('myInput') as HTMLInputElement). This can lead to TypeScript errors and runtime issues. Always use type assertions to ensure that the code is type-safe.
  • Not Handling Empty Input: Not checking if the input field is empty before adding a new task. This can lead to the creation of empty to-do items. Always trim the input string and check if it’s not empty before proceeding.
  • Incorrect Data Persistence: Not saving the to-do items to local storage or not loading them correctly. This can lead to data loss when the page is refreshed. Make sure to call saveTodos() whenever the todos array is updated and call loadTodos() when the page loads.
  • Incorrectly Updating the UI: Not properly updating the UI after adding, completing, or deleting a task. This can lead to the UI not reflecting the current state of the to-do list. Always call renderTodos() after any change to the todos array.
  • Ignoring Error Handling: Not considering potential errors, such as errors when accessing local storage. While this is a simple application, it’s good practice to wrap local storage operations in try...catch blocks.

SEO Best Practices

To ensure your blog post ranks well on search engines like Google and Bing, it’s essential to follow SEO best practices.

  • Keyword Optimization: Naturally include relevant keywords in your content, such as “TypeScript,” “to-do list,” “local storage,” and “web development.”
  • Meta Description: Write a concise meta description (under 160 characters) that accurately describes the content of your blog post.
  • Heading Tags: Use heading tags (<h2>, <h3>, <h4>) to structure your content and make it easier to read.
  • Short Paragraphs: Break up your content into short paragraphs to improve readability.
  • Image Optimization: Use descriptive alt text for images to help search engines understand the context of your content.

Key Takeaways

  • TypeScript Enhances Development: TypeScript improves code quality, readability, and maintainability by adding static typing.
  • Interfaces Define Data Structure: Interfaces are crucial for defining the structure of your data, ensuring consistency and preventing errors.
  • Local Storage Persists Data: Local storage is a simple and effective way to save data in the browser, allowing your to-do items to persist across sessions.
  • Clear UI Updates are Essential: Always update the UI after any changes to the data to keep the user interface synchronized with the data.

FAQ

Here are some frequently asked questions about building a to-do list application with TypeScript:

  1. Can I use a framework like React or Angular with this approach?

    Yes, you can definitely use frameworks like React or Angular with TypeScript to build more complex to-do list applications. The core concepts of defining interfaces, handling user input, and using local storage remain the same, but the implementation will be different based on the framework you choose. Frameworks offer more advanced features and tools to manage UI components and data.

  2. How can I add the ability to delete tasks?

    To add the ability to delete tasks, you can add a delete button next to each to-do item in the renderTodos() function. When the delete button is clicked, you would call a function that removes the corresponding to-do item from the todos array, updates the UI by calling renderTodos(), and saves the changes to local storage using saveTodos(). You would also need to update the HTML to include the delete button and the corresponding event listener.

  3. How can I add the ability to edit tasks?

    To implement editing, you can add an edit icon or button next to each to-do item. When clicked, you could display an input field where the user can modify the task text. Implement a function to handle the edit, updating the task in the todos array when the user saves the changes, then re-render the list, and save the changes to local storage. You would need to add edit-related functionality to your HTML and TypeScript code.

  4. What are some alternatives to local storage for data persistence?

    Alternatives to local storage include:

    • Session Storage: Similar to local storage, but data is only stored for the duration of the browser session.
    • IndexedDB: A more advanced, client-side storage option that allows for storing more complex data and supports indexing.
    • Web SQL Database (deprecated): A client-side database that is now deprecated.
    • Server-Side Databases: For more robust and scalable solutions, you can use server-side databases (e.g., MongoDB, PostgreSQL) and interact with them using APIs.

Building a to-do list application with TypeScript is an excellent way to learn the fundamentals of web development while gaining practical experience with TypeScript. By combining TypeScript’s type safety with local storage for data persistence, you can create a functional and user-friendly application. This tutorial provides a solid foundation, and you can extend it with additional features like task deletion, editing, priority levels, and more. Experiment with different features, and embrace the learning process to become a more proficient TypeScript developer. From the initial setup to the final touches, each step builds your knowledge and skills, providing a tangible example of how TypeScript can improve your web development workflow.

More posts