TypeScript Tutorial: Creating a Simple Web-Based Address Book

Written by

learnmodernjavascript

in

In today’s digital world, managing contacts efficiently is crucial. Whether it’s for personal use or professional networking, having a readily accessible and organized address book can save time and improve productivity. This tutorial will guide you through building a simple, yet functional, web-based address book using TypeScript, a superset of JavaScript that adds static typing. We’ll cover the fundamental concepts, from setting up your project to implementing features like adding, editing, and deleting contacts. By the end, you’ll have a practical application and a solid understanding of how TypeScript can enhance your web development projects.

Why TypeScript?

TypeScript offers several advantages over plain JavaScript, especially for larger projects:

  • Type Safety: TypeScript’s static typing helps catch errors during development, reducing runtime bugs.
  • Improved Code Readability: Types make your code easier to understand and maintain.
  • Enhanced Developer Experience: Features like autocompletion and refactoring tools make coding faster and more efficient.
  • Better Code Organization: TypeScript supports object-oriented programming (OOP) principles, promoting a more structured codebase.

For this project, TypeScript will allow us to define the structure of our contact data, ensuring consistency and preventing common errors. Let’s dive in!

Setting Up Your Project

Before we start coding, we need to set up our project. Follow these steps:

  1. Create a Project Directory: Create a new directory for your project (e.g., `address-book`).
  2. Initialize npm: Open your terminal, navigate to your project directory, and run `npm init -y`. This creates a `package.json` file.
  3. Install TypeScript: Run `npm install typescript –save-dev`. This installs TypeScript as a development dependency.
  4. Create a `tsconfig.json` file: Run `npx tsc –init`. This generates a default configuration file for TypeScript. You can customize this file to fit your project’s needs. We’ll leave the defaults for this tutorial.

Your project directory structure should now look something like this:

address-book/
├── node_modules/
├── package.json
├── tsconfig.json
└──

Creating the Contact Interface

In TypeScript, an interface defines the structure of an object. We’ll create an interface to represent our contact data. Create a new file named `contact.ts` in your project directory (or create a `src` directory and put it there). Add the following code:

// contact.ts
interface Contact {
  id: number;
  firstName: string;
  lastName: string;
  email: string;
  phone?: string; // ? means optional
}

export default Contact;

This `Contact` interface defines the properties each contact will have: `id`, `firstName`, `lastName`, and `email`. The `phone` property is optional, indicated by the `?`. This allows us to have contacts without a phone number.

Building the Address Book Class

Now, let’s create the `AddressBook` class. This class will handle the logic for managing our contacts. Create a new file named `address-book.ts` and add the following code:


// address-book.ts
import Contact from './contact';

class AddressBook {
  private contacts: Contact[] = []; // Private array to store contacts

  addContact(contact: Contact): void {
    this.contacts.push(contact);
    console.log(`Contact ${contact.firstName} ${contact.lastName} added.`);
  }

  getContact(id: number): Contact | undefined {
    return this.contacts.find(contact => contact.id === id);
  }

  updateContact(id: number, updatedContact: Partial<Contact>): void {
    const contactIndex = this.contacts.findIndex(contact => contact.id === id);
    if (contactIndex === -1) {
      console.log('Contact not found.');
      return;
    }
    this.contacts[contactIndex] = { ...this.contacts[contactIndex], ...updatedContact };
    console.log(`Contact with id ${id} updated.`);
  }

  deleteContact(id: number): void {
    this.contacts = this.contacts.filter(contact => contact.id !== id);
    console.log(`Contact with id ${id} deleted.`);
  }

  listContacts(): Contact[] {
    return this.contacts;
  }
}

export default AddressBook;

Let’s break down this code:

  • `import Contact from ‘./contact’;`: Imports the `Contact` interface.
  • `private contacts: Contact[] = [];`: Declares a private array to store `Contact` objects. The `private` keyword means this array can only be accessed from within the `AddressBook` class.
  • `addContact(contact: Contact): void`: Adds a new contact to the address book.
  • `getContact(id: number): Contact | undefined`: Retrieves a contact by its ID. Returns `undefined` if the contact isn’t found.
  • `updateContact(id: number, updatedContact: Partial<Contact>): void`: Updates an existing contact. Uses `Partial<Contact>` to allow updating only some properties of a contact.
  • `deleteContact(id: number): void`: Deletes a contact by its ID.
  • `listContacts(): Contact[]`: Returns an array of all contacts.

Implementing the Address Book

Now, let’s use the `AddressBook` class to create and manage some contacts. Create a file named `index.ts` in your project directory and add the following code:


// index.ts
import AddressBook from './address-book';
import Contact from './contact';

const addressBook = new AddressBook();

// Add some contacts
const contact1: Contact = {
  id: 1,
  firstName: 'John',
  lastName: 'Doe',
  email: 'john.doe@example.com',
  phone: '123-456-7890',
};

const contact2: Contact = {
  id: 2,
  firstName: 'Jane',
  lastName: 'Smith',
  email: 'jane.smith@example.com',
};

addressBook.addContact(contact1);
addressBook.addContact(contact2);

// List contacts
console.log('All Contacts:', addressBook.listContacts());

// Get a contact
const foundContact = addressBook.getContact(1);
console.log('Found Contact:', foundContact);

// Update a contact
addressBook.updateContact(1, { phone: '987-654-3210' });
console.log('Updated Contacts:', addressBook.listContacts());

// Delete a contact
addressBook.deleteContact(2);
console.log('Contacts after deletion:', addressBook.listContacts());

In this file:

  • We import `AddressBook` and `Contact`.
  • We create an instance of `AddressBook`.
  • We create two `Contact` objects.
  • We add, list, get, update, and delete contacts using the methods of the `AddressBook` class.

Compiling and Running Your Code

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

tsc

This will create JavaScript files (`.js`) in your project directory (or in the directory specified in your `tsconfig.json`). To run your code, you’ll need to use Node.js:

node index.js

You should see the output of your address book operations in the console. If you encounter any errors, carefully review the error messages and your code. TypeScript’s type checking will help you identify and fix issues early on.

Adding a User Interface (UI) – Basic HTML and JavaScript

While the above code works, it’s not very user-friendly. Let’s add a basic HTML user interface to interact with our address book. Create an `index.html` file in your project directory and 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>Address Book</title>
</head>
<body>
    <h2>Address Book</h2>

    <div id="contact-form">
        <label for="firstName">First Name:</label>
        <input type="text" id="firstName" name="firstName"><br>

        <label for="lastName">Last Name:</label>
        <input type="text" id="lastName" name="lastName"><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br>

        <label for="phone">Phone:</label>
        <input type="tel" id="phone" name="phone"><br>

        <button id="add-contact-button">Add Contact</button>
    </div>

    <div id="contact-list">
        <h3>Contacts:</h3>
        <ul id="contacts">
            <!-- Contacts will be displayed here -->
        </ul>
    </div>

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

This HTML creates a basic form to add contacts and a list to display them. Now, let’s add some JavaScript (in `index.js`) to interact with our TypeScript code. Replace the existing `index.ts` content with the following:


// index.ts (updated for UI)
import AddressBook from './address-book';
import Contact from './contact';

const addressBook = new AddressBook();

const firstNameInput = document.getElementById('firstName') as HTMLInputElement;
const lastNameInput = document.getElementById('lastName') as HTMLInputElement;
const emailInput = document.getElementById('email') as HTMLInputElement;
const phoneInput = document.getElementById('phone') as HTMLInputElement;
const addContactButton = document.getElementById('add-contact-button') as HTMLButtonElement;
const contactList = document.getElementById('contacts') as HTMLUListElement;

function renderContacts() {
    contactList.innerHTML = ''; // Clear existing list
    addressBook.listContacts().forEach(contact => {
        const listItem = document.createElement('li');
        listItem.textContent = `${contact.firstName} ${contact.lastName} - ${contact.email} - ${contact.phone || ''}`;
        contactList.appendChild(listItem);
    });
}

addContactButton?.addEventListener('click', () => {
    const firstName = firstNameInput.value;
    const lastName = lastNameInput.value;
    const email = emailInput.value;
    const phone = phoneInput.value;

    if (firstName && lastName && email) {
        const newContact: Contact = {
            id: Date.now(), // Simple ID generation
            firstName,
            lastName,
            email,
            phone,
        };
        addressBook.addContact(newContact);
        renderContacts();
        // Clear the form after adding
        firstNameInput.value = '';
        lastNameInput.value = '';
        emailInput.value = '';
        phoneInput.value = '';
    } else {
        alert('Please fill in all required fields.');
    }
});

// Initial render
renderContacts();

Let’s break down the new JavaScript code:

  • Get HTML elements: We get references to the input fields, the button, and the contact list using `document.getElementById()`. The `as HTMLInputElement` and `as HTMLButtonElement` are type assertions, telling TypeScript the expected type of the elements.
  • `renderContacts()` function: This function clears the existing contact list and then iterates through the contacts in the `addressBook`, creating a list item (`<li>`) for each contact and appending it to the `<ul>` element.
  • Event listener: We add an event listener to the “Add Contact” button. When the button is clicked, it retrieves the values from the input fields, creates a new `Contact` object, adds it to the `addressBook`, renders the updated contact list, and clears the form.
  • Input validation: We added a simple check to ensure that the required fields (first name, last name, and email) are filled before adding a contact.
  • Initial render: We call `renderContacts()` initially to display any existing contacts (if you’ve added any in your TypeScript code before).

Important: You’ll need to recompile your TypeScript code (`tsc`) after making these changes. Then, open `index.html` in your web browser. You should now see a form where you can add contacts, and the contacts will be displayed dynamically in a list. You will need a web server or use the Live Server extension in VS Code to see your changes.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Type Errors: TypeScript will highlight type errors during development. Carefully read the error messages and ensure your code matches the defined types. Use type annotations (`: string`, `: number`, etc.) to clarify the expected types.
  • Incorrect Imports: Double-check your import statements. Make sure you’re importing the correct modules and that the file paths are accurate.
  • Not Compiling: Remember to compile your TypeScript code (`tsc`) after making changes. If you don’t compile, your browser will not see your changes.
  • Incorrect Element Selection: When working with the DOM, ensure you’re correctly selecting the HTML elements using `document.getElementById()`, `document.querySelector()`, etc. Use type assertions (e.g., `as HTMLInputElement`) to help TypeScript understand the element types.
  • Forgetting to Handle `undefined`: If a property is optional or a method might return `undefined`, handle these cases gracefully. Use the nullish coalescing operator (`??`) or optional chaining (`?.`) to prevent errors.

Key Takeaways

  • TypeScript enhances JavaScript development with type safety and improved code organization.
  • Interfaces define the structure of your data, making your code more predictable.
  • Classes encapsulate data and behavior, promoting code reusability.
  • Use `tsc` to compile your TypeScript code into JavaScript.
  • Integrate your TypeScript code with HTML and JavaScript to create interactive web applications.

FAQ

Here are some frequently asked questions:

  1. Q: How do I handle errors in my TypeScript code?

    A: TypeScript’s type checking helps catch many errors during development. For runtime errors, use `try…catch` blocks to handle exceptions. Also, implement input validation to prevent invalid data from being processed.

  2. Q: How can I debug my TypeScript code?

    A: You can use browser developer tools (like Chrome DevTools) to debug your compiled JavaScript code. Set breakpoints, inspect variables, and step through your code to identify and fix issues. Many IDEs also offer built-in debugging support for TypeScript.

  3. Q: How do I deploy my address book?

    A: You’ll need a web server to host your HTML, CSS, and JavaScript files. You can use services like Netlify, Vercel, or GitHub Pages for easy deployment. You’ll also need a way to store contact data persistently, such as a local storage, a database, or a cloud service.

  4. Q: Can I use a framework like React or Angular with TypeScript?

    A: Yes! TypeScript works very well with popular frameworks like React, Angular, and Vue.js. These frameworks often provide excellent TypeScript support, allowing you to build type-safe and maintainable front-end applications.

  5. Q: What are some good resources for learning more about TypeScript?

    A: The official TypeScript documentation is an excellent starting point. You can also find many tutorials, courses, and articles on websites like MDN Web Docs, freeCodeCamp, and Udemy. The TypeScript community is very active, so you can often find answers to your questions on forums like Stack Overflow.

Building a web-based address book is a great way to learn TypeScript and apply your skills to a practical project. This tutorial provides a solid foundation, and you can extend it by adding features like search, sorting, and data persistence. The journey of learning TypeScript, like any programming endeavor, is ongoing. Continue to experiment, practice, and explore the vast possibilities it offers, and you’ll find yourself building more robust and maintainable web applications.

More posts