TypeScript Tutorial: Building a Simple E-commerce Product Catalog

Written by

learnmodernjavascript

in

In the bustling world of e-commerce, a well-organized product catalog is the backbone of any successful online store. Customers need to easily browse, search, and understand the products you offer. As a developer, you might be tasked with creating or maintaining such a catalog. This tutorial will guide you through building a simple, yet functional, product catalog using TypeScript. We’ll cover the core concepts, from defining product types to implementing search and filtering functionalities. This tutorial is designed for beginners and intermediate developers who want to deepen their understanding of TypeScript while building a practical, real-world application.

Why TypeScript for an E-commerce Catalog?

TypeScript, a superset of JavaScript, brings several advantages to the table, especially when dealing with data-intensive applications like an e-commerce catalog:

  • Type Safety: TypeScript’s static typing helps catch errors during development, reducing runtime surprises and making your code more reliable.
  • Improved Code Readability: Type annotations make your code self-documenting, enhancing readability and maintainability.
  • Enhanced Developer Experience: Features like autocompletion and refactoring support in modern IDEs streamline development.
  • Scalability: TypeScript makes it easier to manage and scale your codebase as your e-commerce platform grows.

By using TypeScript, you can create a more robust and maintainable product catalog that is less prone to errors.

Setting Up Your TypeScript Project

Before diving into the code, let’s set up a basic TypeScript project. If you have Node.js and npm (Node Package Manager) installed, you can follow these steps:

  1. Create a Project Directory: Create a new directory for your project, for example, product-catalog.
  2. Initialize npm: Open your terminal, navigate to the project directory, and run npm init -y. This will create a package.json file.
  3. Install TypeScript: Install TypeScript globally or locally. For a local installation, run npm install typescript --save-dev.
  4. Create a tsconfig.json file: Run npx tsc --init. This will generate a tsconfig.json file, which configures the TypeScript compiler. You can customize this file based on your project’s needs. For a basic setup, you might want to adjust the following options:
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

This configuration compiles TypeScript code to ES5 JavaScript, uses CommonJS modules, and places the output in a dist directory. The strict: true option enables strict type checking. The include array specifies the directories to include in the compilation.

Defining Product Types

The first step in building our catalog is to define the structure of a product. We’ll use TypeScript interfaces to represent our product data:

// src/product.ts
export interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  imageUrl: string;
  category: string;
  inStock: boolean;
}

In this example, we define an interface named Product. Each product has an id (number), name (string), description (string), price (number), imageUrl (string), category (string), and inStock (boolean) property. This interface provides a clear contract for the structure of our product data.

Creating a Product Data Source

Now, let’s create a sample data source for our product catalog. For simplicity, we’ll create an array of Product objects directly in our code. In a real-world application, you’d likely fetch this data from a database or an API.

// src/data.ts
import { Product } from './product';

export const products: Product[] = [
  {
    id: 1,
    name: 'Laptop',
    description: 'Powerful laptop for work and play.',
    price: 1200,
    imageUrl: 'laptop.jpg',
    category: 'Electronics',
    inStock: true,
  },
  {
    id: 2,
    name: 'T-shirt',
    description: 'Comfortable cotton t-shirt.',
    price: 25,
    imageUrl: 'tshirt.jpg',
    category: 'Clothing',
    inStock: true,
  },
  {
    id: 3,
    name: 'Running Shoes',
    description: 'High-performance running shoes.',
    price: 80,
    imageUrl: 'shoes.jpg',
    category: 'Footwear',
    inStock: false,
  },
  {
    id: 4,
    name: 'Headphones',
    description: 'Noise-canceling headphones.',
    price: 150,
    imageUrl: 'headphones.jpg',
    category: 'Electronics',
    inStock: true,
  },
];

This code imports the Product interface and creates an array of Product objects, populating it with sample data. This data will be used to display our product catalog.

Displaying the Product Catalog

Next, we’ll create a simple function to display the product catalog. This example uses a basic HTML structure and JavaScript to render the products. We’ll focus on the TypeScript logic first and then the integration with the HTML.

// src/catalog.ts
import { Product } from './product';
import { products } from './data';

function displayProducts(products: Product[]): void {
  const catalogContainer = document.getElementById('product-catalog');

  if (!catalogContainer) {
    console.error('Product catalog container not found in the DOM.');
    return;
  }

  catalogContainer.innerHTML = ''; // Clear existing content

  products.forEach((product) => {
    const productElement = document.createElement('div');
    productElement.classList.add('product-item');

    productElement.innerHTML = `
      <img src="${product.imageUrl}" alt="${product.name}" />
      <h3>${product.name}</h3>
      <p>${product.description}</p>
      <p>Price: $${product.price.toFixed(2)}</p>
      <p>Category: ${product.category}</p>
      <p>In Stock: ${product.inStock ? 'Yes' : 'No'}</p>
    `;

    catalogContainer.appendChild(productElement);
  });
}

displayProducts(products);

Here’s a breakdown:

  • Imports: Imports the Product interface and the products array from the ./data file.
  • displayProducts function: This function takes an array of Product objects as input.
  • DOM Manipulation: It retrieves the HTML element with the ID product-catalog. If the element is not found, it logs an error to the console.
  • Iterating through Products: It iterates through the products array using forEach.
  • Creating Product Elements: For each product, it creates a div element with the class product-item.
  • Populating Product Details: It sets the innerHTML of the product element to display the product’s image, name, description, price, category, and stock status.
  • Appending to the Catalog: It appends the product element to the catalogContainer.
  • Calling the Function: Finally, it calls the displayProducts function, passing in the products array to render the initial product catalog.

To view this, you’ll also need an HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Catalog</title>
    <style>
        .product-item {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }
        img {
            max-width: 100px;
            max-height: 100px;
        }
    </style>
</head>
<body>
    <div id="product-catalog"></div>
    <script src="./dist/catalog.js"></script>
</body>
</html>

Remember to compile your TypeScript code using the command tsc in your terminal. This will create a dist folder containing the compiled JavaScript files. Then, open the HTML file in your browser to see the product catalog.

Adding Search Functionality

Adding search functionality enhances the user experience, allowing customers to quickly find specific products. Here’s how you can implement a basic search feature:

// src/catalog.ts (modified)
import { Product } from './product';
import { products } from './data';

function displayProducts(products: Product[]): void {
  // ... (previous code)
}

function searchProducts(searchTerm: string): void {
  const filteredProducts = products.filter((product) =>
    product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    product.description.toLowerCase().includes(searchTerm.toLowerCase())
  );
  displayProducts(filteredProducts);
}

// Add an event listener to the search input
const searchInput = document.createElement('input');
searchInput.type = 'text';
searchInput.placeholder = 'Search products...';
searchInput.addEventListener('input', (event: Event) => {
  const target = event.target as HTMLInputElement;
  const searchTerm = target.value;
  searchProducts(searchTerm);
});

const catalogContainer = document.getElementById('product-catalog');
if (catalogContainer) {
  catalogContainer.parentNode?.insertBefore(searchInput, catalogContainer);
}

displayProducts(products);

Here’s what we did:

  • searchProducts Function: This function takes a searchTerm (string) as input.
  • Filtering Products: It uses the filter method to create a new array (filteredProducts) containing only the products whose name or description includes the search term. We convert both the product details and the search term to lowercase to ensure case-insensitive matching.
  • Displaying Filtered Results: It calls the displayProducts function with the filteredProducts array to display the search results.
  • Adding an Input Field: We create an input field and adds an event listener for the ‘input’ event. This event listener calls the searchProducts function every time the user types in the input field.
  • Inserting the Input Field: The search input element is added to the HTML, right before the product catalog container.

To see the search bar, you’ll need to add the following to your HTML file:

<div id="product-catalog"></div>
<input type="text" id="search-input" placeholder="Search products...">
<script src="./dist/catalog.js"></script>

Implementing Filtering by Category

Filtering by category is another essential feature for an e-commerce catalog. This allows users to narrow down their search based on product type. Here’s how you can implement category filtering:

// src/catalog.ts (modified)
import { Product } from './product';
import { products } from './data';

function displayProducts(products: Product[]): void {
  // ... (previous code)
}

function searchProducts(searchTerm: string): void {
  // ... (previous code)
}

function filterProductsByCategory(category: string): void {
  let filteredProducts = products;
  if (category !== 'all') {
      filteredProducts = products.filter(product => product.category === category);
  }
  displayProducts(filteredProducts);
}

// Create category filter options
const categories = [...new Set(products.map(product => product.category))];
const filterContainer = document.createElement('div');
filterContainer.innerHTML = '<label for="category-filter">Filter by Category:</label>';
const selectElement = document.createElement('select');
selectElement.id = 'category-filter';

const allOption = document.createElement('option');
allOption.value = 'all';
allOption.textContent = 'All';
selectElement.appendChild(allOption);

categories.forEach(category => {
  const option = document.createElement('option');
  option.value = category;
  option.textContent = category;
  selectElement.appendChild(option);
});

selectElement.addEventListener('change', (event: Event) => {
  const target = event.target as HTMLSelectElement;
  const selectedCategory = target.value;
  filterProductsByCategory(selectedCategory);
});

filterContainer.appendChild(selectElement);

const catalogContainer = document.getElementById('product-catalog');
if (catalogContainer) {
  catalogContainer.parentNode?.insertBefore(filterContainer, catalogContainer);
}

displayProducts(products);

In this code:

  • filterProductsByCategory Function: This function takes a category (string) as input.
  • Filtering Logic: If the category is not ‘all’, it filters the products to include only those matching the selected category.
  • Creating Category Options: It gets unique categories from the products array and creates a select element with filter options.
  • Event Listener: An event listener is added to the select element. When the user selects a category, the filterProductsByCategory function is called with the selected category.
  • Inserting the Filter: The filter is inserted into the HTML, right before the product catalog container.

To see the category filter, you’ll need to add the following to your HTML file:

<div id="product-catalog"></div>
<input type="text" id="search-input" placeholder="Search products...">
<script src="./dist/catalog.js"></script>

Handling Common Mistakes

When working with TypeScript and building a product catalog, you might encounter some common mistakes:

  • Incorrect Type Annotations: Make sure your type annotations are accurate. Mismatched types can lead to unexpected behavior and runtime errors. Use the TypeScript compiler to catch these errors during development.
  • DOM Manipulation Errors: When interacting with the DOM, ensure you’re correctly selecting elements and updating their content. Use the browser’s developer tools to inspect the HTML and verify that the elements are being rendered as expected.
  • Missing Imports: Always import the necessary modules and types. If you forget to import something, TypeScript will throw an error during compilation.
  • Incorrect Paths: Double-check your file paths when importing modules. Incorrect paths will prevent the code from running as expected.

By being mindful of these potential issues, you can significantly reduce the likelihood of encountering errors and streamline your development process.

Key Takeaways

Here are the key takeaways from this tutorial:

  • TypeScript Benefits: TypeScript enhances code reliability, readability, and maintainability.
  • Product Interface: Defining a clear interface for your product data is crucial for structuring and managing your data.
  • Data Source: You can create a static data source for simplicity, but in real-world scenarios, you’ll fetch data from a database or API.
  • Displaying Products: Use DOM manipulation to display product information dynamically.
  • Search and Filtering: Implement search and filtering functionalities to improve user experience.
  • Error Handling: Always be aware of common mistakes and how to fix them.

FAQ

Here are some frequently asked questions about building a product catalog with TypeScript:

  1. Q: How do I handle data from an API?
    A: You can use the fetch API or a library like Axios to fetch data from an API. You’ll need to parse the JSON response and map the data to your Product interface.
  2. Q: How can I add pagination to my catalog?
    A: Implement pagination by displaying a subset of products at a time and adding navigation controls (e.g., “Next” and “Previous” buttons) to allow users to navigate through the pages.
  3. Q: How do I handle different product variations (e.g., sizes, colors)?
    A: You can add properties to your Product interface to represent variations (e.g., size: string[], color: string). You’ll also need to update your display logic to handle these variations.
  4. Q: How do I deploy this to a web server?
    A: You can deploy your application to any web server that supports serving static HTML, CSS, and JavaScript files. You’ll need to build your TypeScript code, which will generate the necessary JavaScript files. Then, upload these files to your web server.

This tutorial provides a solid foundation for building a product catalog with TypeScript. Remember, this is just a starting point. There are many ways to enhance and customize this catalog to meet your specific needs. You can add features such as product details pages, shopping carts, user reviews, and more. As you work on more complex projects, you’ll deepen your understanding of TypeScript and its capabilities. With a solid foundation in TypeScript and a clear understanding of the project’s requirements, you can create a robust and user-friendly e-commerce platform. Building this catalog is a great way to learn and practice TypeScript, and it’s a valuable skill for any web developer. This project highlights the benefits of using TypeScript, especially in terms of code structure, maintainability, and error prevention. By taking the time to understand the fundamentals and by practicing, you can build impressive and functional web applications.

More posts