TypeScript Tutorial: Building a Simple To-Do List App

Written by

learnmodernjavascript

in

Are you tired of juggling multiple tasks and feeling overwhelmed? In today’s fast-paced world, staying organized is crucial. A well-designed to-do list app can be your secret weapon, helping you manage your tasks, track your progress, and ultimately, boost your productivity. This tutorial will guide you through building a simple, yet functional, to-do list application using TypeScript, a powerful superset of JavaScript. Whether you’re a beginner or an intermediate developer, this tutorial will provide a clear, step-by-step guide to understanding the fundamentals of TypeScript while creating a practical application.

Why TypeScript?

Before we dive into the code, let’s discuss why TypeScript is an excellent choice for this project. TypeScript offers several advantages over plain JavaScript:

  • Static Typing: TypeScript introduces static typing, which means you define the data types of variables. This helps catch errors during development, leading to more robust and maintainable code.
  • Improved Code Readability: Type annotations make your code easier to understand, especially for larger projects or when collaborating with other developers.
  • Enhanced Tooling: TypeScript provides excellent tooling support, including autocompletion, refactoring, and error checking, which significantly improves your development workflow.
  • Object-Oriented Programming (OOP): TypeScript supports OOP principles like classes, interfaces, and inheritance, enabling you to write more organized and scalable code.

By using TypeScript, you’ll not only learn a valuable skill but also improve the quality and maintainability of your code.

Setting Up Your Development Environment

To get started, you’ll need to set up your development environment. Don’t worry, it’s a straightforward process:

  1. Install Node.js and npm: If you haven’t already, download and install Node.js and npm (Node Package Manager) from the official website (https://nodejs.org/). npm is used to manage your project’s dependencies.
  2. Create a Project Directory: Create a new directory for your project, for example, “todo-app”.
  3. Initialize npm: Open your terminal or command prompt, navigate to your project directory, and run the following command to initialize an npm project:
npm init -y

This command creates a `package.json` file, which holds information about your project and its dependencies.

  1. Install TypeScript: Install TypeScript globally or locally within your project. For local installation, run:

npm install typescript --save-dev

The `–save-dev` flag indicates that TypeScript is a development dependency.

  1. Create a tsconfig.json file: Create a `tsconfig.json` file in your project directory. This file configures the TypeScript compiler. You can generate a basic `tsconfig.json` file by running:

npx tsc --init

This command creates a `tsconfig.json` file with default settings. You can customize these settings to suit your project’s needs. For a simple project, the default settings are often sufficient.

  1. Create an index.ts file: Create an `index.ts` file in your project directory. This is where you’ll write the code for your to-do list app.

Building the To-Do List App

Now, let’s start building the core functionality of our to-do list app. We’ll break it down into smaller, manageable steps.

1. Define the Task Interface

First, we’ll define an interface to represent a task. This interface will specify the properties of a task, such as its text, completion status, and potentially, an ID.

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

In this code:

  • `interface Task`: Defines an interface named `Task`.
  • `id: number;`: Each task will have a unique numerical identifier.
  • `text: string;`: The text description of the task.
  • `completed: boolean;`: A boolean value to indicate if the task is completed or not.

2. Create an Array to Store Tasks

Next, we’ll create an array to store our tasks. This array will hold objects that conform to the `Task` interface.

let tasks: Task[] = [];

In this code:

  • `let tasks: Task[]`: Declares a variable named `tasks` and specifies that it’s an array of `Task` objects.
  • `= []`: Initializes the `tasks` array as an empty array.

3. Implement Functions for Task Management

Now, let’s create functions to add, remove, and toggle the completion status of tasks. These functions will manipulate the `tasks` array.


// Function to add a new task
function addTask(text: string): void {
  const newTask: Task = {
    id: Date.now(), // Use timestamp for a unique ID
    text: text,
    completed: false,
  };
  tasks.push(newTask);
  console.log('Task added:', newTask);
}

// Function to remove a task
function removeTask(id: number): void {
  tasks = tasks.filter((task) => task.id !== id);
  console.log('Task removed:', id);
}

// Function to toggle the completion status of a task
function toggleTaskCompletion(id: number): void {
  const task = tasks.find((task) => task.id === id);
  if (task) {
    task.completed = !task.completed;
    console.log('Task updated:', task);
  }
}

In this code:

  • `addTask(text: string): void`: This function takes the task text as input, creates a new `Task` object, and adds it to the `tasks` array. It uses `Date.now()` to generate a unique ID.
  • `removeTask(id: number): void`: This function takes the task ID as input and removes the task with the matching ID from the `tasks` array using the `filter()` method.
  • `toggleTaskCompletion(id: number): void`: This function takes the task ID as input and toggles the `completed` status of the task with the matching ID. It uses the `find()` method to locate the task.

4. Implement a Simple User Interface (UI) in HTML

To make our to-do list app interactive, we’ll create a simple HTML UI. This UI will include an input field for adding tasks, a button to submit new tasks, and a list to display the tasks.

<!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="index.js"></script>
</body>
</html>

Create an `index.html` file in your project directory and paste this code into it. This HTML provides the basic structure for the UI.

5. Connect the UI to the TypeScript Logic

Now, let’s connect the HTML UI to our TypeScript code. We’ll use JavaScript (which will be generated from our TypeScript code) to handle user interactions.


// 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;

// Function to render tasks in the UI
function renderTasks(): void {
  taskList.innerHTML = ''; // Clear the task list
  tasks.forEach((task) => {
    const listItem = document.createElement('li');
    listItem.textContent = task.text;
    if (task.completed) {
      listItem.style.textDecoration = 'line-through';
    }

    // Add a delete button
    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    deleteButton.addEventListener('click', () => {
      removeTask(task.id);
      renderTasks(); // Re-render the tasks after deletion
    });
    listItem.appendChild(deleteButton);

    // Add a click event to toggle completion
    listItem.addEventListener('click', () => {
      toggleTaskCompletion(task.id);
      renderTasks(); // Re-render the tasks after toggling
    });
    taskList.appendChild(listItem);
  });
}

// Event listener for the add task button
addTaskButton.addEventListener('click', () => {
  const taskText = taskInput.value.trim();
  if (taskText) {
    addTask(taskText);
    taskInput.value = ''; // Clear the input field
    renderTasks(); // Re-render the tasks after adding
  }
});

// Initial rendering of tasks (if any)
renderTasks();

In this code:

  • We get references to the HTML elements using `document.getElementById()`. The `as` keyword is used to specify the element type (e.g., `HTMLInputElement`).
  • `renderTasks()`: This function clears the task list in the UI and then iterates through the `tasks` array. For each task, it creates a list item (`<li>`), sets its text content, and adds a “Delete” button.
  • Event Listeners: We attach event listeners to the “Add” button and the list items. When the “Add” button is clicked, we get the task text from the input field, add the task, clear the input field, and re-render the tasks. When a list item is clicked, we toggle the task’s completion status and re-render the tasks.

6. Compile and Run the Application

Now that we’ve written our TypeScript code and created the HTML, it’s time to compile and run the application. Follow these steps:

  1. Compile TypeScript: Open your terminal or command prompt, navigate to your project directory, and run the following command to compile the TypeScript code to JavaScript:
tsc index.ts

This command will generate a `index.js` file, which is the JavaScript version of your TypeScript code.

  1. Open index.html in your browser: Open the `index.html` file in your web browser. You should see the to-do list app UI.
  2. Test the application: Add tasks, mark them as completed, and delete them to test the functionality.

Common Mistakes and How to Fix Them

Here are some common mistakes you might encounter while building a to-do list app in TypeScript, along with solutions:

  • Type Errors: TypeScript will highlight type errors during development. Make sure your data types match the interface definitions. For example, ensure you’re passing a string to a function that expects a string. Review the error messages carefully to understand what’s wrong.
  • Incorrect HTML Element References: Double-check that you’re using the correct IDs when referencing HTML elements in your TypeScript code. Typos in IDs are a common source of errors. Use your browser’s developer tools (usually accessed by right-clicking and selecting “Inspect”) to verify that your HTML elements have the correct IDs.
  • Missing Event Listeners: Ensure you’ve correctly attached event listeners to your buttons and list items. If an event listener is missing, the corresponding functionality (e.g., adding a task) won’t work.
  • Incorrect Logic: Carefully review your code logic, especially the functions for adding, removing, and toggling task completion. Use `console.log()` statements to debug your code and track the values of variables at different points in your program.
  • Compilation Errors: Make sure you have the correct TypeScript compiler configuration in your `tsconfig.json` file. If you encounter compilation errors, review the error messages and ensure your code follows TypeScript syntax rules.

Enhancements and Next Steps

This is just a basic to-do list app. Here are some ideas to enhance it:

  • Local Storage: Implement local storage to save the tasks in the browser’s storage, so they persist even when the user closes the browser.
  • Styling: Add CSS styling to improve the app’s appearance.
  • Advanced Features: Add features like task due dates, priorities, and categories.
  • Error Handling: Implement error handling to gracefully handle unexpected situations.
  • Framework Integration: Consider using a framework like React, Angular, or Vue.js for more complex applications.

Summary/Key Takeaways

In this tutorial, you learned how to build a simple to-do list app using TypeScript. You learned about interfaces, arrays, functions, and event listeners. You also gained experience with HTML, CSS, and the basics of web development. TypeScript helps to write cleaner, more maintainable code, and it’s a valuable skill for any web developer. You can extend this app to add more features and improve the user experience. This project serves as a solid foundation for building more complex web applications with TypeScript.

FAQ

  1. What is the difference between JavaScript and TypeScript? TypeScript is a superset of JavaScript that adds static typing. This means you can define the data types of variables, which helps catch errors during development and improves code readability.
  2. Why should I use TypeScript? TypeScript offers several benefits, including improved code quality, better tooling support, and enhanced maintainability. It helps you write more robust and scalable code.
  3. How do I compile TypeScript code? You can compile TypeScript code using the `tsc` command in your terminal. This command generates JavaScript code from your TypeScript code.
  4. Can I use TypeScript with frameworks like React or Angular? Yes, TypeScript is widely used with popular JavaScript frameworks like React, Angular, and Vue.js. It enhances the development experience and improves code quality in these frameworks.
  5. Where can I learn more about TypeScript? The official TypeScript documentation (https://www.typescriptlang.org/docs/) is an excellent resource for learning more about TypeScript. You can also find many online tutorials and courses on platforms like Udemy, Coursera, and freeCodeCamp.

Building this to-do list app is a great starting point for your journey into the world of TypeScript. By understanding the core concepts and practicing with real-world examples, you’ll be well on your way to becoming a proficient TypeScript developer. Remember to experiment, explore, and continue learning. The world of web development is constantly evolving, so embrace the challenge and enjoy the process of creating amazing applications. The skills you’ve gained here will serve you well as you tackle more complex projects and expand your knowledge of web development.

More posts