TypeScript with React: Building Interactive To-Do Apps

Written by

learnmodernjavascript

in

In the world of web development, TypeScript has rapidly become a favorite tool for building robust and scalable applications. Its ability to catch errors early, improve code maintainability, and provide excellent developer experience has made it a must-learn for modern web developers. This tutorial will guide you through the process of building an interactive To-Do application using TypeScript and React, two technologies that complement each other perfectly. We will cover everything from setting up your development environment to implementing core features like adding, deleting, and marking tasks as complete. By the end of this tutorial, you’ll not only have a functional To-Do app but also a solid understanding of how to use TypeScript in a React project, along with best practices to write clean and efficient code.

Why TypeScript?

Before diving into the code, let’s explore why TypeScript is so valuable. JavaScript, the language of the web, is dynamically typed, meaning that the type of a variable is checked at runtime. This can lead to unexpected errors, especially in large projects. TypeScript, on the other hand, is a superset of JavaScript that adds static typing. This means that you can specify the type of variables, function parameters, and return values. The TypeScript compiler then checks these types during development, catching errors before your code even runs. This early error detection can save you a lot of time and frustration down the line.

Here’s a breakdown of the key benefits:

  • Improved Code Quality: Static typing helps catch type-related errors early.
  • Enhanced Readability: Types make the code easier to understand and maintain.
  • Better Developer Experience: Code editors can provide better autocompletion, refactoring, and navigation.
  • Increased Scalability: TypeScript makes it easier to manage and scale large codebases.

Setting Up the Development Environment

To get started, you’ll need to have Node.js and npm (Node Package Manager) or yarn installed on your system. These are essential for managing project dependencies and running your application. If you don’t have them, you can download them from the official Node.js website. Once you have Node.js and npm installed, you can create a new React project with TypeScript using the following command in your terminal:

npx create-react-app todo-app --template typescript

This command does the following:

  • Creates a new React project named “todo-app”.
  • Uses the “typescript” template to set up the project with TypeScript.
  • Installs all the necessary dependencies.

After the command completes, navigate into the project directory:

cd todo-app

Now, you can start the development server:

npm start
# or
yarn start

This will open your app in your default web browser, usually at http://localhost:3000.

Project Structure

The project structure created by `create-react-app` with the TypeScript template is as follows:

todo-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.tsx
│   ├── App.test.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   └── ...
├── .gitignore
├── package.json
├── README.md
├── tsconfig.json
└── yarn.lock (if using yarn)
  • src/: This directory contains the source code for your application.
  • App.tsx: The main component of your application. This is where we’ll write our To-Do app logic.
  • index.tsx: The entry point of your React application.
  • tsconfig.json: This file contains the TypeScript compiler options.

Defining the To-Do Item Interface

The first step in building our To-Do application is to define the structure of a To-Do item. We’ll use a TypeScript interface for this purpose. Create a new file called `src/types.ts` and add the following code:

// src/types.ts

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

This interface, `TodoItem`, defines the properties of a To-Do item:

  • `id`: A unique number to identify the To-Do item.
  • `text`: The text content of the To-Do item.
  • `completed`: A boolean indicating whether the To-Do item is completed or not.

Building the To-Do App Component

Now, let’s create the main component for our To-Do app. Open `src/App.tsx` and replace the existing code with the following:

// src/App.tsx
import React, { useState } from 'react';
import './App.css';
import { TodoItem } from './types';

function App() {
  const [todos, setTodos] = useState<TodoItem[]>([]);
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    if (newTodo.trim() !== '') {
      const newTodoItem: TodoItem = {
        id: Date.now(),
        text: newTodo,
        completed: false,
      };
      setTodos([...todos, newTodoItem]);
      setNewTodo('');
    }
  };

  const toggleComplete = (id: number) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  const deleteTodo = (id: number) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <div className="App">
      <h2>To-Do List</h2>
      <div className="input-container">
        <input
          type="text"
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
          placeholder="Add a new task..."
        /
        >
        <button onClick={addTodo}>Add</button>
      </div>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}
              className={todo.completed ? 'completed' : ''}
          >
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleComplete(todo.id)}
            /
            >
            <span>{todo.text}</span>
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Let’s break down this code:

  • Imports: We import `useState` from React and the `TodoItem` interface from `src/types.ts`.
  • State Variables:
    • `todos`: An array of `TodoItem` objects, which stores the list of To-Do items. We initialize it as an empty array using `useState<TodoItem[]>([])`. The `<TodoItem[]>` part is a type annotation that tells TypeScript that `todos` is an array of `TodoItem` objects.
    • `newTodo`: A string that stores the text of the new To-Do item being entered by the user.
  • `addTodo` Function: This function is called when the user clicks the “Add” button. It does the following:
    • Checks if the input field is not empty.
    • Creates a new `TodoItem` object with a unique `id`, the text from the input field, and `completed` set to `false`.
    • Updates the `todos` state by adding the new item using the spread operator (`…`).
    • Clears the input field by setting `newTodo` to an empty string.
  • `toggleComplete` Function: This function is called when the user clicks the checkbox next to a To-Do item. It does the following:
    • Uses the `map` method to iterate over the `todos` array.
    • If the `id` of the current item matches the `id` of the item being toggled, it creates a new object with the `completed` property toggled.
    • Returns the updated array, with the completed status of the targeted item changed.
  • `deleteTodo` Function: This function is called when the user clicks the “Delete” button next to a To-Do item. It does the following:
    • Uses the `filter` method to create a new array containing only the items whose `id` does not match the `id` of the item being deleted.
    • Updates the `todos` state with the new array.
  • JSX: The JSX (JavaScript XML) code renders the UI of the To-Do app. It includes:
    • An input field for entering new To-Do items.
    • An “Add” button to add new items to the list.
    • An unordered list (`<ul>`) to display the To-Do items.
    • For each To-Do item:
      • A checkbox to mark the item as complete.
      • The text of the To-Do item.
      • A “Delete” button to remove the item.

Styling the Application (App.css)

To make the To-Do app visually appealing, we’ll add some basic CSS styles. Open `src/App.css` and add the following:

.App {
  font-family: sans-serif;
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

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

input[type="text"] {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 10px;
}

button {
  padding: 8px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

ul {
  list-style: none;
  padding: 0;
}

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

li:last-child {
  border-bottom: none;
}

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

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

These styles will provide a basic layout, input field styling, button styling, and the strike-through effect for completed tasks.

Running and Testing the Application

With the code in place, start your development server (if it’s not already running) using `npm start` or `yarn start`. You should see the To-Do app in your browser at http://localhost:3000. You can now:

  • Enter a To-Do item in the input field and click “Add” to add it to the list.
  • Click the checkbox next to an item to mark it as complete or incomplete.
  • Click the “Delete” button to remove an item from the list.

Congratulations, you’ve built a functional To-Do app with TypeScript and React!

Common Mistakes and How to Fix Them

When working with TypeScript and React, you might encounter some common issues. Here are a few and how to resolve them:

  • Type Errors: TypeScript will highlight type errors during development. Always read the error messages carefully, as they often provide clues about what’s wrong. Make sure your variables, function parameters, and return values match the declared types. If you’re unsure of a type, use the `typeof` operator or consult the TypeScript documentation.
  • Incorrect Imports: Double-check your import statements. Ensure you’re importing the correct modules and that the paths are accurate. Incorrect imports can lead to “cannot find module” errors.
  • State Updates: When updating state in React, always use the setter function provided by `useState`. Directly modifying state variables can lead to unexpected behavior. Also, when updating arrays or objects in state, make sure to create new copies using the spread operator (`…`) or `Object.assign()` to trigger re-renders.
  • Event Handling: When passing event handlers to child components, ensure you’re passing the correct event object. If you’re encountering issues with event handling, check the event object’s properties (e.g., `e.target.value`) and make sure you’re accessing them correctly.
  • Missing Dependencies: If you’re using third-party libraries, ensure you’ve installed them correctly using npm or yarn. Also, make sure you’ve imported the necessary components or functions from those libraries.

Advanced Features and Enhancements

Once you’ve mastered the basics, you can enhance your To-Do app with more advanced features. Here are some ideas:

  • Local Storage: Save the To-Do items to local storage so they persist even when the user closes the browser. This involves using the `localStorage` API to store and retrieve the To-Do items.
  • Filtering: Add filtering options (e.g., “All”, “Active”, “Completed”) to filter the To-Do items based on their status. This will require adding state for the filter option and conditional rendering of the To-Do items.
  • Editing: Allow users to edit the text of a To-Do item. This involves adding an edit mode to the To-Do item and updating the item’s text when the user saves the changes.
  • Drag and Drop: Implement drag-and-drop functionality to reorder the To-Do items. This will require using a library like `react-beautiful-dnd`.
  • Authentication: If you want to build a more complex app, consider adding user authentication to allow multiple users to manage their To-Do lists.

Key Takeaways

This tutorial provided a step-by-step guide to building a To-Do application using TypeScript and React. You learned how to set up a development environment, define interfaces, manage state, handle events, and style your application. Furthermore, you discovered the advantages of using TypeScript and the best practices for writing clean and maintainable code.

Here are some of the key takeaways:

  • TypeScript adds static typing to JavaScript, improving code quality and readability.
  • React is a powerful library for building user interfaces.
  • Using interfaces helps define the structure of your data.
  • State management is crucial for building interactive applications.
  • Component-based architecture promotes reusability and maintainability.

FAQ

Here are some frequently asked questions about building To-Do applications with TypeScript and React:

  1. Why use TypeScript with React?

    TypeScript helps catch errors early, improves code readability, enhances developer experience, and increases the scalability of your application. It provides a more robust and maintainable codebase.

  2. How do I handle complex state in a React application?

    For more complex state management, consider using state management libraries like Redux, Zustand, or MobX. These libraries provide centralized state management and can simplify complex state logic.

  3. How can I deploy my React application?

    You can deploy your React application to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide simple deployment processes and free hosting options.

  4. What are some good resources for learning more about TypeScript and React?

    The official TypeScript documentation, the React documentation, and online courses on platforms like Udemy, Coursera, and freeCodeCamp are excellent resources for learning more about TypeScript and React.

Building a To-Do application is a perfect way to practice your TypeScript and React skills. As you continue to build projects and explore new features, your understanding of these technologies will deepen. Remember to experiment, try new things, and never stop learning. The world of web development is constantly evolving, and the more you practice, the better you will become. Embrace the challenges, and enjoy the process of creating amazing applications. The skills you’ve gained here will serve as a solid foundation for your future projects, opening doors to more complex and exciting endeavors. From simple tasks to complex applications, the principles of clear code, careful planning, and consistent practice are the keys to success in the field of software development, and the To-Do app is just the beginning.

More posts