TypeScript Tutorial: Building a Simple Web-Based Task Manager

Written by

learnmodernjavascript

in

In the fast-paced world of web development, managing tasks effectively is crucial for productivity. Whether you’re a seasoned developer or just starting, keeping track of to-dos, deadlines, and priorities can be a significant challenge. This is where a well-designed task manager comes into play. In this tutorial, we’ll dive into building a simple, yet functional, web-based task manager using TypeScript. We’ll explore the core concepts of TypeScript, learn how to structure our application, and create a user-friendly interface that allows users to add, edit, and delete tasks.

Why TypeScript?

Before we jump into the code, let’s address the elephant in the room: why TypeScript? TypeScript is a superset of JavaScript that adds static typing. This means you can define the types of variables, function parameters, and return values, catching potential errors during development rather than at runtime. This leads to more robust and maintainable code, making it an excellent choice for building complex applications.

Here are some key benefits of using TypeScript:

  • Improved Code Quality: Static typing helps catch errors early, reducing the likelihood of bugs.
  • Enhanced Readability: Type annotations make code easier to understand and maintain.
  • Better Developer Experience: Code completion and refactoring tools provide a more productive development environment.
  • Scalability: TypeScript is well-suited for large projects, making them easier to manage as they grow.

Setting Up the Project

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

  1. Create a new directory for your project: mkdir task-manager
  2. Navigate into the directory: cd task-manager
  3. Initialize a new npm project: npm init -y (This creates a package.json file.)
  4. Install TypeScript globally: npm install -g typescript
  5. Create a tsconfig.json file: tsc --init (This creates a configuration file for TypeScript.)

Now, let’s install the necessary packages. We’ll need a way to run our code in a web browser. For this example, we’ll use a simple HTML file and a bundler like Parcel or Webpack. For simplicity, we’ll keep the project simple and use just an HTML file, a TypeScript file and Parcel to bundle our code. Run this command in your terminal:

npm install parcel-bundler --save-dev

This will install Parcel as a development dependency. We’ll also need a way to make our HTML file available in the browser. Create an index.html file in the root directory of your project with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Manager</title>
</head>
<body>
  <div id="app"></div>
  <script src="index.ts"></script>
</body>
</html>

Next, create an index.ts file in the root directory. This is where we’ll write our TypeScript code.

Defining Task Interface

The first step in building our task manager is to define a task. We’ll create an interface to represent a task. This interface will specify the properties of a task and their types. Open index.ts and add the following code:


interface Task {
  id: number;
  title: string;
  description: string;
  completed: boolean;
}

In this interface:

  • id: A unique number to identify the task.
  • title: The title of the task (e.g., “Grocery Shopping”).
  • description: A detailed description of the task.
  • completed: A boolean value indicating whether the task is completed or not.

Implementing the Task Manager Class

Now, let’s create a class to manage our tasks. This class will handle adding, editing, deleting, and displaying tasks. Add the following code below the interface definition in index.ts:


class TaskManager {
  private tasks: Task[];
  private nextId: number;
  private appElement: HTMLElement | null;

  constructor() {
    this.tasks = [];
    this.nextId = 1;
    this.appElement = document.getElementById('app');
  }

  addTask(title: string, description: string): void {
    const newTask: Task = {
      id: this.nextId++,
      title,
      description,
      completed: false,
    };
    this.tasks.push(newTask);
    this.renderTasks();
  }

  deleteTask(id: number): void {
    this.tasks = this.tasks.filter((task) => task.id !== id);
    this.renderTasks();
  }

  toggleComplete(id: number): void {
    this.tasks = this.tasks.map((task) =>
      task.id === id ? { ...task, completed: !task.completed } : task
    );
    this.renderTasks();
  }

  editTask(id: number, newTitle: string, newDescription: string): void {
    this.tasks = this.tasks.map((task) =>
      task.id === id ? { ...task, title: newTitle, description: newDescription } : task
    );
    this.renderTasks();
  }

  renderTasks(): void {
    if (!this.appElement) return;
    this.appElement.innerHTML = '';

    if (this.tasks.length === 0) {
      this.appElement.innerHTML = '<p>No tasks yet!</p>';
      return;
    }

    const taskList = document.createElement('ul');
    this.tasks.forEach((task) => {
      const listItem = document.createElement('li');
      listItem.innerHTML = `
        <input type="checkbox" ${task.completed ? 'checked' : ''} data-id="${task.id}">
        <span class="task-title">${task.title}</span>
        <span class="task-description">${task.description}</span>
        <button data-id="${task.id}">Edit</button>
        <button data-id="${task.id}">Delete</button>
      `;
      taskList.appendChild(listItem);
    });
    this.appElement.appendChild(taskList);

    // Add event listeners after rendering
    this.addEventListeners();
  }

  private addEventListeners(): void {
    if (!this.appElement) return;

    this.appElement.addEventListener('click', (event: Event) => {
      const target = event.target as HTMLElement;
      const taskId = parseInt(target.dataset.id || '', 10);

      if (target.tagName === 'INPUT' && target.type === 'checkbox' && !isNaN(taskId)) {
        this.toggleComplete(taskId);
      }

      if (target.tagName === 'BUTTON' && target.textContent === 'Delete' && !isNaN(taskId)) {
        this.deleteTask(taskId);
      }

      if (target.tagName === 'BUTTON' && target.textContent === 'Edit' && !isNaN(taskId)) {
        // Implement edit functionality here (e.g., show a form)
        const taskToEdit = this.tasks.find(task => task.id === taskId);
        if(taskToEdit) {
          const newTitle = prompt('Enter new title:', taskToEdit.title) || taskToEdit.title;
          const newDescription = prompt('Enter new description:', taskToEdit.description) || taskToEdit.description;
          this.editTask(taskId, newTitle, newDescription);
        }
      }
    });
  }
}

const taskManager = new TaskManager();

// Add some initial tasks (optional)
taskManager.addTask('Grocery Shopping', 'Buy milk, eggs, and bread.');
taskManager.addTask('Walk the dog', 'Take the dog for a walk in the park.');

Let’s break down the code:

  • tasks: Task[]: An array to store our tasks.
  • nextId: number: A counter to generate unique IDs for each task.
  • appElement: HTMLElement | null: A reference to the HTML element where we’ll render our tasks.
  • constructor(): Initializes the tasks array, the nextId, and gets the element with id “app” from the DOM.
  • addTask(title: string, description: string): void: Adds a new task to the tasks array and calls renderTasks() to update the display.
  • deleteTask(id: number): void: Removes a task from the tasks array by its ID and calls renderTasks().
  • toggleComplete(id: number): void: Toggles the completed status of a task and calls renderTasks().
  • editTask(id: number, newTitle: string, newDescription: string): void: Edits the title and description of the task with the given ID.
  • renderTasks(): void: Clears the existing task list and renders the tasks in the DOM.
  • addEventListeners(): void: Adds event listeners to the DOM elements (checkboxes and buttons).

In the renderTasks() method, we create HTML elements dynamically to display the tasks. We use template literals to build the HTML for each task and then append it to the appElement. We also add event listeners to the checkboxes and delete buttons to handle user interactions.

Adding Tasks and Interacting with the UI

Now, let’s add some functionality to our task manager so users can add tasks. We’ll add a simple form with input fields for the task title and description. Add the following code below the const taskManager = new TaskManager(); line in index.ts:


const form = document.createElement('form');
form.innerHTML = `
  <label for="title">Title:</label>
  <input type="text" id="title"><br>
  <label for="description">Description:</label>
  <textarea id="description"></textarea><br>
  <button type="submit">Add Task</button>
`;

if (taskManager.appElement) {
  taskManager.appElement.appendChild(form);
}

form.addEventListener('submit', (event: Event) => {
  event.preventDefault(); // Prevent form submission from refreshing the page
  const titleInput = document.getElementById('title') as HTMLInputElement;
  const descriptionInput = document.getElementById('description') as HTMLTextAreaElement;

  const title = titleInput.value;
  const description = descriptionInput.value;

  if (title && description) {
    taskManager.addTask(title, description);
    titleInput.value = '';
    descriptionInput.value = '';
  }
});

Here’s what this code does:

  • Creates a form with input fields for the title and description, and a submit button.
  • Appends the form to the appElement.
  • Adds an event listener to the form’s submit event.
  • When the form is submitted, it prevents the default form submission behavior (which would refresh the page).
  • Gets the values from the input fields.
  • Calls the addTask() method of the taskManager with the title and description.
  • Clears the input fields after adding the task.

Building and Running the Application

Now that we’ve written the code for our task manager, let’s build and run it. Open your terminal and run the following command in the project directory:

npx parcel index.html

This command will use Parcel to bundle your code and start a development server. Parcel will automatically detect the entry point (index.html) and bundle all the necessary files (index.ts). You should see a message in the terminal indicating the server is running, along with the local address (usually http://localhost:1234). Open this address in your web browser.

You should now see your task manager in action. You can add tasks, mark them as completed, edit them, and delete them.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them:

  • Type Errors: TypeScript will highlight type errors during development. Carefully read the error messages and ensure your types match the expected types. For example, if you’re getting an error that says “Argument of type ‘string’ is not assignable to parameter of type ‘number’”, you know that you’re trying to pass a string where a number is expected.
  • Incorrect DOM Element Selection: Make sure you’re selecting the correct DOM elements using document.getElementById() or other methods. If you’re getting a null value, it means the element with that ID doesn’t exist or is not yet loaded.
  • Event Listener Issues: Ensure your event listeners are correctly attached to the elements. Double-check that you’re using the correct event names (e.g., 'click', 'submit').
  • Incorrect Data Handling: Make sure your data (tasks) is being stored and updated correctly. Use the browser’s developer tools (Console tab) to log the values of variables to help you debug.
  • Parcel Configuration: If you encounter issues with Parcel, ensure that you have the correct dependencies installed and that your index.html file is correctly linked to your TypeScript file.

Key Takeaways

Let’s summarize what we’ve learned:

  • TypeScript Fundamentals: We explored the basics of TypeScript, including interfaces and type annotations.
  • Project Setup: We set up a basic TypeScript project using npm and Parcel.
  • Task Manager Implementation: We created a TaskManager class to manage tasks, including adding, deleting, editing, and marking tasks as complete.
  • User Interface: We built a simple user interface with a form to add tasks and a list to display them.
  • Error Handling: We discussed common mistakes and how to fix them.

FAQ

Here are some frequently asked questions:

  1. Can I use a different bundler instead of Parcel? Yes, you can. Webpack, Rollup, and other bundlers are also popular choices. The setup process will be different, but the core TypeScript code will remain the same.
  2. How can I store the tasks persistently? You can use local storage, session storage, or a database (like Firebase or MongoDB) to store the tasks persistently.
  3. How can I add more features to the task manager? You can add features like due dates, priorities, categories, and more advanced filtering and sorting options.
  4. How can I deploy this application? You can deploy your application to a hosting platform like Netlify, Vercel, or GitHub Pages.

With the knowledge gained from this tutorial, you’re well-equipped to build more complex web applications using TypeScript. Remember that the key to mastering TypeScript, as with any programming language, is practice. Experiment with different features, explore advanced concepts, and build projects that challenge you. By continuously learning and refining your skills, you’ll become a proficient TypeScript developer.

More posts