TypeScript Tutorial: Building a Simple Web-Based Note-Taking App

Written by

learnmodernjavascript

in

In today’s fast-paced digital world, the ability to quickly jot down ideas, save important information, and organize your thoughts is crucial. Note-taking apps have become indispensable tools for students, professionals, and anyone who needs to capture and manage information efficiently. But have you ever considered building your own? In this tutorial, we’ll dive into the world of TypeScript and create a simple, yet functional, web-based note-taking application. This project not only provides a practical application of TypeScript concepts but also allows you to customize and expand it based on your specific needs.

Why TypeScript for a Note-Taking App?

TypeScript, a superset of JavaScript, brings static typing and object-oriented programming features to the forefront. This means you’ll benefit from:

  • Early Error Detection: TypeScript catches potential errors during development, saving you time and headaches.
  • Improved Code Readability: Type annotations and interfaces make your code easier to understand and maintain.
  • Enhanced Code Completion: IDEs can provide better suggestions and auto-completion, boosting your productivity.
  • Scalability: TypeScript is excellent for larger projects, making it easier to manage and refactor your code as your app grows.

By using TypeScript, we’ll create a more robust and maintainable note-taking application than we could with plain JavaScript alone.

Project Setup and Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies.
  • A code editor: Visual Studio Code (VS Code) is highly recommended due to its excellent TypeScript support.
  • Basic understanding of HTML, CSS, and JavaScript: Familiarity with these technologies will be beneficial, but not strictly required.

Let’s set up our project!

  1. Create a project directory: Open your terminal or command prompt and create a new directory for your project. For example: mkdir note-taking-app && cd note-taking-app
  2. Initialize npm: Run npm init -y (or yarn init -y) to create a package.json file.
  3. Install TypeScript: Install TypeScript globally or locally using: npm install --save-dev typescript or yarn add --dev typescript.
  4. Create a TypeScript configuration file: Run npx tsc --init. This will generate a tsconfig.json file, which you can customize to configure your TypeScript project.
  5. Create project folders: Create the following folders in your project directory: src (for your TypeScript source files), and public (for your HTML, CSS, and any static assets).

Building the Note-Taking App: Core Features

Now, let’s build the core functionalities of our note-taking app. We’ll start with the basic features, such as creating, reading, updating, and deleting notes (CRUD operations).

1. Defining the Note Interface

First, we’ll define a Note interface to represent the structure of our notes. Create a file named src/Note.ts and add the following code:


// src/Note.ts

interface Note {
  id: string;
  title: string;
  content: string;
  createdAt: Date;
  updatedAt: Date;
}

export default Note;

This interface specifies that each note will have an id (a unique identifier), title, content, createdAt, and updatedAt properties. The export default Note; line makes the Note interface available for use in other parts of our application.

2. Implementing the Note Service

We’ll create a NoteService class to handle note-related operations. Create a file named src/NoteService.ts and add the following code:


// src/NoteService.ts
import Note from './Note';

class NoteService {
  private notes: Note[] = [];

  constructor() {
    // Load notes from local storage when the service is created
    const storedNotes = localStorage.getItem('notes');
    if (storedNotes) {
      this.notes = JSON.parse(storedNotes);
    }
  }

  getAllNotes(): Note[] {
    return this.notes;
  }

  getNote(id: string): Note | undefined {
    return this.notes.find(note => note.id === id);
  }

  addNote(title: string, content: string): Note {
    const newNote: Note = {
      id: this.generateId(),
      title,
      content,
      createdAt: new Date(),
      updatedAt: new Date(),
    };
    this.notes.push(newNote);
    this.saveNotes(); // Save to local storage after adding
    return newNote;
  }

  updateNote(id: string, title: string, content: string): Note | undefined {
    const noteIndex = this.notes.findIndex(note => note.id === id);
    if (noteIndex === -1) {
      return undefined;
    }
    this.notes[noteIndex] = {
      ...this.notes[noteIndex],
      title,
      content,
      updatedAt: new Date(),
    };
    this.saveNotes(); // Save to local storage after updating
    return this.notes[noteIndex];
  }

  deleteNote(id: string): void {
    this.notes = this.notes.filter(note => note.id !== id);
    this.saveNotes(); // Save to local storage after deleting
  }

  private generateId(): string {
    return Math.random().toString(36).substring(2, 15);
  }

  private saveNotes(): void {
    localStorage.setItem('notes', JSON.stringify(this.notes));
  }
}

export default NoteService;

Let’s break down the code:

  • NoteService class: This class encapsulates all note-related logic.
  • notes: Note[] = []: This array stores our notes.
  • constructor(): This loads notes from local storage when the service is created. This ensures the notes persist across page reloads.
  • getAllNotes(): Returns all notes.
  • getNote(id: string): Returns a note by its ID.
  • addNote(title: string, content: string): Creates a new note, assigns a unique ID, and adds it to the notes array. It also saves the updated notes to local storage.
  • updateNote(id: string, title: string, content: string): Updates an existing note by its ID. It also saves the updated notes to local storage.
  • deleteNote(id: string): Deletes a note by its ID. It also saves the updated notes to local storage.
  • generateId(): Generates a simple unique ID for each note.
  • saveNotes(): Saves the current notes array to local storage.

3. Building the User Interface (UI)

Now we’ll create the basic HTML structure and some JavaScript to interact with our NoteService. Create a file named public/index.html and add the following code:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Note-Taking App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Note-Taking App</h1>

    <div id="note-form">
      <input type="text" id="note-title" placeholder="Title">
      <textarea id="note-content" placeholder="Content"></textarea>
      <button id="add-note">Add Note</button>
    </div>

    <div id="notes-container">
      <!-- Notes will be displayed here -->
    </div>
  </div>

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

Create a file named public/style.css and add some basic styling (you can customize this to your liking):


body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

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

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

#note-form {
  margin-bottom: 20px;
}

#note-title, #note-content {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Important for width to include padding and border */
}

#note-content {
  height: 150px;
}

#add-note {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

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

.note {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.note h3 {
  margin-top: 0;
}

.note p {
  margin-bottom: 5px;
}

.note-actions {
  text-align: right;
}

.note-actions button {
  background-color: #f44336;
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 5px;
}

.note-actions button:hover {
  background-color: #da190b;
}

Finally, create a file named public/script.ts (or public/script.js after compilation) and add the following code:


// public/script.ts
import NoteService from '../src/NoteService';

const noteService = new NoteService();

const noteTitleInput = document.getElementById('note-title') as HTMLInputElement;
const noteContentTextarea = document.getElementById('note-content') as HTMLTextAreaElement;
const addNoteButton = document.getElementById('add-note') as HTMLButtonElement;
const notesContainer = document.getElementById('notes-container') as HTMLDivElement;

function renderNotes() {
  notesContainer.innerHTML = '';
  const notes = noteService.getAllNotes();
  notes.forEach(note => {
    const noteElement = document.createElement('div');
    noteElement.classList.add('note');
    noteElement.innerHTML = `
      <h3>${note.title}</h3>
      <p>${note.content}</p>
      <p>Created: ${note.createdAt.toLocaleString()}</p>
      <p>Last Updated: ${note.updatedAt.toLocaleString()}</p>
      <div class="note-actions">
        <button data-id="${note.id}" class="delete-note">Delete</button>
      </div>
    `;
    notesContainer.appendChild(noteElement);

    const deleteButton = noteElement.querySelector('.delete-note') as HTMLButtonElement;
    deleteButton.addEventListener('click', () => {
      const noteId = deleteButton.dataset.id as string;
      if (noteId) {
        noteService.deleteNote(noteId);
        renderNotes();
      }
    });
  });
}

function addNote() {
  const title = noteTitleInput.value;
  const content = noteContentTextarea.value;
  if (title.trim() && content.trim()) {
    noteService.addNote(title, content);
    noteTitleInput.value = '';
    noteContentTextarea.value = '';
    renderNotes();
  }
}

addNoteButton.addEventListener('click', addNote);

// Initial render
renderNotes();

This code does the following:

  • Imports NoteService: This allows us to use the note service we created.
  • Gets references to HTML elements: It gets references to the input fields, textarea, button, and the container where notes will be displayed.
  • renderNotes(): This function clears the notes container and then iterates through the notes, creating HTML elements for each note and appending them to the container. It also adds event listeners to the delete buttons.
  • addNote(): This function retrieves the title and content from the input fields, calls the addNote method of the NoteService to add the note, clears the input fields, and then re-renders the notes.
  • Event Listener: An event listener is attached to the “Add Note” button to call the addNote function when the button is clicked.
  • Initial Render: The renderNotes() function is called initially to display any existing notes when the page loads.

4. Compiling and Running the Application

To compile the TypeScript code, run the following command in your terminal:


npx tsc

This command will compile your .ts files into .js files in the same directory. If you want the compiled JavaScript files to be placed in a separate directory (e.g., dist), you should configure your tsconfig.json file. Open tsconfig.json and find the "outDir" property. Uncomment it and set its value to your desired output directory (e.g., "outDir": "./dist"). Then, re-run the npx tsc command.

After compiling, open public/index.html in your web browser. You should now be able to add, and delete notes. The notes will persist across page reloads because they are saved in the browser’s local storage.

Adding More Features: Enhancements and Improvements

Now that we have a basic note-taking app, let’s explore some enhancements to make it more useful and user-friendly. We’ll add features like editing notes, search functionality, and more.

1. Editing Notes

To enable editing, we’ll add an “Edit” button to each note and implement the functionality to modify the note’s title and content. Here’s how you can modify the public/script.ts file:

First, modify the renderNotes() function to include an edit button:


function renderNotes() {
  notesContainer.innerHTML = '';
  const notes = noteService.getAllNotes();
  notes.forEach(note => {
    const noteElement = document.createElement('div');
    noteElement.classList.add('note');
    noteElement.innerHTML = `
      <h3>${note.title}</h3>
      <p>${note.content}</p>
      <p>Created: ${note.createdAt.toLocaleString()}</p>
      <p>Last Updated: ${note.updatedAt.toLocaleString()}</p>
      <div class="note-actions">
        <button data-id="${note.id}" class="delete-note">Delete</button>
        <button data-id="${note.id}" class="edit-note">Edit</button>
      </div>
    `;
    notesContainer.appendChild(noteElement);

    const deleteButton = noteElement.querySelector('.delete-note') as HTMLButtonElement;
    deleteButton.addEventListener('click', () => {
      const noteId = deleteButton.dataset.id as string;
      if (noteId) {
        noteService.deleteNote(noteId);
        renderNotes();
      }
    });

    const editButton = noteElement.querySelector('.edit-note') as HTMLButtonElement;
    editButton.addEventListener('click', () => {
      const noteId = editButton.dataset.id as string;
      if (noteId) {
        const noteToEdit = noteService.getNote(noteId);
        if (noteToEdit) {
          // Populate the input fields with the note's data
          noteTitleInput.value = noteToEdit.title;
          noteContentTextarea.value = noteToEdit.content;
          // Remove the existing add-note event listener
          addNoteButton.removeEventListener('click', addNote);
          // Change the button text and add a new event listener for updating
          addNoteButton.textContent = 'Update Note';
          addNoteButton.addEventListener('click', () => updateNote(noteId), { once: true });
        }
      }
    });
  });
}

Next, we need to implement the updateNote function in public/script.ts:


function updateNote(id: string) {
  const title = noteTitleInput.value;
  const content = noteContentTextarea.value;
  if (title.trim() && content.trim()) {
    noteService.updateNote(id, title, content);
    noteTitleInput.value = '';
    noteContentTextarea.value = '';
    addNoteButton.textContent = 'Add Note'; // Reset button text
    addNoteButton.addEventListener('click', addNote); // Re-attach the add event listener
    renderNotes();
  }
}

In this modification, we add an edit button to the note element, then we retrieve the note data from local storage into the input fields, and change the ‘Add Note’ button to an ‘Update Note’ button. The logic is as follows:

  • When the edit button is clicked, the title and content are populated into the input fields.
  • The event listener on the add button is removed and replaced with a new event listener for updating the note.
  • The updateNote function is called to update the note and clear the input fields.
  • The button is reset to ‘Add Note’ and the addNote event listener is re-attached.

Don’t forget to add styling for the new edit button in style.css. For example:


.note-actions button.edit-note {
  background-color: #008CBA;
}

.note-actions button.edit-note:hover {
  background-color: #0077A3;
}

2. Implementing a Search Feature

A search feature allows users to quickly find notes based on keywords. We’ll add a search input field and filter the notes displayed.

First, add a search input field in public/index.html, within the <div class="container">:


<input type="text" id="search-notes" placeholder="Search notes...">

Next, modify the renderNotes() function in public/script.ts to include a search functionality and filter the notes based on the search input:


const searchNotesInput = document.getElementById('search-notes') as HTMLInputElement;

function renderNotes() {
  notesContainer.innerHTML = '';
  let notes = noteService.getAllNotes();
  const searchTerm = searchNotesInput.value.toLowerCase();

  if (searchTerm) {
    notes = notes.filter(note =>
      note.title.toLowerCase().includes(searchTerm) ||
      note.content.toLowerCase().includes(searchTerm)
    );
  }

  notes.forEach(note => {
    // ... (rest of the note creation code, as before) ...
  });
}

searchNotesInput.addEventListener('input', renderNotes);

Here’s what the modifications do:

  • Gets a reference to the search input field: We get a reference to the newly added search input field.
  • Retrieves the search term: The function retrieves the search term from the search input, converting it to lowercase for case-insensitive searching.
  • Filters notes based on the search term: If a search term is entered, the notes are filtered to include only those where the title or content includes the search term.
  • Adds an event listener: An event listener is added to the search input field, so that the renderNotes() function is called whenever the search input changes, dynamically filtering the notes.

3. Adding Date and Time Formatting

The current date and time formatting is basic. Let’s make it more user-friendly.

You can use the toLocaleString() method with specific options. For example, in public/script.ts, modify the date display in the renderNotes function:


<p>Created: ${note.createdAt.toLocaleString('en-US', {  dateStyle: 'medium', timeStyle: 'short' })}</p>
<p>Last Updated: ${note.updatedAt.toLocaleString('en-US', { dateStyle: 'medium', timeStyle: 'short' })}</p>

This will display the date and time in a more readable format.

4. Implementing Note Categories/Tags

To organize notes better, you can add categories or tags. This will involve modifying the Note interface, the NoteService, and the UI.

First, modify the src/Note.ts interface to include a category property:


interface Note {
  id: string;
  title: string;
  content: string;
  category?: string; // Optional category
  createdAt: Date;
  updatedAt: Date;
}

Modify the public/index.html to add a select box for categories:


<div id="note-form">
  <input type="text" id="note-title" placeholder="Title">
  <textarea id="note-content" placeholder="Content"></textarea>
  <label for="note-category">Category:</label>
  <select id="note-category">
    <option value="">None</option>
    <option value="work">Work</option>
    <option value="personal">Personal</option>
    <option value="todo">To-Do</option>
  </select>
  <button id="add-note">Add Note</button>
</div>

Update the public/script.ts file to include the category in the addNote function and display it in the rendered notes. Also, modify the NoteService to save the category.


const noteCategorySelect = document.getElementById('note-category') as HTMLSelectElement;

function addNote() {
  const title = noteTitleInput.value;
  const content = noteContentTextarea.value;
  const category = noteCategorySelect.value;
  if (title.trim() && content.trim()) {
    noteService.addNote(title, content, category);
    noteTitleInput.value = '';
    noteContentTextarea.value = '';
    noteCategorySelect.value = '';
    renderNotes();
  }
}

Modify the src/NoteService.ts file to include the category in the addNote function:


addNote(title: string, content: string, category: string = ''): Note {
  const newNote: Note = {
    id: this.generateId(),
    title,
    content,
    category,
    createdAt: new Date(),
    updatedAt: new Date(),
  };
  this.notes.push(newNote);
  this.saveNotes();
  return newNote;
}

Modify the public/script.ts file to display the category in the rendered notes:


<p>Category: ${note.category || 'None'}</p>

Finally, compile the project again and reload the page.

5. Advanced Features

Here are some more advanced features you can add:

  • Rich Text Editor: Integrate a rich text editor (e.g., Quill, TinyMCE) for more advanced formatting options.
  • Cloud Storage: Integrate with cloud storage services (e.g., Google Drive, Dropbox) to back up and sync notes.
  • Offline Support: Use service workers and local storage to make the app work offline.
  • User Authentication: Implement user authentication for secure note storage and access.
  • Dark Mode: Add a dark mode toggle for better readability in low-light conditions.

Common Mistakes and How to Avoid Them

While building this application, you might encounter some common pitfalls. Here’s a breakdown and how to avoid them:

  • Incorrect TypeScript Configuration: Ensure your tsconfig.json is set up correctly. Common issues include incorrect module resolution, target ES version, or module system. Double-check your settings, especially if you’re experiencing compilation errors.
  • Type Errors: TypeScript’s static typing can be a great advantage, but it can also lead to errors. Always check the types of your variables and function parameters. Use type annotations to specify the expected types. Use the any type with caution.
  • DOM Manipulation Errors: When working with the DOM, make sure you’re selecting the correct elements and that they exist before attempting to manipulate them. Use type assertions (e.g., as HTMLInputElement) to help TypeScript understand the element types.
  • Local Storage Issues: Local storage is limited. If you are saving a large amount of data, you may encounter issues. Use JSON.stringify() and JSON.parse() correctly when storing and retrieving data. Be mindful of potential errors when parsing data.
  • Event Listener Management: Ensure you’re adding and removing event listeners correctly. Avoid adding multiple event listeners to the same element, which can lead to unexpected behavior. Use the { once: true } option when you want an event listener to run only once.

Summary / Key Takeaways

In this tutorial, we’ve walked through the process of building a simple, yet functional, note-taking application using TypeScript. We’ve covered the basics of setting up a TypeScript project, defining interfaces, creating services, handling user interface interactions, and implementing core features like adding, editing, and deleting notes. We also explored ways to enhance the app with features such as searching, date formatting, and note categories. The use of TypeScript provides benefits like improved code readability, maintainability, and early error detection.

Here are the key takeaways:

  • TypeScript Advantages: TypeScript enhances JavaScript development with static typing, improving code quality and developer experience.
  • Project Structure: Organizing your project with clear separation of concerns (e.g., services, UI components) is crucial for maintainability.
  • Local Storage: Local storage is a simple way to persist data in the browser, but it has limitations.
  • UI Interaction: Understanding how to interact with the DOM and handle user events is essential for building interactive web applications.
  • Incremental Improvement: Start with a basic version and gradually add features to avoid overwhelming yourself.

FAQ

Here are some frequently asked questions about this tutorial and note-taking applications:

  1. Q: Can I use a different framework or library?

    A: Yes, this tutorial uses vanilla JavaScript for simplicity, but you can adapt it to use a framework like React, Angular, or Vue.js. The core TypeScript concepts will remain the same.

  2. Q: How can I deploy this app?

    A: You can deploy your app to platforms like Netlify, Vercel, or GitHub Pages. You’ll typically need to build your TypeScript code (npx tsc) and then deploy the contents of your public folder (or your configured output directory).

  3. Q: How can I add more features?

    A: Consider adding features like rich text editing, cloud storage integration, user authentication, and more. The possibilities are endless!

  4. Q: Where can I learn more about TypeScript?

    A: The official TypeScript documentation is an excellent resource. You can also find many online courses and tutorials on platforms like Udemy, Coursera, and freeCodeCamp.

  5. Q: How can I improve the performance of my note-taking app?

    A: For improved performance, optimize DOM manipulation, use efficient algorithms, and consider techniques like code splitting and lazy loading.

Building a note-taking app in TypeScript is a great way to learn and apply modern web development techniques. This tutorial provides a solid foundation, and you can now expand upon it to create a powerful and personalized tool. Remember that the journey of building software is iterative, so don’t be afraid to experiment, learn from your mistakes, and keep improving your application. As you add new features and refine your code, you’ll gain valuable experience and deepen your understanding of TypeScript and web development principles. The skills you acquire in this project will be transferable to a wide range of other web development projects. Embrace the learning process, and enjoy the satisfaction of creating something useful and unique.

More posts