TypeScript Tutorial: Building a Simple Interactive Task Management App

Written by

learnmodernjavascript

in

In the fast-paced world of software development, staying organized is key. Whether you’re juggling multiple projects, personal tasks, or collaborating with a team, a well-structured task management system can be a lifesaver. This tutorial will guide you through building a simple, interactive task management application using TypeScript. We’ll explore core TypeScript concepts, learn how to structure our application, and create a user-friendly interface to manage tasks effectively. By the end of this tutorial, you’ll have a functional task management app and a solid understanding of how to apply TypeScript to real-world projects.

Why TypeScript for a Task Management App?

TypeScript, a superset of JavaScript, brings static typing to your code. This means you can define the data types of your variables, function parameters, and return values. This has several advantages:

  • Early Error Detection: TypeScript catches type-related errors during development, preventing runtime surprises.
  • Improved Code Readability: Type annotations make your code easier to understand and maintain.
  • Enhanced Refactoring: TypeScript’s type system makes refactoring code safer and more efficient.
  • Better Tooling: IDEs can provide better autocompletion, code navigation, and error checking.

For a task management app, where data structures and interactions are central, TypeScript’s benefits are particularly valuable. It helps ensure data integrity and streamlines development.

Setting Up Your Development Environment

Before we dive into the code, let’s set up our development environment. You’ll need:

  • Node.js and npm (or yarn): These are essential for managing packages and running our TypeScript code. You can download them from nodejs.org.
  • A Code Editor: Visual Studio Code (VS Code) is highly recommended due to its excellent TypeScript support. You can download it from code.visualstudio.com.
  • TypeScript Compiler: We’ll install this globally using npm.

Open your terminal and run the following commands:

npm install -g typescript

This command installs the TypeScript compiler globally, making the tsc command available in your terminal.

Project Structure

Let’s create a basic project structure:

mkdir task-management-app
cd task-management-app
npm init -y
tsc --init

Here’s what these commands do:

  • mkdir task-management-app: Creates a new directory for our project.
  • cd task-management-app: Navigates into the project directory.
  • npm init -y: Initializes a new Node.js project, creating a package.json file.
  • tsc --init: Creates a tsconfig.json file, which configures the TypeScript compiler.

Your project directory should now contain a package.json and a tsconfig.json file. We’ll modify the tsconfig.json file later to configure the TypeScript compiler options.

Defining Task Interfaces and Types

The core of our application involves managing tasks. Let’s define an interface to represent a task:

// src/types.ts

export interface Task {
  id: number;
  title: string;
  description: string;
  status: 'open' | 'in progress' | 'completed';
  dueDate?: Date; // Optional due date
}

In this code:

  • We define an interface named Task.
  • id: A unique number to identify the task.
  • title: The task’s title (e.g., “Write blog post”).
  • description: A detailed description of the task.
  • status: The current status of the task. We use a union type ('open' | 'in progress' | 'completed') to restrict the possible values, preventing typos and ensuring data consistency.
  • dueDate: An optional date for when the task is due. The ? makes it optional.

Create a file named src/types.ts and paste this code into it. This file will hold all our type definitions.

Creating the Task Management Logic

Now, let’s create the core logic for managing tasks. Create a file named src/taskManager.ts:

// src/taskManager.ts
import { Task } from './types';

export class TaskManager {
  private tasks: Task[] = [];
  private nextId: number = 1;

  addTask(title: string, description: string, dueDate?: Date): Task {
    const newTask: Task = {
      id: this.nextId++,
      title,
      description,
      status: 'open',
      dueDate,
    };
    this.tasks.push(newTask);
    return newTask;
  }

  getTasks(): Task[] {
    return this.tasks;
  }

  getTaskById(id: number): Task | undefined {
    return this.tasks.find(task => task.id === id);
  }

  updateTaskStatus(id: number, newStatus: 'open' | 'in progress' | 'completed'): Task | undefined {
    const taskIndex = this.tasks.findIndex(task => task.id === id);
    if (taskIndex !== -1) {
      this.tasks[taskIndex].status = newStatus;
      return this.tasks[taskIndex];
    }
    return undefined;
  }

  deleteTask(id: number): boolean {
    const initialLength = this.tasks.length;
    this.tasks = this.tasks.filter(task => task.id !== id);
    return this.tasks.length < initialLength;
  }
}

Let’s break down this code:

  • We import the Task interface from ./types.
  • TaskManager class: This class encapsulates all task management logic.
  • private tasks: Task[] = []: An array to store our tasks. The private keyword means it’s only accessible within the class.
  • private nextId: number = 1: A counter to generate unique IDs for tasks.
  • addTask(title, description, dueDate?): Adds a new task to the tasks array. It takes the title, description, and an optional due date.
  • getTasks(): Returns all tasks.
  • getTaskById(id): Retrieves a task by its ID. It returns undefined if the task isn’t found.
  • updateTaskStatus(id, newStatus): Updates the status of a task. It takes the task ID and the new status.
  • deleteTask(id): Deletes a task by its ID. Returns `true` if the task was deleted, `false` otherwise.

Building a Simple Command-Line Interface (CLI)

To interact with our task management logic, let’s create a simple command-line interface. This will help us test the functionality. Create a file named src/index.ts:

// src/index.ts
import { TaskManager } from './taskManager';
import * as readline from 'readline';

const taskManager = new TaskManager();

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

function showTasks() {
  const tasks = taskManager.getTasks();
  if (tasks.length === 0) {
    console.log('No tasks yet.');
  } else {
    tasks.forEach(task => {
      console.log(`ID: ${task.id}, Title: ${task.title}, Status: ${task.status}${task.dueDate ? ", Due: " + task.dueDate.toLocaleDateString() : ""}`);
    });
  }
}

function addTaskInteractively() {
  rl.question('Title: ', title => {
    rl.question('Description: ', description => {
      rl.question('Due Date (YYYY-MM-DD, optional): ', dueDateString => {
        let dueDate: Date | undefined = undefined;
        if (dueDateString) {
          try {
            dueDate = new Date(dueDateString);
            if (isNaN(dueDate.getTime())) {
              console.log('Invalid date format. Task not added.');
              mainMenu();
              return;
            }
          } catch (error) {
            console.log('Invalid date format. Task not added.');
            mainMenu();
            return;
          }
        }
        const newTask = taskManager.addTask(title, description, dueDate);
        console.log(`Task added with ID: ${newTask.id}`);
        mainMenu();
      });
    });
  });
}

function updateTaskStatusInteractively() {
  rl.question('Enter task ID to update: ', idString => {
    const id = parseInt(idString, 10);
    if (isNaN(id)) {
      console.log('Invalid task ID.');
      mainMenu();
      return;
    }
    rl.question('Enter new status (open, in progress, completed): ', status => {
      if (status !== 'open' && status !== 'in progress' && status !== 'completed') {
        console.log('Invalid status.');
        mainMenu();
        return;
      }
      const updatedTask = taskManager.updateTaskStatus(id, status as 'open' | 'in progress' | 'completed');
      if (updatedTask) {
        console.log('Task updated.');
      } else {
        console.log('Task not found.');
      }
      mainMenu();
    });
  });
}

function deleteTaskInteractively() {
  rl.question('Enter task ID to delete: ', idString => {
    const id = parseInt(idString, 10);
    if (isNaN(id)) {
      console.log('Invalid task ID.');
      mainMenu();
      return;
    }
    const deleted = taskManager.deleteTask(id);
    if (deleted) {
      console.log('Task deleted.');
    } else {
      console.log('Task not found.');
    }
    mainMenu();
  });
}

function mainMenu() {
  console.log('nTask Management App');
  console.log('1. View Tasks');
  console.log('2. Add Task');
  console.log('3. Update Task Status');
  console.log('4. Delete Task');
  console.log('5. Exit');
  rl.question('Choose an option: ', answer => {
    switch (answer) {
      case '1':
        showTasks();
        mainMenu();
        break;
      case '2':
        addTaskInteractively();
        break;
      case '3':
        updateTaskStatusInteractively();
        break;
      case '4':
        deleteTaskInteractively();
        break;
      case '5':
        rl.close();
        break;
      default:
        console.log('Invalid option.');
        mainMenu();
    }
  });
}

mainMenu();

In this code:

  • We import the TaskManager class.
  • We use the readline module to create a simple CLI.
  • taskManager = new TaskManager(): Creates an instance of our task manager.
  • showTasks(): Displays the current tasks.
  • addTaskInteractively(): Prompts the user for task details (title, description, due date) and adds the task. Includes date validation.
  • updateTaskStatusInteractively(): Prompts the user for a task ID and the new status and updates the task.
  • deleteTaskInteractively(): Prompts the user for a task ID and deletes the task.
  • mainMenu(): Displays a menu and handles user input.

Configuring the TypeScript Compiler

Now, let’s configure the TypeScript compiler by modifying the tsconfig.json file. Open tsconfig.json and make the following changes (or ensure these settings are present):

{
  "compilerOptions": {
    "target": "ES2015", // or a later version, like ES2020
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true, // Enable strict type checking
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

Here’s what these options do:

  • target: Specifies the JavaScript version to compile to. ES2015 (ES6) is a good starting point.
  • module: Specifies the module system to use (commonjs, esnext, etc.). commonjs is suitable for Node.js.
  • outDir: Specifies the output directory for the compiled JavaScript files. We’re using dist.
  • rootDir: Specifies the root directory of your TypeScript files.
  • strict: Enables strict type checking, which is highly recommended.
  • esModuleInterop: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: Skips type checking of declaration files (e.g., from node_modules) to speed up compilation.
  • forceConsistentCasingInFileNames: Enforces consistent casing for file names.
  • include: Specifies which files to include in the compilation.

Compiling and Running the Application

Now, let’s compile our TypeScript code into JavaScript. Open your terminal and run the following command from the project root directory:

tsc

This will create a dist directory containing the compiled JavaScript files. To run the application, use:

node dist/index.js

You should see the task management menu in your terminal. You can now add tasks, view tasks, update their status, and delete them by following the prompts. Try adding a task with a due date to test that functionality.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Type Errors: TypeScript will report type errors during compilation. Read the error messages carefully to understand the problem. Often, the fix involves ensuring that variables and function parameters have the correct types.
  • Incorrect Module Imports: Make sure your import paths are correct. Double-check the file paths and module names.
  • Forgetting to Compile: Remember to run tsc to compile your TypeScript code after making changes.
  • Incorrect Date Formatting: When working with dates, ensure you handle date formats correctly. Use a library like date-fns for more robust date manipulation if needed.
  • Not Handling Edge Cases: Consider edge cases, such as invalid user input (e.g., non-numeric IDs), and handle them gracefully.

Enhancements and Next Steps

This is a basic task management app, but you can extend it in many ways:

  • User Interface (UI): Create a graphical user interface using a framework like React, Angular, or Vue.js.
  • Data Persistence: Store tasks in a database (e.g., SQLite, PostgreSQL, MongoDB) or local storage.
  • Advanced Features: Add features like task prioritization, recurring tasks, and user authentication.
  • Testing: Write unit tests to ensure the reliability of your code.
  • Error Handling: Implement robust error handling and logging.

Key Takeaways

  • TypeScript helps write more maintainable and reliable code.
  • Interfaces define the structure of your data.
  • Classes encapsulate logic and data.
  • The compiler catches type errors early.
  • A command-line interface provides a basic way to interact with your application.

FAQ

  1. What are the advantages of using TypeScript over JavaScript? TypeScript offers static typing, which helps catch errors early, improves code readability and maintainability, and provides better tooling support.
  2. How do I install TypeScript? You can install the TypeScript compiler globally using npm: npm install -g typescript.
  3. What is the purpose of tsconfig.json? The tsconfig.json file configures the TypeScript compiler, specifying options like the target JavaScript version, module system, and output directory.
  4. How do I compile TypeScript code? Use the command tsc in your terminal. This command compiles your TypeScript files into JavaScript files.
  5. Can I use TypeScript with an existing JavaScript project? Yes, you can gradually introduce TypeScript into your JavaScript project. You can start by renaming your JavaScript files to .ts and adding type annotations.

Building this task management application with TypeScript provides a solid foundation for understanding the benefits of static typing and how it can improve your development workflow. The CLI application is a starting point, and the possibilities for expansion are endless. By starting with a simple project and progressively adding features, you’ll not only learn TypeScript but also gain valuable experience in software design and development.

More posts