TypeScript Tutorial: Building a Simple Interactive Note-Taking App

Written by

learnmodernjavascript

in

Ever felt overwhelmed by the sheer volume of information you need to keep track of? From grocery lists to brilliant ideas, meeting notes to travel plans, the digital age demands efficient note-taking. While countless apps exist, understanding the fundamentals of building one can be incredibly empowering. This tutorial will guide you through creating a simple, interactive note-taking application using TypeScript. You’ll learn essential TypeScript concepts while constructing a practical tool you can adapt and expand.

Why Build a Note-Taking App with TypeScript?

TypeScript brings several advantages to the table, especially for larger projects. Here’s why it’s an excellent choice for this project:

  • Type Safety: TypeScript adds static typing to JavaScript. This means the compiler checks your code for type errors during development, catching potential bugs before runtime. This leads to more robust and maintainable code.
  • Improved Code Readability: Types make your code easier to understand. They act as self-documentation, clarifying the expected data types for variables, function parameters, and return values.
  • Enhanced Developer Experience: Modern IDEs provide excellent support for TypeScript, including autocompletion, refactoring, and error highlighting. This significantly boosts productivity.
  • Scalability: As your application grows, TypeScript’s type system helps you manage complexity and reduce the risk of introducing errors.

This tutorial is designed for developers with some JavaScript experience who are new to TypeScript. We’ll start with the basics and gradually build up the application, covering essential concepts along the way.

Setting Up Your Development Environment

Before we dive into coding, you’ll need to set up your development environment. Here’s what you’ll need:

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

Let’s install the TypeScript compiler globally:

npm install -g typescript

Verify the installation by checking the TypeScript version:

tsc -v

This should display the installed TypeScript version.

Project Setup and Configuration

Now, let’s create a new project directory and initialize it with npm:

mkdir note-taking-app
cd note-taking-app
npm init -y

This creates a `package.json` file, which will manage our project dependencies. Next, we need to create a `tsconfig.json` file. This file configures the TypeScript compiler. Run the following command:

tsc --init

This will generate a `tsconfig.json` file with a lot of commented-out options. Let’s modify it to suit our needs. Open `tsconfig.json` in your code editor and make the following changes:

{
  "compilerOptions": {
    "target": "es5", // Or "es6", "esnext" depending on your needs
    "module": "commonjs", // Or "esnext", "amd", etc.
    "outDir": "./dist", // Output directory for compiled JavaScript
    "rootDir": "./src", // Source directory for TypeScript files
    "strict": true, // Enable strict type checking
    "esModuleInterop": true, // Enables interoperability between CommonJS and ES Modules
    "skipLibCheck": true, // Skip type checking of declaration files
    "forceConsistentCasingInFileNames": true // Enforce consistent casing in filenames
  },
  "include": ["src/**/*"]
}

Here’s a breakdown of the key options:

  • target: Specifies the JavaScript version to compile to. es5 is widely supported, but you can choose a more modern version like es6 or esnext.
  • module: Specifies the module system to use (e.g., commonjs, esnext).
  • outDir: Defines the output directory for the compiled JavaScript files.
  • rootDir: Specifies the directory where your TypeScript source files are located.
  • strict: Enables strict type checking, which is highly recommended for catching errors early.
  • esModuleInterop: Helps with importing modules.
  • skipLibCheck: Improves compilation speed by skipping type checking of declaration files (e.g., those from the Node.js standard library).
  • forceConsistentCasingInFileNames: Enforces consistent casing in filenames, which can prevent subtle bugs.
  • include: Specifies the files or patterns to include in the compilation.

Creating the Project Structure

Let’s create the basic project structure. Create a new directory named `src` inside your project directory. This is where we’ll put our TypeScript files. Inside the `src` directory, create the following files:

  • src/index.ts: The main entry point of our application.
  • src/Note.ts: Defines the structure of a note.
  • src/NoteManager.ts: Manages the notes (adding, deleting, etc.).
  • src/ui.ts: Handles the user interface interactions.

Your project structure should look like this:

note-taking-app/
├── package.json
├── tsconfig.json
└── src/
    ├── index.ts
    ├── Note.ts
    ├── NoteManager.ts
    └── ui.ts

Defining the Note Model (Note.ts)

Let’s start by defining the structure of a note. Open `src/Note.ts` and add the following code:

// src/Note.ts

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

This code defines an interface named `Note`. An interface is a way to define the shape of an object. Our `Note` interface has the following properties:

  • id: A number representing the unique identifier of the note.
  • title: A string representing the title of the note.
  • content: A string representing the content of the note.
  • createdAt: A Date object representing the creation date of the note.

Implementing the Note Manager (NoteManager.ts)

Next, we’ll create the `NoteManager` class, which will be responsible for managing our notes. Open `src/NoteManager.ts` and add the following code:

// src/NoteManager.ts
import { Note } from './Note';

export class NoteManager {
  private notes: Note[] = [];
  private nextId: number = 1;

  addNote(title: string, content: string): Note {
    const newNote: Note = {
      id: this.nextId,
      title,
      content,
      createdAt: new Date(),
    };
    this.notes.push(newNote);
    this.nextId++;
    return newNote;
  }

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

  deleteNote(id: number): void {
    this.notes = this.notes.filter((note) => note.id !== id);
  }

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

Let’s break down this code:

  • We import the `Note` interface from `Note.ts`.
  • The `NoteManager` class is defined.
  • private notes: Note[] = [];: This is a private array that will store our notes. The `private` keyword means that this property can only be accessed from within the `NoteManager` class.
  • private nextId: number = 1;: This private variable keeps track of the next available ID for a new note.
  • addNote(title: string, content: string): Note: This method adds a new note to the `notes` array. It takes the title and content as arguments, creates a new `Note` object, assigns an ID, sets the creation date, and pushes the new note to the `notes` array. It also increments the `nextId`. Finally, it returns the newly created note.
  • getNotes(): Note[]: This method returns a copy of the `notes` array.
  • deleteNote(id: number): void: This method removes a note with the specified ID from the `notes` array. It uses the `filter` method to create a new array containing only the notes whose IDs do not match the provided ID.
  • getNoteById(id: number): Note | undefined: This method searches for a note with the specified ID and returns it. If no note with the given ID is found, it returns `undefined`.

Building the User Interface (ui.ts)

Now, let’s create the user interface to interact with our notes. Open `src/ui.ts` and add the following code:


// src/ui.ts
import { Note } from './Note';
import { NoteManager } from './NoteManager';

export class UI {
  private noteManager: NoteManager;
  private notesContainer: HTMLElement;
  private titleInput: HTMLInputElement;
  private contentInput: HTMLTextAreaElement;
  private addNoteButton: HTMLButtonElement;

  constructor(noteManager: NoteManager) {
    this.noteManager = noteManager;

    // Get references to HTML elements
    this.notesContainer = document.getElementById('notes-container') as HTMLElement;
    this.titleInput = document.getElementById('title') as HTMLInputElement;
    this.contentInput = document.getElementById('content') as HTMLTextAreaElement;
    this.addNoteButton = document.getElementById('add-note') as HTMLButtonElement;

    // Add event listeners
    this.addNoteButton.addEventListener('click', this.handleAddNote.bind(this));
    this.renderNotes(); // Initial render
  }

  private handleAddNote() {
    const title = this.titleInput.value;
    const content = this.contentInput.value;

    if (title.trim() === '' || content.trim() === '') {
      alert('Please enter a title and content.');
      return;
    }

    const newNote = this.noteManager.addNote(title, content);
    this.renderNote(newNote);
    this.clearInputs();
  }

  private renderNotes() {
    this.notesContainer.innerHTML = ''; // Clear existing notes
    this.noteManager.getNotes().forEach((note) => this.renderNote(note));
  }

  private renderNote(note: 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>
      <button class="delete-button" data-id="${note.id}">Delete</button>
    `;

    const deleteButton = noteElement.querySelector('.delete-button') as HTMLButtonElement;
    deleteButton.addEventListener('click', () => this.handleDeleteNote(note.id));

    this.notesContainer.appendChild(noteElement);
  }

  private handleDeleteNote(id: number) {
    this.noteManager.deleteNote(id);
    this.renderNotes(); // Re-render to reflect changes
  }

  private clearInputs() {
    this.titleInput.value = '';
    this.contentInput.value = '';
  }
}

Let’s break down this code:

  • We import the `Note` interface and the `NoteManager` class.
  • The `UI` class is defined. It’s responsible for handling user interactions and updating the UI.
  • Class Properties:
    • noteManager: NoteManager;: An instance of the `NoteManager` class, used to manage notes.
    • notesContainer: HTMLElement;: The HTML element where notes will be displayed.
    • titleInput: HTMLInputElement;: The input field for the note title.
    • contentInput: HTMLTextAreaElement;: The text area for the note content.
    • addNoteButton: HTMLButtonElement;: The button to add a new note.
  • Constructor:
    • The constructor takes a `NoteManager` instance as an argument.
    • It retrieves references to the HTML elements with specific IDs (e.g., ‘notes-container’, ‘title’, ‘content’, ‘add-note’). The `as HTMLElement`, `as HTMLInputElement`, `as HTMLTextAreaElement`, and `as HTMLButtonElement` are type assertions, telling TypeScript the expected type of the HTML elements. This helps avoid potential type errors.
    • It attaches event listeners to the ‘add-note’ button and calls the `handleAddNote` method when the button is clicked. The `.bind(this)` ensures that `this` inside `handleAddNote` refers to the `UI` class instance.
    • It calls `renderNotes()` to initially display any existing notes.
  • handleAddNote()
    • Gets the title and content from the input fields.
    • Performs basic validation to ensure the title and content are not empty.
    • Calls the `addNote` method of the `NoteManager` to add the new note.
    • Calls `renderNote` to add the new note to the UI.
    • Calls `clearInputs` to clear the input fields.
  • renderNotes()
    • Clears the existing notes in the `notesContainer`.
    • Iterates over the notes retrieved from the `NoteManager` and calls `renderNote` for each note.
  • renderNote(note: Note)
    • Creates a new `div` element to represent a note.
    • Sets the HTML content of the note element, including the title, content, creation date, and a delete button. Template literals (using backticks) are used to create the HTML string, making it easier to read. The data-id attribute on the delete button stores the note’s ID.
    • Adds an event listener to the delete button, calling `handleDeleteNote` when clicked.
    • Appends the note element to the `notesContainer`.
  • handleDeleteNote(id: number)
    • Calls the `deleteNote` method of the `NoteManager` to remove the note with the specified ID.
    • Calls `renderNotes` to update the UI.
  • clearInputs()
    • Clears the title and content input fields.

Connecting Everything: The Main Entry Point (index.ts)

Now, let’s bring everything together in our main entry point, `src/index.ts`. Open `src/index.ts` and add the following code:


// src/index.ts
import { NoteManager } from './NoteManager';
import { UI } from './ui';

const noteManager = new NoteManager();
const ui = new UI(noteManager);

This code does the following:

  • Imports the `NoteManager` and `UI` classes.
  • Creates a new instance of `NoteManager`.
  • Creates a new instance of `UI`, passing the `noteManager` instance to it.

This sets up the application. The `UI` class will handle the interaction with the HTML elements, and the `NoteManager` class will manage the notes.

Creating the HTML Structure (index.html)

We need an HTML file to provide the structure for our application. Create a file named `index.html` in the root directory of your project (alongside `package.json`, `tsconfig.json`, and the `src` folder). Add the following HTML:

<!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>
  <style>
    body {
      font-family: sans-serif;
    }
    .container {
      width: 80%;
      margin: 20px auto;
    }
    .form-group {
      margin-bottom: 15px;
    }
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    input[type="text"], textarea {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-bottom: 10px;
    }
    button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #3e8e41;
    }
    .note {
      border: 1px solid #ddd;
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 4px;
    }
    .delete-button {
      background-color: #f44336;
      color: white;
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Note-Taking App</h2>

    <div class="form-group">
      <label for="title">Title:</label>
      <input type="text" id="title">
    </div>

    <div class="form-group">
      <label for="content">Content:</label>
      <textarea id="content" rows="4"></textarea>
    </div>

    <button id="add-note">Add Note</button>

    <div id="notes-container">
      <!-- Notes will be displayed here -->
    </div>
  </div>
  <script src="./dist/index.js"></script>
</body>
</html>

This HTML provides the basic structure for our application:

  • A title.
  • Input fields for the title and content.
  • An “Add Note” button.
  • A container where the notes will be displayed.
  • The HTML includes some basic CSS styling to make the app more visually appealing.
  • It includes a script tag that loads the compiled JavaScript file (`./dist/index.js`). This is where our TypeScript code will run after compilation.

Compiling and Running the Application

Now, it’s time to compile your TypeScript code into JavaScript. Open your terminal and run the following command from the root of your project:

tsc

This command will use the `tsconfig.json` file to compile all TypeScript files in the `src` directory and output the compiled JavaScript files to the `dist` directory. If everything is configured correctly, you shouldn’t see any errors.

To run the application, open the `index.html` file in your web browser. You should see the input fields and the “Add Note” button. When you enter a title and content and click the button, the note should appear below. You can then add more notes and delete them.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Typo Errors: TypeScript is case-sensitive, and even small typos can lead to errors. Double-check your code for any typos, especially in variable names, function names, and property names.
  • Incorrect File Paths: Make sure your file paths in the `import` statements are correct. Incorrect paths will prevent your code from finding the necessary modules.
  • HTML Element References: Ensure that you have the correct `id` attributes in your HTML and that you’re using the correct element types when getting references to HTML elements in your TypeScript code (e.g., `as HTMLInputElement`).
  • Compiler Errors: If you encounter compiler errors, carefully read the error messages. They often provide valuable clues about what’s wrong. The error messages will point to the line and file where the error occurred.
  • Incorrect Event Listener Binding: When using event listeners, ensure that you bind the correct `this` context to your event handler functions using `.bind(this)`. Otherwise, `this` might not refer to the class instance.
  • Missing or Incorrect Imports: Double-check your import statements to ensure that you’re importing the necessary modules and that the paths are correct.
  • Browser Console Errors: If the app isn’t working as expected, open your browser’s developer console (usually by pressing F12) and check for any JavaScript errors. These errors can provide clues about what’s going wrong.
  • Incorrect `tsconfig.json` Configuration: Ensure your `tsconfig.json` is correctly configured, especially the `rootDir`, `outDir`, and `module` options. Incorrect configuration can lead to compilation errors or unexpected behavior.

Enhancements and Next Steps

This is a basic note-taking app, but you can extend it with many features. Here are some ideas:

  • Local Storage: Save the notes to local storage so they persist even when the user closes the browser.
  • Editing Notes: Add functionality to edit existing notes.
  • Search Functionality: Allow users to search for notes by title or content.
  • Categories/Tags: Implement categories or tags to organize notes.
  • Rich Text Editor: Integrate a rich text editor to format the note content (e.g., using a library like Quill or TinyMCE).
  • Dark Mode: Add a dark mode toggle for a better user experience.
  • User Authentication: Implement user authentication to allow multiple users to use the app.
  • Deployment: Deploy your app to a platform like Netlify or Vercel.

Key Takeaways

You’ve successfully built a simple, interactive note-taking app with TypeScript! You’ve learned how to define interfaces, create classes, manage data, and interact with the DOM. This project provides a solid foundation for understanding TypeScript and building more complex web applications. Remember to always use TypeScript’s type system to your advantage to catch errors early. With the knowledge you’ve gained, you can now explore the enhancements and expand the functionality of your note-taking app, or create entirely new applications. Building projects is the best way to learn and reinforce your understanding of TypeScript. The possibilities are vast, and the journey of learning and creating is always rewarding.

More posts