TypeScript Tutorial: Building a Simple Interactive Bookstore

Written by

learnmodernjavascript

in

In today’s digital age, online bookstores are booming. From Amazon to smaller independent shops, the ability to browse and purchase books from the comfort of your home is a convenience that has revolutionized how we consume literature. But have you ever wondered how these online platforms manage their inventory, display book details, and handle user interactions?

This tutorial will guide you through building a simplified, yet functional, interactive bookstore application using TypeScript. We’ll focus on the core functionalities that make an online bookstore tick, such as:

  • Displaying a list of books.
  • Showing detailed information about a selected book.
  • Simulating the addition of books to a virtual shopping cart.

This project will not only provide you with hands-on experience in TypeScript but also give you a practical understanding of how front-end applications can interact with data and handle user events. Whether you’re a beginner looking to expand your TypeScript skills or an intermediate developer seeking a practical project, this tutorial is designed to be accessible and engaging.

Setting Up Your Development Environment

Before we dive into the code, let’s ensure you have everything set up. You’ll need:

  • Node.js and npm (or yarn): These are essential for managing project dependencies and running our TypeScript code.
  • A code editor: Visual Studio Code (VS Code) is highly recommended due to its excellent TypeScript support.
  • TypeScript compiler: We’ll install this as a project dependency.

Let’s start by creating a new project directory and initializing a Node.js project:

mkdir bookstore-app
cd bookstore-app
npm init -y

This will create a package.json file, which is used to manage your project’s dependencies and scripts. Next, install TypeScript as a development dependency:

npm install typescript --save-dev

Now, let’s create a tsconfig.json file. This file configures the TypeScript compiler. Run the following command in your terminal:

npx tsc --init

This command generates a tsconfig.json file with default settings. You can customize these settings to suit your project’s needs. For our project, the default settings will work fine. You can leave it as is, or modify the `outDir` to specify where the compiled JavaScript files will be generated (e.g., `”outDir”: “./dist”`).

Defining Data Structures with TypeScript

One of the key benefits of TypeScript is its ability to define data structures using types. This helps prevent errors and makes your code more readable. Let’s define the data structures for our bookstore application.

Create a file named src/types.ts (or any name you prefer) inside your project directory. This is where we’ll define our types:

// src/types.ts

export interface Book {
  id: number;
  title: string;
  author: string;
  description: string;
  price: number;
  coverImage: string; // URL to the image
  isAvailable: boolean;
}

export interface CartItem {
  book: Book;
  quantity: number;
}

Here, we define two interfaces:

  • Book: Represents a book with properties like id, title, author, description, price, coverImage, and isAvailable.
  • CartItem: Represents an item in the shopping cart, containing a book (of type Book) and a quantity.

Creating the Book Data and Displaying Books

Let’s create some sample book data and display it on the page. Create a file named src/data.ts:

// src/data.ts
import { Book } from './types';

export const books: Book[] = [
  {
    id: 1,
    title: "The Hitchhiker's Guide to the Galaxy",
    author: "Douglas Adams",
    description: "A comedic science fiction series.",
    price: 12.99,
    coverImage: "https://example.com/hitchhikers.jpg",
    isAvailable: true,
  },
  {
    id: 2,
    title: "Pride and Prejudice",
    author: "Jane Austen",
    description: "A classic romance novel.",
    price: 9.99,
    coverImage: "https://example.com/pride.jpg",
    isAvailable: true,
  },
  {
    id: 3,
    title: "1984",
    author: "George Orwell",
    description: "A dystopian social science fiction novel.",
    price: 10.99,
    coverImage: "https://example.com/1984.jpg",
    isAvailable: false,
  },
];

This file exports an array of Book objects. Now, let’s create the main application file, src/app.ts:

// src/app.ts
import { books } from './data';
import { Book } from './types';

function displayBooks(books: Book[]): void {
  const bookListElement = document.getElementById('book-list');
  if (!bookListElement) {
    console.error('Book list element not found.');
    return;
  }

  bookListElement.innerHTML = ''; // Clear previous content

  books.forEach(book => {
    const bookElement = document.createElement('div');
    bookElement.classList.add('book-item');

    bookElement.innerHTML = `
      <img src="${book.coverImage}" alt="${book.title} cover" />
      <h3>${book.title}</h3>
      <p>By ${book.author}</p>
      <p>Price: $${book.price.toFixed(2)}</p>
      <button data-book-id="${book.id}">${book.isAvailable ? 'Add to Cart' : 'Out of Stock'}</button>
    `;

    bookListElement.appendChild(bookElement);
  });
}

// Initial display
displayBooks(books);

In this file:

  • We import the books data from data.ts.
  • We import the Book type from types.ts.
  • The displayBooks function takes an array of Book objects and dynamically generates HTML elements to display each book.
  • It fetches the ‘book-list’ element from the HTML and clears any existing content.
  • It iterates through the books and creates a div for each book, populating it with the book’s information.
  • It appends each book’s div to the book-list element.

Creating the HTML Structure

Let’s create the HTML file (e.g., index.html) to hold our application:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Bookstore</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to Our Bookstore</h1>
    <div id="book-list">
        <!-- Book items will be displayed here -->
    </div>

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

Here’s a breakdown:

  • We include a basic HTML structure, including a title and a container for the book list with the id “book-list”.
  • We link to a style sheet named style.css (which we’ll create shortly) for styling.
  • We include our compiled JavaScript file (./dist/app.js) at the end of the body. This ensures the DOM is loaded before the script runs.

Adding Styles with CSS

Let’s add some basic styling to make our bookstore look presentable. Create a file named style.css in the root directory of your project:

/* style.css */
body {
  font-family: sans-serif;
  margin: 20px;
}

h1 {
  text-align: center;
}

#book-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.book-item {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

.book-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 10px;
}

.book-item button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
}

.book-item button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

This CSS provides basic styling for the page, including a grid layout for the books, and styling for the book items and buttons.

Compiling and Running the Application

Now that we have our code and HTML, let’s compile the TypeScript code and run the application:

  1. Compile the TypeScript code: Open your terminal and run the following command in the project directory: 
    tsc

    This command will compile your TypeScript files (src/app.ts, src/types.ts, and src/data.ts) into JavaScript files in the dist directory.

  2. Open the HTML file: Open index.html in your web browser. You should see the list of books displayed, along with their cover images, titles, authors, prices, and “Add to Cart” buttons.

Adding Event Listeners and Simulating Cart Functionality

Let’s add some interactivity to our bookstore. We’ll add event listeners to the “Add to Cart” buttons and simulate adding books to a shopping cart. Add the following code inside the src/app.ts file, after the displayBooks function:

// src/app.ts
import { books } from './data';
import { Book, CartItem } from './types';

// ... (previous code)

let cart: CartItem[] = [];

function addToCart(bookId: number): void {
  const bookToAdd = books.find(book => book.id === bookId);
  if (!bookToAdd) {
    console.warn(`Book with ID ${bookId} not found.`);
    return;
  }

  const existingCartItem = cart.find(item => item.book.id === bookId);

  if (existingCartItem) {
    existingCartItem.quantity++;
  } else {
    cart.push({ book: bookToAdd, quantity: 1 });
  }

  updateCartDisplay();
}

function updateCartDisplay(): void {
  const cartElement = document.getElementById('cart');
  if (!cartElement) {
    console.error('Cart element not found.');
    return;
  }

  cartElement.innerHTML = ''; // Clear previous content

  cart.forEach(item => {
    const cartItemElement = document.createElement('div');
    cartItemElement.classList.add('cart-item');
    cartItemElement.innerHTML = `
      <span>${item.book.title} x ${item.quantity}</span>
      <button data-book-id="${item.book.id}">Remove</button>
    `;
    cartElement.appendChild(cartItemElement);
  });

  // Add a simple total
  const total = cart.reduce((acc, item) => acc + item.book.price * item.quantity, 0);
  const totalElement = document.createElement('p');
  totalElement.textContent = `Total: $${total.toFixed(2)}`;
  cartElement.appendChild(totalElement);
}

function setupEventListeners(): void {
  const bookListElement = document.getElementById('book-list');
  if (!bookListElement) {
    return;
  }

  bookListElement.addEventListener('click', (event) => {
    const target = event.target as HTMLButtonElement;
    if (target.tagName === 'BUTTON' && target.dataset.bookId) {
      const bookId = parseInt(target.dataset.bookId, 10);
      addToCart(bookId);
    }
  });
}

// Initial setup
displayBooks(books);
setupEventListeners();

Here’s what this code does:

  • We declare a cart array of type CartItem[] to store the items in the shopping cart.
  • addToCart(bookId: number): This function takes a bookId as input, finds the corresponding book, and adds it to the cart. If the book is already in the cart, it increments the quantity.
  • updateCartDisplay(): This function clears the cart display and iterates through the cart array to display the items in the cart. It also calculates and displays the total price.
  • setupEventListeners(): This function adds an event listener to the book-list element. When a button is clicked, it checks if the clicked element is an “Add to Cart” button and if so, retrieves the book ID from the button’s data-book-id attribute and calls addToCart().

To see the cart, let’s modify the index.html file to include a cart section:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Bookstore</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to Our Bookstore</h1>
    <div id="book-list">
        <!-- Book items will be displayed here -->
    </div>

    <h2>Shopping Cart</h2>
    <div id="cart">
        <!-- Cart items will be displayed here -->
    </div>

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

Now, compile your TypeScript code (tsc) and refresh the page in your browser. When you click the “Add to Cart” button for a book, the book should appear in the shopping cart section.

Handling Common Mistakes

When working on this project, you might encounter some common mistakes. Here are a few and how to fix them:

  • Type Errors: TypeScript’s type system can catch many errors at compile time. If you see type errors, carefully read the error messages and ensure your code aligns with the defined types. For example, if you’re trying to assign a string to a number variable, TypeScript will flag this.
  • DOM Element Not Found: Make sure that the HTML elements you’re trying to access (e.g., “book-list”, “cart”) actually exist in your HTML file. Double-check the IDs and spellings. Also, ensure the JavaScript runs after the DOM is fully loaded.
  • Incorrect Paths: When importing modules or linking CSS files, double-check the file paths. Incorrect paths can lead to import errors or styles not being applied.
  • Event Listener Issues: Ensure event listeners are correctly attached to the right elements. Check that you’re using the correct event (e.g., ‘click’) and that the event listener function is correctly defined.
  • Compilation Errors: Make sure that you have no TypeScript compilation errors. Running tsc in the terminal should produce no errors. If there are any errors, fix them before refreshing the page in your browser.

Key Takeaways

In this tutorial, we’ve covered the fundamentals of building a simple, interactive bookstore application with TypeScript. You’ve learned how to:

  • Set up a TypeScript development environment.
  • Define data structures using TypeScript interfaces.
  • Work with data, including creating, displaying, and updating data.
  • Dynamically generate HTML elements based on data.
  • Add event listeners to handle user interactions.
  • Simulate adding items to a shopping cart.

This project provides a solid foundation for building more complex web applications with TypeScript. You can expand on this by adding features like:

  • More detailed book information pages.
  • User authentication and accounts.
  • Database integration to store book data.
  • More advanced cart functionality (e.g., removing items, updating quantities).
  • Payment processing integration.

FAQ

Here are some frequently asked questions about building a bookstore application with TypeScript:

  1. Why use TypeScript for this project? TypeScript provides static typing, which helps catch errors early, improves code readability, and makes it easier to maintain and scale your application.
  2. Can I use a framework like React or Angular with this? Yes, you can. TypeScript is often used with front-end frameworks like React, Angular, and Vue.js to build more complex and scalable applications.
  3. How can I deploy this application? You can deploy your application to a web hosting service like Netlify, Vercel, or GitHub Pages. You’ll need to build your TypeScript code (tsc) and deploy the generated JavaScript, HTML, and CSS files.
  4. What are some good resources for learning more TypeScript? The official TypeScript documentation is an excellent resource. You can also find many online tutorials, courses, and books on TypeScript.
  5. How can I improve the performance of my application? Consider techniques like code splitting, lazy loading, and optimizing images to improve performance. Also, ensure your code is efficient and avoids unnecessary computations.

Building an online bookstore, even a simplified version, offers a great way to learn and apply TypeScript. You’ve seen how to structure data, handle user events, and create a basic user interface. The principles you’ve learned here can be applied to a wide range of web development projects. Remember that the best way to learn is by doing. Experiment, explore, and don’t be afraid to make mistakes. Each error is an opportunity to learn and grow. Happy coding!

More posts