TypeScript Tutorial: Building a Simple Web-Based Task Scheduler

Written by

learnmodernjavascript

in

In today’s fast-paced world, staying organized and managing your time effectively is crucial. Whether you’re a student, a professional, or just someone who wants to be more productive, a task scheduler can be an invaluable tool. Imagine having a digital assistant that helps you plan your day, set reminders, and track your progress. In this tutorial, we’ll dive into the world of TypeScript and build a simple, yet functional, web-based task scheduler. This project will not only teach you the fundamentals of TypeScript but also provide you with a practical application to enhance your coding skills.

Why Build a Task Scheduler?

Creating a task scheduler offers several benefits. First and foremost, it allows you to learn and practice TypeScript in a real-world context. You’ll work with core concepts like variables, data types, functions, and object-oriented programming (OOP). Secondly, you’ll gain experience in structuring a web application, handling user input, and displaying data dynamically. Finally, you’ll end up with a useful tool that you can customize and expand upon to meet your specific needs. This tutorial is designed for beginners to intermediate developers, so even if you’re new to TypeScript, you’ll be able to follow along and learn.

Setting Up Your Development Environment

Before we begin, let’s make sure you have the necessary tools installed:

  • Node.js and npm (Node Package Manager): These are essential for managing project dependencies and running TypeScript code. You can download them from nodejs.org.
  • TypeScript Compiler: Install it globally using npm: npm install -g typescript.
  • A Code Editor: Visual Studio Code (VS Code) is highly recommended due to its excellent TypeScript support.

Once you have these installed, create a new project directory and initialize a Node.js project:

mkdir task-scheduler
cd task-scheduler
npm init -y

Next, let’s set up the TypeScript configuration. Create a tsconfig.json file in your project root:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

This configuration tells the TypeScript compiler how to transpile your code. Key options include:

  • target: Specifies the JavaScript version to compile to (ES5 is widely compatible).
  • module: Defines the module system (CommonJS is suitable for Node.js).
  • outDir: Where the compiled JavaScript files will be placed.
  • rootDir: The directory containing your TypeScript source files.
  • strict: Enables strict type checking for better code quality.
  • esModuleInterop: Allows interoperability between CommonJS and ES modules.

Creating the Project Structure

Let’s create the basic file structure for our task scheduler. Inside your project directory, create a src folder. Inside the src folder, create the following files:

  • index.ts: The main entry point of our application.
  • task.ts: Defines the Task class.
  • taskManager.ts: Handles task creation, listing, and other operations.

Building the Task Class (task.ts)

The Task class will represent a single task. Open src/task.ts and add the following code:

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

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

  markAsCompleted(): void {
    this.completed = true;
  }

  markAsIncomplete(): void {
    this.completed = false;
  }
}

In this code:

  • We define a Task class with properties like id, title, description, dueDate, and completed.
  • The constructor initializes these properties when a new task is created.
  • We include methods to mark a task as completed or incomplete.

Implementing the Task Manager (taskManager.ts)

The TaskManager class will manage our tasks. Open src/taskManager.ts and add the following code:

import { Task } from './task';

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

  addTask(title: string, description: string, dueDate: Date): Task {
    const newTask = new Task(this.nextId++, title, description, 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);
  }

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

  markTaskAsCompleted(id: number): void {
    const task = this.getTaskById(id);
    if (task) {
      task.markAsCompleted();
    }
  }

  markTaskAsIncomplete(id: number): void {
    const task = this.getTaskById(id);
    if (task) {
      task.markAsIncomplete();
    }
  }
}

Here’s what this code does:

  • It imports the Task class.
  • It defines a TaskManager class that holds an array of Task objects.
  • addTask() creates a new task and adds it to the tasks array.
  • getTasks() returns all tasks.
  • getTaskById() retrieves a task by its ID.
  • deleteTask() removes a task by ID.
  • markTaskAsCompleted() and markTaskAsIncomplete() update the task completion status.

Building the Main Application Logic (index.ts)

Now, let’s write the main application logic in src/index.ts:

import { TaskManager } from './taskManager';

const taskManager = new TaskManager();

// Example usage
const task1 = taskManager.addTask(
  'Grocery Shopping',
  'Buy groceries for the week',
  new Date('2024-05-15')
);
const task2 = taskManager.addTask(
  'Write Blog Post',
  'Complete the task scheduler tutorial',
  new Date('2024-05-16')
);

console.log('All Tasks:', taskManager.getTasks());

taskManager.markTaskAsCompleted(task1.id);
console.log('Tasks after marking task1 as completed:', taskManager.getTasks());

taskManager.deleteTask(task2.id);
console.log('Tasks after deleting task2:', taskManager.getTasks());

In this code:

  • We import the TaskManager class.
  • We create an instance of TaskManager.
  • We add some example tasks using addTask().
  • We log the tasks to the console.
  • We mark a task as completed and then delete a task.

Compiling and Running the Application

Now that we’ve written our code, let’s compile and run it. Open your terminal and navigate to your project directory.

  1. Compile the TypeScript code: tsc. This command will compile the TypeScript files (.ts) into JavaScript files (.js) in the dist directory.
  2. Run the application: node dist/index.js. This will execute the compiled JavaScript code. You should see the output in your console, showing the tasks and their statuses.

Adding a User Interface (UI) with HTML and JavaScript

While the current application works, it’s not very user-friendly. Let’s add a simple HTML UI to interact with our task scheduler. Create an index.html file in your project root:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Scheduler</title>
</head>
<body>
    <h1>Task Scheduler</h1>

    <div id="task-form">
        <label for="title">Title:</label>
        <input type="text" id="title" name="title"><br>

        <label for="description">Description:</label>
        <textarea id="description" name="description"></textarea><br>

        <label for="dueDate">Due Date:</label>
        <input type="date" id="dueDate" name="dueDate"><br>

        <button id="addTaskButton">Add Task</button>
    </div>

    <div id="task-list">
        <h2>Tasks</h2>
        <ul id="tasks">
            <!-- Tasks will be displayed here -->
        </ul>
    </div>

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

This HTML provides:

  • A title and headings.
  • A form for adding new tasks with input fields for title, description, and due date.
  • A button to add tasks.
  • A section to display the list of tasks.
  • A script tag that links to our compiled JavaScript (dist/index.js).

Now, let’s modify index.ts to interact with the UI. Replace the content of src/index.ts with the following:

import { TaskManager } from './taskManager';
import { Task } from './task';

const taskManager = new TaskManager();

// Get references to HTML elements
const titleInput = document.getElementById('title') as HTMLInputElement;
const descriptionInput = document.getElementById('description') as HTMLTextAreaElement;
const dueDateInput = document.getElementById('dueDate') as HTMLInputElement;
const addTaskButton = document.getElementById('addTaskButton') as HTMLButtonElement;
const taskList = document.getElementById('tasks') as HTMLUListElement;

// Function to render tasks
function renderTasks(): void {
  taskList.innerHTML = ''; // Clear the task list
  taskManager.getTasks().forEach(task => {
    const listItem = document.createElement('li');
    listItem.innerHTML = `
      <strong>${task.title}</strong> - ${task.description} - Due: ${task.dueDate.toLocaleDateString()}
      <button data-id="${task.id}" class="complete-button">${task.completed ? 'Mark Incomplete' : 'Mark Complete'}</button>
      <button data-id="${task.id}" class="delete-button">Delete</button>
    `;

    // Add event listeners for the complete/incomplete button
    const completeButton = listItem.querySelector('.complete-button') as HTMLButtonElement;
    completeButton.addEventListener('click', () => {
      if (task.completed) {
        taskManager.markTaskAsIncomplete(task.id);
      } else {
        taskManager.markTaskAsCompleted(task.id);
      }
      renderTasks(); // Refresh the list
    });

    // Add event listener for the delete button
    const deleteButton = listItem.querySelector('.delete-button') as HTMLButtonElement;
    deleteButton.addEventListener('click', () => {
      taskManager.deleteTask(task.id);
      renderTasks(); // Refresh the list
    });

    taskList.appendChild(listItem);
  });
}

// Event listener for adding a task
addTaskButton.addEventListener('click', () => {
  const title = titleInput.value;
  const description = descriptionInput.value;
  const dueDate = new Date(dueDateInput.value);

  if (title && description && !isNaN(dueDate.getTime())) {
    taskManager.addTask(title, description, dueDate);
    renderTasks(); // Refresh the list

    // Clear the form
    titleInput.value = '';
    descriptionInput.value = '';
    dueDateInput.value = '';
  } else {
    alert('Please fill out all fields correctly.');
  }
});

// Initial rendering of tasks
renderTasks();

Key changes in this code:

  • We get references to the HTML elements.
  • We define a renderTasks() function that dynamically creates list items for each task and updates the UI.
  • We add event listeners to the “Add Task” button to create new tasks based on user input.
  • We add event listeners to the “Mark Complete/Incomplete” buttons to update task statuses.
  • We add event listeners to the “Delete” buttons to remove tasks.
  • We call renderTasks() to display the tasks initially and after each update.

To run this version of the application:

  1. Compile the TypeScript code: tsc.
  2. Open index.html in your web browser.
  3. You should now see the task scheduler UI. Add tasks, mark them as complete, and delete them.

Common Mistakes and How to Fix Them

As you work on this project, you might encounter some common issues. Here are a few and how to address them:

  • Type Errors: TypeScript’s type system can be strict. If you see type errors in your code (e.g., “Type ‘string’ is not assignable to type ‘number’”), carefully review the data types of your variables and function parameters. Make sure they match the expected types. Use type annotations (e.g., let myVariable: number = 10;) to explicitly define the types.
  • Incorrect File Paths: Double-check the file paths in your import statements and in the <script src="..."> tag in your HTML. Typos or incorrect paths will prevent your code from running.
  • Uncaught Errors: Use your browser’s developer console (usually opened by pressing F12) to check for JavaScript errors. These errors often provide valuable clues about what went wrong.
  • Incorrect Date Formatting: When working with dates, ensure that the date format is compatible with the Date constructor. If you’re getting unexpected results, try using a date parsing library like date-fns or moment.js for more robust date handling.
  • UI Updates Not Reflecting: If your UI doesn’t update after adding, completing, or deleting tasks, double-check that you’re calling renderTasks() after each operation. Also, make sure that the event listeners are correctly attached to the buttons.

Key Takeaways and Best Practices

This tutorial has covered a lot of ground. Here’s a summary of the key takeaways:

  • TypeScript Fundamentals: You’ve learned about classes, variables, data types, functions, and working with objects.
  • Project Structure: You’ve seen how to organize a TypeScript project with separate files for different components.
  • Event Handling: You’ve learned how to handle user input and create interactive UI elements.
  • UI Updates: You’ve seen how to dynamically update the UI based on changes in your data.
  • Debugging: You’ve learned how to identify and fix common issues in your code.

Here are some best practices to keep in mind:

  • Use Type Annotations: Always use type annotations to make your code more readable and prevent errors.
  • Write Clean Code: Use meaningful variable names, add comments where necessary, and format your code consistently.
  • Break Down Complex Tasks: Divide your code into smaller, manageable functions and classes.
  • Test Your Code: Test your code regularly to catch errors early on.
  • Use a Linter: Use a linter (like ESLint) to automatically check your code for style and potential errors.

Expanding the Task Scheduler

This is just the beginning! Here are some ideas for expanding your task scheduler:

  • Add Task Categories: Allow users to categorize tasks (e.g., Work, Personal, etc.).
  • Implement Recurring Tasks: Allow tasks to repeat daily, weekly, or monthly.
  • Add Reminders: Implement notifications to remind users of upcoming tasks.
  • Integrate with a Database: Store tasks in a database (e.g., using a library like Firebase or a local database).
  • Add Drag-and-Drop Functionality: Allow users to reorder tasks in the list.
  • Implement User Authentication: Allow users to create accounts and save their tasks.
  • Add a Dark Mode: Implement a dark mode for better user experience.

FAQ

Here are some frequently asked questions:

  1. Q: Why use TypeScript instead of JavaScript?
    A: TypeScript adds static typing to JavaScript, which helps you catch errors early, improves code readability, and makes your code easier to maintain.
  2. Q: How do I handle dates in TypeScript?
    A: You can use the built-in Date object or a date library like date-fns or moment.js.
  3. Q: How do I deploy my task scheduler?
    A: You can deploy your application to a web server (e.g., using Netlify, Vercel, or AWS) after building your project (tsc) and uploading the necessary files (HTML, JavaScript, CSS).
  4. Q: Where can I learn more about TypeScript?
    A: The official TypeScript documentation (typescriptlang.org/docs/) is an excellent resource. You can also find many online tutorials and courses on platforms like Udemy, Coursera, and freeCodeCamp.
  5. Q: How can I improve the UI of my task scheduler?
    A: Consider using a CSS framework like Bootstrap, Tailwind CSS, or Materialize to style your UI. You can also add more advanced UI features, such as animations and transitions.

The journey of building your task scheduler is a rewarding one. You’ve now created a functional web application with TypeScript, demonstrating a solid understanding of fundamental concepts. The skills you’ve acquired—from setting up your environment to handling user interactions and UI updates—are transferable to many other projects. Remember that coding is a continuous learning process. Embrace experimentation, explore the possibilities for enhancements, and most importantly, enjoy the process of bringing your ideas to life. Each line of code you write is a step forward, and with each project, you grow as a developer. Keep practicing, keep learning, and keep building.

More posts