TypeScript Tutorial: Building a Simple Interactive Task Manager

Written by

learnmodernjavascript

in

In the fast-paced world of software development, managing tasks efficiently is paramount. Whether you’re a seasoned developer juggling multiple projects or a beginner learning the ropes, a well-organized task manager can be a game-changer. This tutorial will guide you through building a simple, interactive task manager using TypeScript, a superset of JavaScript that adds static typing to your code. We’ll explore core TypeScript concepts, learn how to structure our application, and create a user-friendly interface to add, edit, and delete tasks. This project isn’t just about coding; it’s about understanding how to build practical, real-world applications that streamline your workflow and boost your productivity.

Why TypeScript?

Before we dive in, let’s address the elephant in the room: Why TypeScript? While JavaScript is the language of the web, TypeScript offers several advantages that make it a compelling choice for modern development:

  • Static Typing: TypeScript adds static typing, which means you define the data types of variables. This helps catch errors during development, before your code runs, leading to fewer runtime bugs.
  • Improved Code Readability: Type annotations make your code easier to understand, especially in larger projects. It’s like having built-in documentation that clearly states what data a variable or function expects.
  • Enhanced Developer Experience: TypeScript provides better autocompletion, refactoring, and error checking in your IDE, significantly improving your development workflow.
  • Object-Oriented Programming (OOP) Support: TypeScript fully supports OOP concepts like classes, inheritance, and interfaces, allowing you to build more organized and maintainable code.

By using TypeScript, we can write more robust, maintainable, and scalable code. Let’s get started!

Setting Up Your Environment

To follow along with this tutorial, 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 nodejs.org.
  • A Code Editor: Visual Studio Code (VS Code) is highly recommended due to its excellent TypeScript support, but you can use any editor you prefer.
  • Basic Familiarity with JavaScript: While this tutorial aims to be beginner-friendly, some prior knowledge of JavaScript fundamentals will be helpful.

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

  1. Open your terminal or command prompt.
  2. Create a new project directory: mkdir task-manager
  3. Navigate into the directory: cd task-manager
  4. Initialize a new npm project: npm init -y (This creates a package.json file.)
  5. Install TypeScript as a development dependency: npm install typescript --save-dev
  6. Create a TypeScript configuration file: npx tsc --init (This generates a tsconfig.json file, which controls how TypeScript compiles your code.)

Your project structure should now look something like this:

task-manager/
├── node_modules/
├── package.json
├── package-lock.json
├── tsconfig.json
└──

Next, let’s modify the tsconfig.json file to configure our TypeScript compilation. Open tsconfig.json in your code editor. Here are some key settings to consider:

{
  "compilerOptions": {
    "target": "es5",  // or "es6", "esnext" - Specifies the JavaScript language version.
    "module": "commonjs", // or "esnext", "amd", etc. - Specifies the module system.
    "outDir": "./dist", // Specifies the output directory for compiled JavaScript files.
    "rootDir": "./src", // Specifies the root directory of your TypeScript files.
    "strict": true, // Enables strict type checking.
    "esModuleInterop": true, // Enables interoperability between CommonJS and ES modules.
    "skipLibCheck": true, // Skips type checking of declaration files.
    "forceConsistentCasingInFileNames": true // Enforces consistent casing in file names.
  },
  "include": ["src/**/*"] // Specifies the files to include in the compilation.
}

These settings are a good starting point. Feel free to adjust them based on your project’s needs. Specifically, the target option determines the JavaScript version your TypeScript code will be compiled to. The module option specifies the module system, and outDir tells TypeScript where to put the compiled JavaScript files. The strict option is highly recommended as it enables a suite of type-checking rules that help catch errors early.

Creating the Task Manager Application

Now, let’s create the core files for our task manager. Inside your project directory, create a new folder named src. This is where we’ll put our TypeScript code.

Inside the src folder, create the following files:

  • index.ts: This will be our main application file.
  • task.ts: This file will define the Task class.

Task Class (task.ts)

Let’s start by defining the Task class. This class will represent a single task in our application. Open src/task.ts and add the following code:

// src/task.ts

export class Task {
  id: number;
  description: string;
  completed: boolean;

  constructor(id: number, description: string, completed: boolean = false) {
    this.id = id;
    this.description = description;
    this.completed = completed;
  }
}

Here, we define a Task class with three properties: id (a unique identifier), description (the task’s text), and completed (a boolean indicating whether the task is done). The constructor initializes these properties when a new Task object is created. The `completed` property has a default value of `false`.

Main Application (index.ts)

Now, let’s build the main application logic in src/index.ts. This is where we’ll manage our tasks, interact with the user, and update the UI. Add the following code:

// src/index.ts
import { Task } from './task';

let tasks: Task[] = [];
let nextId: number = 1;

// Get elements from the DOM
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
function renderTasks() {
  taskList.innerHTML = ''; // Clear the list
  tasks.forEach(task => {
    const listItem = document.createElement('li');
    listItem.innerHTML = `
        ${task.description}
      <button data-id="${task.id}">Delete</button>
    `;
    taskList.appendChild(listItem);
  });
}

// Function to add a task
function addTask() {
  const description = taskInput.value.trim();
  if (description) {
    const newTask = new Task(nextId++, description);
    tasks.push(newTask);
    taskInput.value = ''; // Clear the input
    renderTasks();
  }
}

// Function to delete a task
function deleteTask(id: number) {
  tasks = tasks.filter(task => task.id !== id);
  renderTasks();
}

// Event listeners
addTaskButton.addEventListener('click', addTask);
taskList.addEventListener('click', (event) => {
  const target = event.target as HTMLElement;
  if (target.tagName === 'BUTTON') {
    const id = parseInt(target.dataset.id!, 10);
    deleteTask(id);
  }

  if (target.tagName === 'INPUT' && target.type === 'checkbox') {
    const id = parseInt(target.dataset.id!, 10);
    const task = tasks.find(task => task.id === id);
    if (task) {
      task.completed = !task.completed;
      renderTasks();
    }
  }
});

// Initial render
renderTasks();

Let’s break down this code:

  • Imports: We import the Task class from ./task.
  • Variables:
    • tasks: Task[]: An array to store our tasks.
    • nextId: number: A counter for generating unique task IDs.
  • DOM Element Selection: We get references to the input field, add button, and task list from the HTML document. The as HTMLInputElement and as HTMLUListElement are type assertions, telling TypeScript the expected type of the DOM elements.
  • renderTasks(): This function clears the task list and then iterates through the tasks array, creating list items (<li> elements) for each task. Each list item contains a checkbox for marking the task as complete and a delete button.
  • addTask(): This function gets the task description from the input field, creates a new Task object, adds it to the tasks array, clears the input field, and calls renderTasks() to update the display.
  • deleteTask(id: number): This function filters the tasks array, removing the task with the specified ID, and then calls renderTasks() to update the display.
  • Event Listeners:
    • An event listener is attached to the add button to call the addTask function when clicked.
    • Another event listener is added to the task list to handle clicks on the delete buttons and checkboxes. It uses event delegation.
  • Initial Render: renderTasks() is called to display any initial tasks. In this version, there are no initial tasks, but if you wanted to load tasks from local storage, this is where you would do it.

Creating the HTML (index.html)

Now, let’s create the HTML file (index.html) to provide the structure and user interface for our task manager. Create this file at the root of your project directory:

<!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>
    <h1>Task Manager</h1>
    <input type="text" id="taskInput" placeholder="Add a task">
    <button id="addTaskButton">Add</button>
    <ul id="taskList"></ul>

    <script src="./dist/index.js"></script>
</body>
</html>

This HTML provides a basic structure with an input field for entering tasks, an add button, and an unordered list (<ul>) to display the tasks. The <script> tag at the end links to the compiled JavaScript file (dist/index.js). The ./dist/index.js path assumes you will compile your TypeScript code to the dist directory.

Compiling and Running the Application

Now, let’s compile our TypeScript code and run the application:

  1. Compile the TypeScript code: Open your terminal and run tsc. This command will compile the TypeScript files (.ts) into JavaScript files (.js) in the dist directory.
  2. Open the HTML file in your browser: Navigate to the index.html file in your browser. You should see the task manager interface.
  3. Test the application: Type a task in the input field, click the “Add” button, and you should see the task appear in the list. You can also click the delete button to remove tasks.

If everything works correctly, you’ve successfully built a basic, interactive task manager using TypeScript!

Adding Features and Enhancements

While our task manager is functional, we can add several features to make it more user-friendly and powerful. Here are some ideas:

  • Task Editing: Add functionality to edit existing tasks. This could involve an edit button that allows users to change the task description.
  • Local Storage: Persist tasks in local storage so they are saved even when the user closes the browser. This will require using the localStorage API.
  • Task Prioritization: Add a priority level to each task (e.g., high, medium, low). You could use a dropdown or radio buttons to select the priority.
  • Filtering and Sorting: Implement filtering to show only completed or incomplete tasks and sorting to arrange tasks by due date or priority.
  • Due Dates: Allow users to set due dates for tasks.
  • More Styling: Use CSS to style the task manager for a better user experience.

Let’s add local storage to persist the tasks. Modify the index.ts file as follows:

// src/index.ts
import { Task } from './task';

let tasks: Task[] = [];
let nextId: number = 1;

// Get elements from the DOM
const taskInput = document.getElementById('taskInput') as HTMLInputElement;
const addTaskButton = document.getElementById('addTaskButton') as HTMLButtonElement;
const taskList = document.getElementById('taskList') as HTMLUListElement;

// Function to save tasks to local storage
function saveTasks() {
  localStorage.setItem('tasks', JSON.stringify(tasks));
  localStorage.setItem('nextId', String(nextId));
}

// Function to load tasks from local storage
function loadTasks() {
  const storedTasks = localStorage.getItem('tasks');
  const storedNextId = localStorage.getItem('nextId');
  if (storedTasks) {
    tasks = JSON.parse(storedTasks);
    nextId = storedNextId ? parseInt(storedNextId, 10) : 1; // Use stored nextId or default to 1
  }
}

// Function to render tasks
function renderTasks() {
  taskList.innerHTML = ''; // Clear the list
  tasks.forEach(task => {
    const listItem = document.createElement('li');
    listItem.innerHTML = `
      <input type="checkbox" ${task.completed ? 'checked' : ''} data-id="${task.id}">  ${task.description}
      <button data-id="${task.id}">Delete</button>
    `;
    taskList.appendChild(listItem);
  });
}

// Function to add a task
function addTask() {
  const description = taskInput.value.trim();
  if (description) {
    const newTask = new Task(nextId++, description);
    tasks.push(newTask);
    taskInput.value = ''; // Clear the input
    renderTasks();
    saveTasks(); // Save tasks after adding
  }
}

// Function to delete a task
function deleteTask(id: number) {
  tasks = tasks.filter(task => task.id !== id);
  renderTasks();
  saveTasks(); // Save tasks after deleting
}

// Event listeners
addTaskButton.addEventListener('click', addTask);
taskList.addEventListener('click', (event) => {
  const target = event.target as HTMLElement;
  if (target.tagName === 'BUTTON') {
    const id = parseInt(target.dataset.id!, 10);
    deleteTask(id);
  }

  if (target.tagName === 'INPUT' && target.type === 'checkbox') {
    const id = parseInt(target.dataset.id!, 10);
    const task = tasks.find(task => task.id === id);
    if (task) {
      task.completed = !task.completed;
      renderTasks();
      saveTasks(); // Save tasks after marking as complete
    }
  }
});

// Initial render
loadTasks(); // Load tasks when the app starts
renderTasks();

Here’s what changed:

  • saveTasks(): This function converts the tasks array to a JSON string using JSON.stringify() and stores it in local storage under the key “tasks”. It also saves the nextId.
  • loadTasks(): This function retrieves the tasks from local storage using localStorage.getItem('tasks'). If tasks are found, it parses the JSON string back into an array of Task objects using JSON.parse() and assigns it to the tasks variable. It also loads the nextId.
  • We call loadTasks() at the beginning of the script to load tasks when the application starts.
  • We call saveTasks() after adding, deleting, and marking tasks as complete to update the local storage.

Now, when you add, delete, or complete tasks, they will be saved in your browser’s local storage and will persist even if you close the browser and reopen the page. You can inspect your local storage using your browser’s developer tools.

Common Mistakes and How to Fix Them

When working with TypeScript and building applications, it’s easy to make mistakes. Here are some common pitfalls and how to avoid them:

  • Incorrect Type Annotations: One of the most common mistakes is using incorrect type annotations. For example, if you declare a variable as let count: number = "5";, TypeScript will throw an error because you’re trying to assign a string to a number variable. To fix this, make sure your variable types match the values you’re assigning.
  • Missing Type Annotations: While TypeScript can often infer types, it’s good practice to explicitly annotate your variables, function parameters, and return types. This improves code readability and helps prevent unexpected behavior. For example, instead of function add(a, b) { ... }, use function add(a: number, b: number): number { ... }.
  • Ignoring Compiler Errors: TypeScript’s compiler is your friend! Don’t ignore the errors it throws. They are there to help you catch bugs early in the development process. Carefully read the error messages and fix the issues before running your code. Your IDE will often highlight these errors in real-time.
  • Incorrect Import Paths: Make sure your import paths are correct. TypeScript uses relative paths to import modules. Double-check your file structure and the paths in your import statements. For example, if index.ts is in the src directory and you are importing from task.ts which is also in the src directory, the correct import statement is import { Task } from './task';.
  • Not Using Strict Mode: Always enable strict mode in your tsconfig.json file. Strict mode enables a set of type-checking rules that help you write safer and more reliable code.
  • Forgetting to Compile: Remember to compile your TypeScript code using the tsc command before running your application. The browser only understands JavaScript, so you need to convert your TypeScript code into JavaScript.
  • Incorrectly Handling DOM Elements: When working with the DOM, make sure you properly cast the elements using type assertions (e.g., const taskInput = document.getElementById('taskInput') as HTMLInputElement;). This tells TypeScript the expected type of the element, allowing you to access its properties and methods safely.

Key Takeaways

Let’s recap what we’ve learned in this tutorial:

  • We’ve learned the benefits of using TypeScript, including static typing, improved code readability, and enhanced developer experience.
  • We set up a TypeScript development environment and configured the tsconfig.json file.
  • We created a simple, interactive task manager with the ability to add, delete, and mark tasks as complete.
  • We added local storage to persist tasks.
  • We discussed common mistakes and how to avoid them.

FAQ

Here are some frequently asked questions about building a task manager with TypeScript:

  1. Can I use a framework like React or Angular with this approach?

    Yes, absolutely! TypeScript works seamlessly with popular JavaScript frameworks like React, Angular, and Vue. You can leverage TypeScript’s type checking and other features to build more robust and maintainable applications with these frameworks. The core concepts of the task manager, such as the Task class and the logic for managing tasks, can be easily adapted to a framework-based application.

  2. How can I deploy this task manager to the web?

    You can deploy your task manager to the web using various hosting platforms like Netlify, Vercel, or GitHub Pages. You’ll need to build your TypeScript code (tsc), and then upload the compiled JavaScript files (along with the HTML and CSS) to your chosen hosting platform. Most platforms provide easy-to-use deployment processes.

  3. What are some good resources for learning more about TypeScript?

    There are many excellent resources available for learning TypeScript, including the official TypeScript documentation, online courses on platforms like Udemy and Coursera, and tutorials on websites like freeCodeCamp and MDN Web Docs. The TypeScript documentation is an excellent place to start as it provides a comprehensive overview of the language. Experimenting with code and building small projects is also a great way to learn.

  4. How can I improve the user interface (UI) of the task manager?

    You can significantly improve the UI by using CSS to style the elements. You can add more features such as a proper layout, colors, fonts, and responsiveness using CSS. You can also incorporate CSS frameworks like Bootstrap, Tailwind CSS, or Materialize to speed up the styling process. For more advanced UI, consider using a JavaScript framework like React or Vue.js.

Building a task manager is an excellent way to learn the fundamentals of TypeScript and web development. By understanding the concepts discussed in this tutorial, you’re well-equipped to build more complex and sophisticated applications. Remember that practice is key. The more you code, the better you’ll become. So, keep experimenting, exploring new features, and refining your skills. Embrace the power of TypeScript to create robust and maintainable applications, making your development process more efficient and enjoyable. The journey of a thousand lines of code begins with a single task, so take that first step, write some code, and see what you can create!

More posts