TypeScript Tutorial: Building a Simple Interactive Web-Based Bookstore

Written by

learnmodernjavascript

in

In today’s digital age, online bookstores have become incredibly popular. They offer convenience, a vast selection, and often, competitive pricing. Wouldn’t it be great to understand how such a system might be built? This tutorial will guide you through creating a simplified, interactive web-based bookstore using TypeScript. We’ll focus on the core functionalities: displaying books, filtering by category, and adding items to a shopping cart. This project will not only teach you the practical application of TypeScript but also provide a solid foundation for understanding web application development.

Why TypeScript?

Before we dive in, let’s briefly discuss why we’re using TypeScript. TypeScript is a superset of JavaScript that adds static typing. This means you can define the types of variables, function parameters, and return values. This offers several benefits:

  • Improved Code Quality: Catching errors during development, rather than at runtime.
  • Enhanced Readability: Types act as documentation, making code easier to understand.
  • Better Tooling: IDEs can provide better autocompletion and refactoring support.
  • Increased Maintainability: Easier to make changes and refactor large codebases.

Essentially, TypeScript helps you write more robust, maintainable, and scalable code. It’s a fantastic tool for any serious web developer.

Setting Up the Project

Let’s get started by setting up our project. First, make sure you have Node.js and npm (Node Package Manager) installed. Then, create a new directory for your project and navigate into it using your terminal.

mkdir bookstore-app
cd bookstore-app

Next, initialize a new npm project:

npm init -y

This creates a package.json file, which manages your project’s dependencies. Now, install TypeScript:

npm install typescript --save-dev

The --save-dev flag indicates that this is a development dependency. Finally, create a tsconfig.json file. This file configures the TypeScript compiler. You can generate a basic one using the TypeScript compiler:

npx tsc --init

This will create a tsconfig.json file in your project directory. You can customize this file to suit your needs, but the default settings are often a good starting point. For this tutorial, we’ll keep the default settings.

Project Structure

Let’s define a basic project structure:

bookstore-app/
├── src/
│   ├── models/
│   │   └── book.ts
│   ├── services/
│   │   └── bookstoreService.ts
│   ├── components/
│   │   ├── bookList.ts
│   │   └── cart.ts
│   └── index.ts
├── public/
│   ├── index.html
│   └── styles.css
├── tsconfig.json
└── package.json

This structure organizes our code into logical units. The src directory will hold our TypeScript files, public will contain our HTML, CSS and assets. The models directory will define our data structures, services will house our data fetching and manipulation logic, components will contain our UI components, and index.ts will be our main entry point.

Defining the Book Model

Let’s start by defining our Book model. Create a file named book.ts inside the src/models directory. This file will define the structure of a book object.

// src/models/book.ts
export interface Book {
  id: number;
  title: string;
  author: string;
  genre: string;
  price: number;
  coverImage: string; // URL to the image
  description: string;
  isInCart?: boolean; // Optional property to indicate if the book is in the cart
}

Here, we define an interface called Book. It specifies the properties of a book, including its ID, title, author, genre, price, description and a URL for its cover image. The isInCart property is optional and used to track if the book is in the user’s shopping cart.

Creating the Bookstore Service

Next, we’ll create a service to handle book data. Create a file named bookstoreService.ts inside the src/services directory.

// src/services/bookstoreService.ts
import { Book } from '../models/book';

// Mock book data (replace with API calls in a real application)
const mockBooks: Book[] = [
  {
    id: 1,
    title: 'The Lord of the Rings',
    author: 'J.R.R. Tolkien',
    genre: 'Fantasy',
    price: 25.99,
    coverImage: 'https://example.com/lord_of_the_rings.jpg', // Replace with a real image URL
    description: 'An epic tale of good versus evil.',
  },
  {
    id: 2,
    title: 'Pride and Prejudice',
    author: 'Jane Austen',
    genre: 'Romance',
    price: 12.99,
    coverImage: 'https://example.com/pride_and_prejudice.jpg', // Replace with a real image URL
    description: 'A classic story of love and social class.',
  },
  {
    id: 3,
    title: '1984',
    author: 'George Orwell',
    genre: 'Dystopian',
    price: 18.99,
    coverImage: 'https://example.com/1984.jpg', // Replace with a real image URL
    description: 'A chilling vision of a totalitarian future.',
  },
  {
    id: 4,
    title: 'To Kill a Mockingbird',
    author: 'Harper Lee',
    genre: 'Classic',
    price: 15.99,
    coverImage: 'https://example.com/to_kill_a_mockingbird.jpg', // Replace with a real image URL
    description: 'A story of justice and racial prejudice.',
  },
  {
    id: 5,
    title: 'The Hitchhiker's Guide to the Galaxy',
    author: 'Douglas Adams',
    genre: 'Science Fiction',
    price: 20.99,
    coverImage: 'https://example.com/hitchhikers_guide.jpg', // Replace with a real image URL
    description: 'A comedic science fiction adventure.',
  },
];

export class BookstoreService {
  getBooks(): Book[] {
    return mockBooks;
  }

  getBookById(id: number): Book | undefined {
    return mockBooks.find((book) => book.id === id);
  }

  filterBooksByGenre(genre: string): Book[] {
    return mockBooks.filter((book) => book.genre === genre);
  }
}

This service includes:

  • A Book interface import from ../models/book.
  • Mock book data (in a real-world scenario, you would fetch this data from an API).
  • A BookstoreService class with methods to get all books (getBooks), get a book by its ID (getBookById), and filter books by genre (filterBooksByGenre).

Creating the Book List Component

Now, let’s create a component to display the list of books. Create a file named bookList.ts inside the src/components directory.

// src/components/bookList.ts
import { Book } from '../models/book';
import { BookstoreService } from '../services/bookstoreService';

export class BookList {
  private books: Book[] = [];
  private bookstoreService: BookstoreService;
  private container: HTMLElement;

  constructor(containerId: string) {
    this.bookstoreService = new BookstoreService();
    this.container = document.getElementById(containerId) as HTMLElement;
    if (!this.container) {
      throw new Error(`Container with id '${containerId}' not found.`);
    }
  }

  async render() {
    this.books = this.bookstoreService.getBooks();
    this.container.innerHTML = ''; // Clear previous content

    this.books.forEach((book) => {
      const bookElement = this.createBookElement(book);
      this.container.appendChild(bookElement);
    });
  }

  private createBookElement(book: Book): HTMLElement {
    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><b>Author:</b> ${book.author}</p>
      <p><b>Genre:</b> ${book.genre}</p>
      <p><b>Price:</b> $${book.price.toFixed(2)}</p>
      <button class="add-to-cart" data-book-id="${book.id}">Add to Cart</button>
    `;

    // Add event listener for the "Add to Cart" button
    const addToCartButton = bookElement.querySelector('.add-to-cart') as HTMLButtonElement;
    if (addToCartButton) {
      addToCartButton.addEventListener('click', () => {
        this.addToCart(book.id);
      });
    }

    return bookElement;
  }

  private addToCart(bookId: number) {
    // Implement cart functionality here
    console.log(`Adding book with ID ${bookId} to cart`);
    // You'll need to update the cart state and re-render the cart component.
  }
}

This component does the following:

  • Imports the Book interface and BookstoreService.
  • Takes a containerId in the constructor to specify where the book list will be rendered.
  • Fetches the book data using the BookstoreService.
  • Renders each book as a separate element with its title, author, genre, price, and cover image.
  • Includes an “Add to Cart” button for each book (the addToCart method is currently a placeholder).

Creating the Cart Component

Now, let’s create the component to display the shopping cart. Create a file named cart.ts inside the src/components directory.

// src/components/cart.ts
import { Book } from '../models/book';

export class Cart {
  private cartItems: Book[] = [];
  private container: HTMLElement;

  constructor(containerId: string) {
    this.container = document.getElementById(containerId) as HTMLElement;
    if (!this.container) {
      throw new Error(`Container with id '${containerId}' not found.`);
    }
  }

  addItem(book: Book) {
    this.cartItems.push(book);
    this.render(); // Re-render the cart after adding an item
  }

  removeItem(bookId: number) {
    this.cartItems = this.cartItems.filter(item => item.id !== bookId);
    this.render(); // Re-render the cart after removing an item
  }

  render() {
    this.container.innerHTML = ''; // Clear previous content

    if (this.cartItems.length === 0) {
      this.container.textContent = 'Your cart is empty.';
      return;
    }

    this.cartItems.forEach(item => {
      const cartItemElement = document.createElement('div');
      cartItemElement.classList.add('cart-item');
      cartItemElement.innerHTML = `
        <p>${item.title} - $${item.price.toFixed(2)}</p>
        <button class="remove-from-cart" data-book-id="${item.id}">Remove</button>
      `;

      const removeButton = cartItemElement.querySelector('.remove-from-cart') as HTMLButtonElement;
      if (removeButton) {
        removeButton.addEventListener('click', () => {
          this.removeItem(item.id);
        });
      }
      this.container.appendChild(cartItemElement);
    });
  }
}

This component:

  • Imports the Book interface.
  • Takes a containerId in the constructor to specify where the cart will be rendered.
  • Manages a cartItems array to store the books in the cart.
  • Includes addItem and removeItem methods to add and remove books from the cart.
  • Renders the cart items, displaying the title and price for each book, and includes a “Remove” button.

The Main Application Logic

Finally, let’s put it all together in our main application file, index.ts, located in the src directory.

// src/index.ts
import { BookList } from './components/bookList';
import { Cart } from './components/cart';

// Initialize the components
const bookList = new BookList('bookListContainer');
const cart = new Cart('cartContainer');

// Render the book list
bookList.render();

// Example: Adding an item to the cart (placeholder)
// You'll need to connect this to the "Add to Cart" button in the BookList component
// cart.addItem({ id: 1, title: 'Example Book', author: 'Example Author', price: 10.99, genre: 'Fiction', coverImage: '' });

This file does the following:

  • Imports the BookList and Cart components.
  • Initializes instances of both components, passing the container IDs.
  • Calls the render method of the BookList component to display the books.
  • Includes a comment about how you would connect the “Add to Cart” button in the BookList component to the addItem method of the Cart component.

Creating the HTML Structure

Now, let’s create the basic HTML structure for our bookstore. Create a file named index.html inside the public directory.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Bookstore</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Welcome to Our Bookstore</h1>
  </header>

  <main>
    <div class="book-list-container" id="bookListContainer">
      <h2>Available Books</h2>
      <!-- Book list will be rendered here -->
    </div>

    <aside>
      <div class="cart-container" id="cartContainer">
        <h2>Your Cart</h2>
        <!-- Cart items will be rendered here -->
      </div>
    </aside>
  </main>

  <footer>
    <p>© 2024 Simple Bookstore</p>
  </footer>
  <script src="index.js"></script>
</body>
</html>

This HTML provides the basic layout:

  • Includes a title and links to the CSS file.
  • Contains a header, main content, and footer.
  • Defines two div elements with the IDs bookListContainer and cartContainer, which are used by our components to render the book list and the cart, respectively.
  • Includes a script tag to load the compiled JavaScript file (index.js).

Adding Styles with CSS

Create a file named styles.css inside the public directory to add some basic styling to our bookstore.


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

header {
  background-color: #333;
  color: #fff;
  padding: 1rem 0;
  text-align: center;
}

main {
  display: flex;
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.book-list-container {
  flex: 3;
  padding-right: 20px;
}

.cart-container {
  flex: 1;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 5px;
}

.book-item {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: #fff;
}

.book-item img {
  max-width: 100px;
  float: left;
  margin-right: 10px;
}

.book-item h3 {
  margin-top: 0;
}

.add-to-cart {
  background-color: #4CAF50;
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.remove-from-cart {
  background-color: #f44336;
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

footer {
  text-align: center;
  padding: 1rem 0;
  background-color: #333;
  color: #fff;
  margin-top: 20px;
}

This CSS provides basic styling for the layout, book items, and cart.

Compiling and Running the Application

Now that we’ve written our TypeScript code, we need to compile it into JavaScript. Open your terminal and run the following command:

npx tsc

This command uses the TypeScript compiler (tsc) to compile all .ts files in your src directory into .js files in the same directory. The output JavaScript files will then be linked into your HTML. If you have any errors in your TypeScript code, the compiler will report them.

To run the application, open index.html in your web browser. You should see the basic layout of your bookstore, with the book list (populated by our mock data) and an empty cart.

Important: You might encounter an error in your browser’s console related to modules. This is because we haven’t set up a module bundler. For simplicity, we’ll address this by directly including the compiled JavaScript file in our HTML. Make sure the script tag in your index.html points to the correct location of your compiled JavaScript file (e.g., <script src="index.js"></script>). If you want to use a module bundler (like Webpack or Parcel) for more complex applications, you’ll need to configure it to bundle your TypeScript code and its dependencies into a single JavaScript file.

Adding Functionality: Connecting the Components

Our bookstore is currently displaying books, but we haven’t implemented the core functionality of adding items to the cart. Let’s connect the “Add to Cart” button in the BookList component to the Cart component.

In src/components/bookList.ts, modify the addToCart method and the event listener for the “Add to Cart” button. We’ll need to pass the cart instance to the BookList component. Modify the BookList constructor to accept the cart instance.

// src/components/bookList.ts (modified)
import { Book } from '../models/book';
import { BookstoreService } from '../services/bookstoreService';
import { Cart } from './cart'; // Import the Cart class

export class BookList {
  private books: Book[] = [];
  private bookstoreService: BookstoreService;
  private container: HTMLElement;
  private cart: Cart; // Add a reference to the Cart

  constructor(containerId: string, cart: Cart) { // Accept the Cart instance
    this.bookstoreService = new BookstoreService();
    this.container = document.getElementById(containerId) as HTMLElement;
    if (!this.container) {
      throw new Error(`Container with id '${containerId}' not found.`);
    }
    this.cart = cart; // Assign the cart instance
  }

  // ... (rest of the class)

  private addToCart(bookId: number) {
    const book = this.bookstoreService.getBookById(bookId);
    if (book) {
      this.cart.addItem(book); // Call the cart's addItem method
    }
  }
}

In src/index.ts, pass the cart instance to the BookList constructor:

// src/index.ts (modified)
import { BookList } from './components/bookList';
import { Cart } from './components/cart';

// Initialize the components
const cart = new Cart('cartContainer');
const bookList = new BookList('bookListContainer', cart); // Pass the cart instance

// Render the book list
bookList.render();

Now, when a user clicks the “Add to Cart” button, the book will be added to the cart, and the cart will re-render to display the new item. Remember to implement the removeItem method in the Cart component to complete the functionality.

Handling Errors

While our example is simple, real-world applications should handle errors gracefully. Here are a few common scenarios and how to address them:

  • Data Fetching Errors: If you’re fetching data from an API (instead of using mock data), you should handle potential network errors. Use try...catch blocks and display an appropriate error message to the user.
  • DOM Element Not Found: If the HTML element with the specified ID doesn’t exist (e.g., the bookListContainer), your application will throw an error. Use null checks and provide helpful error messages to aid debugging.
  • Invalid Data: Always validate data from external sources. Check that the data types are correct and that the data is within acceptable ranges.

Common Mistakes and How to Fix Them

Let’s look at some common mistakes beginners make when working with TypeScript and how to avoid them:

  • Ignoring Type Errors: TypeScript’s type checking is one of its most powerful features. Don’t ignore the errors reported by the compiler. These errors often indicate potential runtime issues.
  • Not Using Interfaces: Interfaces are essential for defining the shape of your data. Use them to ensure that your code is type-safe and easier to understand.
  • Over-Complicating Code: Start simple. Focus on getting the core functionality working before adding unnecessary complexity.
  • Not Testing: Write unit tests to ensure that your code behaves as expected. Testing is crucial for maintaining code quality.
  • Mixing JavaScript and TypeScript: While you can gradually migrate a JavaScript project to TypeScript, try to write new code in TypeScript from the start.

Key Takeaways

In this tutorial, we’ve covered the basics of building a simple interactive web-based bookstore using TypeScript.

  • We set up a TypeScript project.
  • Defined the data model (Book interface).
  • Created a service to handle book data.
  • Developed components for displaying the book list and the shopping cart.
  • Connected the components to add items to the cart.
  • Learned how to handle errors and avoid common mistakes.

This tutorial provides a solid foundation for understanding how to build web applications with TypeScript. You can extend this project by adding features such as:

  • Filtering books by genre.
  • Implementing a search functionality.
  • Using a real API to fetch book data.
  • Adding user authentication and authorization.
  • Adding payment gateway integration.

FAQ

Here are some frequently asked questions about this topic:

  1. What is the difference between TypeScript and JavaScript? TypeScript is a superset of JavaScript that adds static typing. This helps catch errors during development, improves code readability, and enhances maintainability.
  2. Why should I use TypeScript for web development? TypeScript offers several benefits, including improved code quality, better tooling, and increased maintainability. It helps you write more robust and scalable code.
  3. How do I compile TypeScript code? You can compile TypeScript code using the TypeScript compiler (tsc). This command converts your .ts files into .js files.
  4. What is the role of tsconfig.json? The tsconfig.json file configures the TypeScript compiler. It allows you to specify compiler options, such as the target JavaScript version, module system, and strict mode settings.
  5. What are some good resources for learning TypeScript? The official TypeScript documentation is an excellent resource. You can also find many tutorials and courses online on websites like Udemy, Coursera, and freeCodeCamp.

Building a web application, even a simple one like our bookstore, is a rewarding experience. It combines programming logic with user interface design, giving you the ability to create something interactive and useful. This project is a starting point, and there’s a lot more you can do to enhance it. Experiment with new features, explore different design patterns, and, most importantly, have fun while learning. The more you practice, the more confident you’ll become in your ability to build complex and engaging web applications. Embrace the learning process, and don’t be afraid to experiment and make mistakes; each one is a step forward in your journey as a developer.

More posts