TypeScript Tutorial: Building a Simple Interactive To-Do List

Written by

learnmodernjavascript

in

Are you tired of juggling tasks in your head or on scattered sticky notes? In today’s fast-paced world, staying organized is crucial. A well-structured to-do list can be a game-changer, helping you prioritize, manage your time effectively, and boost your productivity. But what if you could create your own, tailored to your specific needs? This tutorial will guide you through building a simple, interactive to-do list application using TypeScript, a powerful superset of JavaScript. This project isn’t just about coding; it’s about learning fundamental programming concepts and applying them to a practical, everyday tool. By the end, you’ll have a functional to-do list and a solid understanding of TypeScript fundamentals.

Why TypeScript?

Before diving into the code, let’s address the elephant in the room: why TypeScript? TypeScript offers several advantages over plain JavaScript, especially for larger projects:

  • Type Safety: TypeScript introduces static typing, meaning you define the data types of variables. This helps catch errors early in the development process, reducing debugging time and improving code quality.
  • Improved Code Readability: Type annotations make your code easier to understand and maintain, as they clearly indicate the expected data types.
  • Enhanced Developer Experience: TypeScript provides excellent tooling support, including autocompletion, refactoring, and error checking, which significantly boosts developer productivity.
  • Modern JavaScript Features: TypeScript supports the latest JavaScript features, allowing you to write cleaner and more concise code.

Setting Up Your Development Environment

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

  • Node.js and npm (Node Package Manager): These are essential for running JavaScript code and managing project dependencies. You can download them from nodejs.org.
  • A Code Editor: I recommend Visual Studio Code (VS Code), which is free, open-source, and has excellent TypeScript support. You can download it from code.visualstudio.com.
  • TypeScript Compiler: You’ll install this globally using npm: npm install -g typescript

Project Setup

Let’s create a new project directory and initialize it with npm:

  1. Open your terminal or command prompt.
  2. Create a new directory for your project: mkdir todo-app
  3. Navigate into the directory: cd todo-app
  4. Initialize a new npm project: npm init -y (This creates a package.json file with default settings.)

Creating the TypeScript Configuration File

Next, you’ll create a tsconfig.json file. This file tells the TypeScript compiler how to compile your TypeScript code. In your terminal, run:

tsc --init

This command generates a tsconfig.json file with many configuration options. We’ll customize it for our project. Open tsconfig.json in your code editor and modify the following settings:

{
  "compilerOptions": {
    "target": "es5", // or "es6", "esnext" depending on your needs
    "module": "commonjs", // or "esnext", "amd" etc.
    "outDir": "./dist", // Output directory for compiled JavaScript files
    "rootDir": "./src", // Source directory for your TypeScript files
    "strict": true, // Enable strict type checking
    "esModuleInterop": true, // Enables interoperability between CommonJS and ES modules
    "skipLibCheck": true, // Skip type checking of declaration files
    "forceConsistentCasingInFileNames": true // Enforce consistent casing
  },
  "include": ["src/**/*"]
}

Let’s break down these options:

  • target: Specifies the JavaScript version to compile to. es5 is widely compatible, while es6 or esnext offer more modern features.
  • module: Specifies the module system to use (e.g., commonjs for Node.js).
  • outDir: Defines the directory where compiled JavaScript files will be placed.
  • rootDir: Specifies the root directory of your TypeScript source files.
  • strict: Enables strict type checking, which is highly recommended.
  • esModuleInterop: Helps with importing modules.
  • skipLibCheck: Speeds up compilation by skipping type checking of declaration files.
  • forceConsistentCasingInFileNames: Enforces consistent casing in file names.

Project Structure

Create the following directory structure in your project:

todo-app/
├── src/
│   ├── index.ts
│   └── styles.css
├── dist/
├── node_modules/
├── package.json
├── tsconfig.json
└── index.html

Inside the src folder, we’ll place our TypeScript files. The dist folder will hold the compiled JavaScript files. index.html will be our HTML file and styles.css will hold our styling.

Writing the TypeScript Code

Let’s start by creating the basic structure of our to-do list application. Open src/index.ts in your code editor. We’ll define a TodoItem interface and a TodoList class.


// src/index.ts

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

class TodoList {
  private todos: TodoItem[];
  private todoListElement: HTMLUListElement;
  private inputElement: HTMLInputElement;
  private addButtonElement: HTMLButtonElement;

  constructor() {
    this.todos = [];
    this.todoListElement = document.getElementById('todo-list') as HTMLUListElement;
    this.inputElement = document.getElementById('todo-input') as HTMLInputElement;
    this.addButtonElement = document.getElementById('add-button') as HTMLButtonElement;

    if (!this.todoListElement || !this.inputElement || !this.addButtonElement) {
      throw new Error('Required HTML elements not found.');
    }

    this.addButtonElement.addEventListener('click', this.addTodo.bind(this));
    this.renderTodos();
  }

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

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

  deleteTodo(id: number): void {
    this.todos = this.todos.filter((todo) => todo.id !== id);
    this.renderTodos();
  }

  renderTodos(): void {
    this.todoListElement.innerHTML = '';
    this.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', () => this.toggleComplete(todo.id));
      listItem.appendChild(checkbox);

      const textSpan = document.createElement('span');
      textSpan.textContent = todo.text;
      textSpan.classList.add(todo.completed ? 'completed' : '');
      listItem.appendChild(textSpan);

      const deleteButton = document.createElement('button');
      deleteButton.textContent = 'Delete';
      deleteButton.addEventListener('click', () => this.deleteTodo(todo.id));
      listItem.appendChild(deleteButton);

      this.todoListElement.appendChild(listItem);
    });
  }
}

const todoList = new TodoList();

Let’s break down the code:

  • TodoItem Interface: Defines the structure of a single to-do item with id (number), text (string), and completed (boolean) properties.
  • TodoList Class: Manages the to-do items and interacts with the HTML elements.
  • Constructor: Initializes the todos array, gets references to the HTML elements (todo-list, todo-input, and add-button), adds an event listener to the add button, and calls renderTodos() to initially display any existing todos. Includes a check to ensure the required HTML elements exist, throwing an error if they are not found.
  • addTodo() Method: Adds a new to-do item to the todos array. It gets the text from the input field, creates a new TodoItem, and then calls renderTodos() to update the display.
  • toggleComplete(id: number) Method: Toggles the completion status of a to-do item.
  • deleteTodo(id: number) Method: Removes a to-do item from the list.
  • renderTodos() Method: Clears the existing list and re-renders all to-do items. Creates list items, checkboxes, text spans, and delete buttons for each todo. Attaches event listeners for completion toggling and deletion.

Creating the HTML Structure

Now, let’s create the HTML file (index.html) to provide the structure for our to-do list application:

<!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="styles.css">
</head>
<body>
  <div class="container">
    <h1>To-Do List</h1>
    <div class="input-container">
      <input type="text" id="todo-input" placeholder="Add a task...">
      <button id="add-button">Add</button>
    </div>
    <ul id="todo-list"></ul>
  </div>
  <script src="dist/index.js"></script>
</body>
</html>

Here’s a breakdown of the HTML:

  • <head>: Contains metadata, including the title and a link to the stylesheet.
  • <body>: Contains the visible content of the page.
  • <div class="container">: A container for the entire to-do list application.
  • <h1>: The main heading of the application.
  • <div class="input-container">: Contains the input field and the add button.
  • <input type="text" id="todo-input" placeholder="Add a task...">: The input field where users enter their to-do items.
  • <button id="add-button">Add</button>: The button to add a new to-do item.
  • <ul id="todo-list"></ul>: The unordered list where the to-do items will be displayed.
  • <script src="dist/index.js"></script>: Includes the compiled JavaScript file (index.js).

Adding Styles

To make our to-do list visually appealing, let’s add some basic CSS. Create a file named styles.css in your src directory and add the following styles:


/* src/styles.css */

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

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

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

.input-container {
  display: flex;
  margin-bottom: 15px;
}

#todo-input {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

#add-button {
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-left: 10px;
}

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

#todo-list {
  list-style: none;
  padding: 0;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.todo-item input[type="checkbox"] {
  margin-right: 10px;
}

.todo-item span {
  flex-grow: 1;
}

.todo-item button {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

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

.completed {
  text-decoration: line-through;
  color: #888;
}

Compiling and Running the Application

Now that we have our code, HTML, and CSS, let’s compile the TypeScript code and run the application:

  1. Compile the TypeScript code: Open your terminal and navigate to your project directory. Run the following command:
tsc

This command will compile your src/index.ts file into dist/index.js. If there are any errors in your TypeScript code, the compiler will report them. Make sure to fix these errors before proceeding.

  1. Open index.html in your browser: Navigate to the project directory in your file explorer, and double-click index.html to open it in your web browser.

You should now see your to-do list application in action! You can add tasks, mark them as complete, and delete them.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make and how to avoid them:

  • Incorrect HTML element IDs: Make sure the IDs in your TypeScript code (e.g., todo-input, add-button, todo-list) exactly match the IDs in your HTML. Typos are a common source of errors.
  • Missing event listener for the add button: Double-check that you’ve added the event listener to the add button (addButtonElement.addEventListener('click', this.addTodo.bind(this))) in your TodoList constructor.
  • Incorrect paths in tsconfig.json: Ensure that the rootDir and outDir paths in your tsconfig.json file are configured correctly to point to your source and output directories.
  • Not compiling the TypeScript code: Remember to run tsc in your terminal to compile your TypeScript code into JavaScript before running the application.
  • Type errors: TypeScript’s type checking can be strict. Pay close attention to the error messages provided by the compiler and fix any type mismatches. For example, make sure you’re assigning values of the correct type to variables, and that function return types match the expected types.
  • Incorrectly binding ‘this’: When using event listeners, you need to bind the context of the method to the class instance (e.g., this.addTodo.bind(this)) so that this inside the method refers to the class instance and not the event target.

Enhancements and Next Steps

Once you’ve built the basic to-do list, you can add several enhancements:

  • Local Storage: Save the to-do items in the browser’s local storage so that they persist even after the page is refreshed.
  • Styling: Improve the visual appearance of the to-do list using more CSS.
  • Prioritization: Add the ability to prioritize tasks (e.g., high, medium, low).
  • Due Dates: Allow users to set due dates for their tasks.
  • Drag and Drop: Implement drag-and-drop functionality to reorder the tasks.
  • Filtering: Add filters to show all tasks, completed tasks, or incomplete tasks.
  • Error Handling: Implement error handling to gracefully handle unexpected situations.
  • Refactoring: Break down the TodoList class into smaller, more manageable components.

Key Takeaways

In this tutorial, you’ve learned how to build a simple, interactive to-do list application using TypeScript. You’ve gained experience with:

  • Setting up a TypeScript project.
  • Defining interfaces and classes.
  • Working with HTML elements and event listeners.
  • Using type safety to prevent errors.
  • Compiling TypeScript code.
  • Understanding basic HTML, CSS, and JavaScript interactions.

FAQ

Here are some frequently asked questions:

  1. Why use TypeScript for a simple to-do list? TypeScript’s type safety and improved code readability become particularly beneficial as projects grow in complexity. While the to-do list is simple, it demonstrates the core principles of TypeScript that scale well.
  2. How do I debug TypeScript code? You can use your browser’s developer tools (usually accessed by right-clicking on the page and selecting “Inspect”) to debug the compiled JavaScript code. Set breakpoints in the .js files (in the dist folder) and step through the code.
  3. Can I use a framework like React or Angular with TypeScript? Yes! TypeScript is often used with popular JavaScript frameworks like React, Angular, and Vue.js. TypeScript integrates very well with these frameworks, providing type safety and improved developer experience.
  4. What is the difference between an interface and a class in TypeScript? An interface defines a contract for the shape of an object (its properties and methods), while a class is a blueprint for creating objects. Classes can implement interfaces, ensuring they adhere to the interface’s contract.
  5. How do I deploy this to-do list? You can deploy your to-do list to a web hosting service like Netlify, Vercel, or GitHub Pages. These services typically allow you to deploy static websites with ease. You’ll need to build your project (run tsc) and then upload the contents of the dist folder and the index.html file.

Building this to-do list is just the beginning. Embrace the power of TypeScript, explore its features, and continue to refine your skills. The ability to create functional, organized, and error-resistant applications is now within your grasp, providing a solid foundation for more complex projects. As you continue to build and experiment, you’ll discover new ways to improve your code and enhance your efficiency.

More posts