TypeScript Tutorial: Building a Simple Web-Based To-Do List

Written by

learnmodernjavascript

in

Are you tired of juggling multiple to-do lists, sticky notes, and scattered reminders? In today’s fast-paced world, staying organized is crucial. A well-structured to-do list can be your best friend, helping you prioritize tasks, track progress, and boost productivity. But, what if you could create your own, tailored to your exact needs? This tutorial will guide you through building a simple, yet functional, web-based to-do list application using TypeScript. We’ll break down the process step-by-step, making it easy to understand, even if you’re new to TypeScript or web development.

Why TypeScript?

Before we dive in, let’s address the elephant in the room: why TypeScript? TypeScript is a superset of JavaScript that adds static typing. This means you can specify the data types of variables, function parameters, and return values. This offers several advantages:

  • Early Error Detection: TypeScript catches errors during development, before you even run your code. This saves you time and frustration by identifying bugs early in the process.
  • Improved Code Readability: Types make your code easier to understand and maintain. They act as self-documenting guides, clearly indicating what kind of data to expect.
  • Enhanced Code Completion and Refactoring: TypeScript provides better code completion and refactoring support in your IDE, making you more productive.
  • Large-Scale Application Support: TypeScript is excellent for building large, complex applications, helping to manage code complexity.

In essence, TypeScript helps you write cleaner, more maintainable, and less error-prone code, making it an excellent choice for any web development project.

Setting Up Your Development Environment

To get started, you’ll need a few things:

  • Node.js and npm (Node Package Manager): These are essential for running JavaScript and managing project dependencies. You can download them from https://nodejs.org/.
  • A Code Editor: Visual Studio Code (VS Code) is a popular and free choice, offering excellent TypeScript support. You can download it from https://code.visualstudio.com/.
  • A Terminal: This is where you’ll run commands to set up your project and build your code.

Once you have these installed, let’s create a new project:

  1. Create a Project Directory: Open your terminal and create a new directory for your project. For example, `mkdir todo-app` and then navigate into it: `cd todo-app`.
  2. Initialize a Node.js Project: Run `npm init -y` inside your project directory. This creates a `package.json` file, which will manage your project’s dependencies.
  3. Install TypeScript: Run `npm install typescript –save-dev`. The `–save-dev` flag indicates that TypeScript is a development dependency (i.e., it’s needed during development but not when the application is deployed).
  4. Create a `tsconfig.json` file: This file configures the TypeScript compiler. Run `npx tsc –init` in your terminal. This will create a `tsconfig.json` file with default settings. You can customize these settings later.
  5. Create your TypeScript file: Create a file named `app.ts` (or any other name you prefer) in your project directory. This is where you’ll write your TypeScript code.

Building the To-Do List Application

Now, let’s start building the application. We’ll break it down into smaller, manageable parts.

1. Defining the Task Interface

First, we need to define what a task looks like. We’ll use an interface to represent a task. Open your `app.ts` file and add the following code:

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

This interface defines three properties for each task:

  • id: A unique number to identify the task.
  • text: The task description (e.g., “Buy groceries”).
  • completed: A boolean value indicating whether the task is completed or not.

2. Creating the Task List

Next, we’ll create an array to store our tasks. Add the following code below the `Task` interface:

let tasks: Task[] = [];

This declares a variable named `tasks` and initializes it as an empty array of `Task` objects.

3. Adding Tasks

Let’s create a function to add new tasks to the list. Add the following code:

function addTask(text: string): void {
  const newTask: Task = {
    id: Date.now(), // Generate a unique ID using the current timestamp
    text: text,
    completed: false,
  };
  tasks.push(newTask);
  renderTasks(); // Re-render the task list to reflect the changes
}

This function:

  • Takes a `text` parameter, which is the task description.
  • Creates a new `Task` object.
  • Assigns a unique `id` using `Date.now()`.
  • Sets `completed` to `false` by default.
  • Pushes the new task to the `tasks` array.
  • Calls `renderTasks()` to update the display. We’ll define `renderTasks()` later.

4. Marking Tasks as Complete

We’ll create a function to toggle the completion status of a task. Add the following code:

function toggleTaskCompletion(id: number): void {
  const taskIndex = tasks.findIndex((task) => task.id === id);
  if (taskIndex !== -1) {
    tasks[taskIndex].completed = !tasks[taskIndex].completed;
    renderTasks();
  }
}

This function:

  • Takes an `id` parameter, which is the ID of the task to toggle.
  • Uses `findIndex()` to find the index of the task in the `tasks` array.
  • If the task is found (index is not -1), it toggles the `completed` property.
  • Calls `renderTasks()` to update the display.

5. Rendering the Task List

Now, let’s create the `renderTasks()` function, which will display the tasks in the browser. Add the following code:

function renderTasks(): void {
  const taskListElement = document.getElementById('taskList');
  if (!taskListElement) return; // Exit if the element is not found

  taskListElement.innerHTML = ''; // Clear the existing list

  tasks.forEach((task) => {
    const listItem = document.createElement('li');
    listItem.innerHTML = `
      
      <span>${task.text}</span>
    `;

    // Add event listener to the checkbox
    const checkbox = listItem.querySelector('input[type="checkbox"]');
    if (checkbox) {
      checkbox.addEventListener('change', () => {
        const taskId = parseInt(checkbox.getAttribute('data-id') || '0');
        toggleTaskCompletion(taskId);
      });
    }

    taskListElement.appendChild(listItem);
  });
}

This function:

  • Gets the HTML element with the ID `taskList`. This is where the tasks will be displayed.
  • Clears the existing content of the `taskList` element.
  • Iterates through the `tasks` array.
  • For each task, it creates a list item (`<li>`) and sets its HTML content.
  • Includes a checkbox to mark tasks as complete, and sets the `checked` attribute based on `task.completed`.
  • Adds an event listener to the checkbox to call `toggleTaskCompletion()` when the checkbox state changes.
  • Appends the list item to the `taskList` element.

6. Adding User Input

We need a way for the user to add new tasks. We’ll create an input field and a button. Add the following HTML to your `index.html` file (or create one if you don’t have it):

<!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>
</head>
<body>
    <h1>To-Do List</h1>
    <input type="text" id="taskInput" placeholder="Add a task...">
    <button id="addTaskButton">Add</button>
    <ul id="taskList"></ul>
    <script src="app.js"></script>
</body>
</html>

And then add the following code to your `app.ts` file to handle user input:


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

if (addTaskButton) {
  addTaskButton.addEventListener('click', () => {
    const taskText = taskInput.value.trim();
    if (taskText) {
      addTask(taskText);
      taskInput.value = ''; // Clear the input field after adding the task
    }
  });
}

This code:

  • Gets references to the input field (`taskInput`) and the add button (`addTaskButton`).
  • Adds an event listener to the add button.
  • When the button is clicked, it gets the text from the input field.
  • If the input text is not empty, it calls `addTask()` to add the task and clears the input field.

7. Compiling and Running the Application

Now, let’s compile the TypeScript code to JavaScript and run the application.

  1. Compile the TypeScript code: In your terminal, run `npx tsc`. This command uses the TypeScript compiler to convert your `app.ts` file into a `app.js` file.
  2. Open `index.html` in your browser: Double-click `index.html` to open it in your web browser. You should see the to-do list interface with the input field, add button, and an empty list.
  3. Add tasks: Type a task in the input field and click the “Add” button. The task should appear in the list.
  4. Mark tasks as complete: Click the checkboxes to mark tasks as complete.

Congratulations! You’ve built a simple to-do list application using TypeScript.

Common Mistakes and How to Fix Them

1. Not Specifying Types

One of the most common mistakes is not using types effectively. While TypeScript allows you to write JavaScript-like code without types, it defeats the purpose of using TypeScript. Always specify types for variables, function parameters, and return values. This will help you catch errors early and make your code more readable.

Fix: Review your code and add type annotations where they are missing. For example, instead of `let x = 10;`, use `let x: number = 10;`.

2. Incorrect DOM Element Selection

When working with the DOM (Document Object Model), it’s important to select elements correctly. For example, if you use `document.getElementById(‘elementId’)`, you might get a null value if the element doesn’t exist. This can lead to errors.

Fix: Use type assertions to tell TypeScript the type of the element you are selecting. For instance, `const element = document.getElementById(‘elementId’) as HTMLInputElement;`. This will tell TypeScript that the element is an HTML input element. Also, check for null or undefined before using the element. For example: `if (element) { // use element }`.

3. Forgetting to Compile

TypeScript code needs to be compiled into JavaScript before it can run in the browser. If you make changes to your TypeScript code and don’t recompile, the changes won’t be reflected in the browser.

Fix: Make sure to run `npx tsc` in your terminal after making changes to your TypeScript files. You can also set up a build process that automatically compiles your code whenever you save changes.

4. Ignoring Error Messages

TypeScript provides helpful error messages that can guide you to fix issues in your code. Don’t ignore these messages. They are there to help you write better code.

Fix: Carefully read the error messages and understand what they are telling you. Use the error messages to identify and fix the problems in your code.

5. Not Using Interfaces Effectively

Interfaces are a powerful feature of TypeScript, but they are often underutilized. Use interfaces to define the structure of your objects and data. This makes your code more organized and easier to maintain.

Fix: Review your code and use interfaces to define the structure of your data. This will help you catch errors early and make your code more readable.

Step-by-Step Instructions Summary

Here’s a recap of the steps involved in building your to-do list application:

  1. Set up your development environment: Install Node.js, npm, a code editor (like VS Code), and a terminal.
  2. Create a new project: Create a project directory, initialize a Node.js project, install TypeScript, create a `tsconfig.json` file, and create your `app.ts` file.
  3. Define the task interface: Create an interface to define the structure of your tasks (e.g., `id`, `text`, `completed`).
  4. Create the task list: Declare an array to store your tasks.
  5. Add tasks: Create a function (`addTask()`) to add new tasks to the list.
  6. Mark tasks as complete: Create a function (`toggleTaskCompletion()`) to toggle the completion status of a task.
  7. Render the task list: Create a function (`renderTasks()`) to display the tasks in the browser.
  8. Add user input: Add an input field and a button to allow users to add new tasks.
  9. Compile and run the application: Compile your TypeScript code to JavaScript and open the `index.html` file in your browser.
  10. Test and refine: Add tasks, mark them as complete, and refine your code as needed.

Key Takeaways

  • TypeScript enhances JavaScript: TypeScript adds static typing to JavaScript, improving code quality and maintainability.
  • Interfaces define data structures: Interfaces help organize and structure your data, making your code more readable.
  • Event listeners handle user interactions: Event listeners are crucial for handling user input and triggering actions.
  • DOM manipulation updates the UI: You can dynamically update the user interface using DOM manipulation techniques.
  • Modular design simplifies development: Breaking down your application into smaller, reusable functions improves organization.

FAQ

1. How do I add a delete task feature?

To add a delete task feature, you would add a delete button next to each task in the `renderTasks()` function. You’ll need to create a new function (e.g., `deleteTask(id: number)`) to remove a task from the `tasks` array based on its ID. The `deleteTask()` function should call `renderTasks()` to update the display.

2. How can I store the tasks in local storage?

To persist the tasks, you can use the browser’s local storage. Before adding a task, and after modifying or deleting a task, save the `tasks` array to local storage using `localStorage.setItem(‘tasks’, JSON.stringify(tasks))`. When the page loads, retrieve the tasks from local storage using `const storedTasks = localStorage.getItem(‘tasks’); if (storedTasks) { tasks = JSON.parse(storedTasks); renderTasks(); }`.

3. How do I add styling to the to-do list?

You can add styling by creating a CSS file (e.g., `style.css`) and linking it to your `index.html` file using the `<link>` tag within the `<head>` section (e.g., `<link rel=”stylesheet” href=”style.css”>`). Then, write CSS rules to style the various elements of your to-do list, such as the input field, button, list items, and checkboxes.

4. How do I handle errors?

Error handling is crucial for creating robust applications. You can add `try…catch` blocks to handle potential errors. For example, when parsing data from local storage, wrap the `JSON.parse()` call in a `try…catch` block to handle potential parsing errors. You can also add validation to your input fields to ensure that the user provides valid input.

Next Steps

This tutorial provides a foundation for building a simple to-do list application. You can extend this application by adding more features, such as the ability to edit tasks, set due dates, prioritize tasks, and filter tasks by status (e.g., completed, incomplete). You can also explore more advanced concepts, such as using a framework like React, Angular, or Vue.js to build more complex and interactive web applications.

Now, with this understanding of TypeScript and the fundamental principles of web development, you’re well-equipped to create your own web applications. You’ve seen how static typing improves your code, and how interfaces and functions help organize your projects. From here, the possibilities are endless; experiment, learn, and enjoy the process of building!

More posts