TypeScript Tutorial: Creating a Simple Interactive E-commerce Product Catalog

Written by

learnmodernjavascript

in

In the ever-evolving landscape of web development, creating engaging and user-friendly interfaces is paramount. E-commerce platforms, in particular, thrive on intuitive product displays. Imagine a scenario: you’re building an online store, and the foundation of your success hinges on how effectively you showcase your products. A well-structured, easily navigable product catalog is not just a feature; it’s a necessity. This tutorial will guide you, step-by-step, through building a simple, interactive e-commerce product catalog using TypeScript. We’ll delve into the core concepts, practical implementation, and common pitfalls to ensure you build a solid foundation for your future e-commerce endeavors.

Why TypeScript for an E-commerce Product Catalog?

TypeScript, a superset of JavaScript, brings a wealth of advantages to web development, especially when dealing with complex applications like e-commerce platforms. Here’s why it’s a great choice:

  • Type Safety: TypeScript’s static typing catches errors during development, reducing runtime surprises and improving code reliability.
  • Code Readability and Maintainability: Types enhance code clarity, making it easier for you and your team to understand and maintain the codebase.
  • Enhanced Developer Experience: Features like autocompletion and refactoring tools streamline the development process.
  • Scalability: TypeScript facilitates the development of large, complex applications by providing structure and organization.

In the context of an e-commerce catalog, TypeScript helps ensure that product data is consistent, reduces the likelihood of type-related errors, and makes the code easier to modify as your catalog grows.

Setting Up Your Development Environment

Before diving into the code, let’s set up your development environment. You’ll need:

  • Node.js and npm (Node Package Manager): Used to manage project dependencies and run the TypeScript compiler. Download from nodejs.org.
  • A Code Editor: Visual Studio Code (VS Code) is highly recommended due to its excellent TypeScript support. Download from code.visualstudio.com.
  • TypeScript Compiler: Install it globally using npm: npm install -g typescript

Once you have these installed, create a new project directory and initialize a new npm project:

mkdir ecommerce-catalog
cd ecommerce-catalog
npm init -y

This will create a package.json file in your project directory.

Configuring TypeScript

Next, we need to configure TypeScript for our project. Create a tsconfig.json file in the root directory:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

Here’s a breakdown of the key compiler options:

  • target: Specifies the JavaScript version to compile to (e.g., “es5”, “es6”, “esnext”).
  • module: Specifies the module system (e.g., “commonjs”, “esnext”).
  • outDir: The directory where compiled JavaScript files will be placed.
  • rootDir: The root directory of your TypeScript source files.
  • strict: Enables strict type checking.
  • esModuleInterop: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: Skips type checking of declaration files.
  • forceConsistentCasingInFileNames: Enforces consistent casing in file names.

Project Structure

Let’s set up a basic project structure:

ecommerce-catalog/
├── src/
│   ├── models/
│   │   └── product.ts
│   ├── components/
│   │   └── product-card.ts
│   ├── app.ts
│   └── index.html
├── dist/
├── tsconfig.json
├── package.json
└── .gitignore

Create the src, models, and components directories.

Creating the Product Model

The product model defines the structure of each product in our catalog. Create a file named product.ts inside the src/models directory:

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

This interface defines the properties of a product: id, name, description, imageUrl, price, category, and inStock. Using an interface ensures that all product objects conform to this structure.

Building the Product Card Component

Now, let’s create a component to display each product. Create a file named product-card.ts inside the src/components directory:

// src/components/product-card.ts
import { Product } from '../models/product';

export function createProductCard(product: Product): HTMLElement {
  const card = document.createElement('div');
  card.classList.add('product-card');

  const image = document.createElement('img');
  image.src = product.imageUrl;
  image.alt = product.name;

  const name = document.createElement('h3');
  name.textContent = product.name;

  const description = document.createElement('p');
  description.textContent = product.description;

  const price = document.createElement('p');
  price.textContent = `$${product.price.toFixed(2)}`;

  const stockStatus = document.createElement('span');
  stockStatus.textContent = product.inStock ? 'In Stock' : 'Out of Stock';
  stockStatus.classList.add(product.inStock ? 'in-stock' : 'out-of-stock');

  card.appendChild(image);
  card.appendChild(name);
  card.appendChild(description);
  card.appendChild(price);
  card.appendChild(stockStatus);

  return card;
}

This component takes a Product object as input and dynamically generates an HTML element to display the product information. It creates elements for the image, name, description, price, and stock status. The stock status also gets a class to reflect its status.

Creating the Main Application Logic

Now, let’s write the main application logic in app.ts:

// src/app.ts
import { Product } from './models/product';
import { createProductCard } from './components/product-card';

// Sample product data
const products: Product[] = [
  {
    id: 1,
    name: 'Awesome T-Shirt',
    description: 'A comfortable and stylish t-shirt for everyday wear.',
    imageUrl: 'https://via.placeholder.com/150',
    price: 19.99,
    category: 'Clothing',
    inStock: true,
  },
  {
    id: 2,
    name: 'Cool Mug',
    description: 'A perfect mug for your morning coffee.',
    imageUrl: 'https://via.placeholder.com/150',
    price: 12.99,
    category: 'Home Goods',
    inStock: true,
  },
  {
    id: 3,
    name: 'Stylish Jeans',
    description: 'High-quality jeans for a great look.',
    imageUrl: 'https://via.placeholder.com/150',
    price: 49.99,
    category: 'Clothing',
    inStock: false,
  },
];

function renderProducts(): void {
  const productContainer = document.getElementById('product-container');
  if (!productContainer) return;

  products.forEach(product => {
    const card = createProductCard(product);
    productContainer.appendChild(card);
  });
}

// Initialize the app
function init(): void {
  renderProducts();
}

init();

This file imports the Product interface and the createProductCard function. It includes sample product data and defines a renderProducts function that iterates through the products, creates a product card for each, and appends it to the product-container element in the HTML. The init function calls renderProducts to initialize the application.

Creating the HTML File

Create an index.html file in the src directory:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-commerce Product Catalog</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="product-container"></div>
    <script src="./app.js"></script>
</body>
</html>

This HTML file includes a product-container div where the product cards will be rendered. It also links to a style.css file (which we’ll create next) and includes the compiled app.js file.

Styling the Application (style.css)

Create a style.css file in the src directory to style the product cards:

/* src/style.css */
.product-card {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
    width: 200px;
}

.product-card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.product-card h3 {
    margin-top: 0;
    font-size: 1.2em;
}

.product-card p {
    font-size: 0.9em;
    color: #555;
}

.in-stock {
    color: green;
    font-weight: bold;
}

.out-of-stock {
    color: red;
    font-weight: bold;
}

This CSS provides basic styling for the product cards, including borders, padding, and font styles.

Compiling and Running the Application

Now that all the code is in place, you need to compile the TypeScript code into JavaScript. Open your terminal and run the following command in the project root directory:

tsc

This command will use the tsconfig.json file to compile the TypeScript code and place the compiled JavaScript files in the dist directory.

To run the application, you can open the index.html file in your web browser. You should see the product cards rendered on the page, displaying the product information and stock status.

Adding Interactivity: Filtering Products

Let’s add a filtering feature to allow users to filter products by category. We’ll add a select dropdown for category selection.

First, modify index.html to include a category filter:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-commerce Product Catalog</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <label for="category-filter">Filter by Category:</label>
        <select id="category-filter">
            <option value="">All</option>
            <option value="Clothing">Clothing</option>
            <option value="Home Goods">Home Goods</option>
        </select>
    </div>
    <div id="product-container"></div>
    <script src="./app.js"></script>
</body>
</html>

Next, modify app.ts to handle the filter functionality:

// src/app.ts
import { Product } from './models/product';
import { createProductCard } from './components/product-card';

// Sample product data
const products: Product[] = [
  {
    id: 1,
    name: 'Awesome T-Shirt',
    description: 'A comfortable and stylish t-shirt for everyday wear.',
    imageUrl: 'https://via.placeholder.com/150',
    price: 19.99,
    category: 'Clothing',
    inStock: true,
  },
  {
    id: 2,
    name: 'Cool Mug',
    description: 'A perfect mug for your morning coffee.',
    imageUrl: 'https://via.placeholder.com/150',
    price: 12.99,
    category: 'Home Goods',
    inStock: true,
  },
  {
    id: 3,
    name: 'Stylish Jeans',
    description: 'High-quality jeans for a great look.',
    imageUrl: 'https://via.placeholder.com/150',
    price: 49.99,
    category: 'Clothing',
    inStock: false,
  },
];

function renderProducts(filteredProducts: Product[] = products): void {
  const productContainer = document.getElementById('product-container');
  if (!productContainer) return;

  // Clear existing product cards
  productContainer.innerHTML = '';

  filteredProducts.forEach(product => {
    const card = createProductCard(product);
    productContainer.appendChild(card);
  });
}

function filterProductsByCategory(category: string): Product[] {
  if (!category) return products;
  return products.filter(product => product.category === category);
}

function init(): void {
  const categoryFilter = document.getElementById('category-filter') as HTMLSelectElement;

  if (categoryFilter) {
    categoryFilter.addEventListener('change', () => {
      const selectedCategory = categoryFilter.value;
      const filteredProducts = filterProductsByCategory(selectedCategory);
      renderProducts(filteredProducts);
    });
  }

  renderProducts(); // Initial render
}

init();

Here’s what changed:

  • Added a category filter select element in the HTML.
  • Modified the renderProducts function to clear the product container before rendering the new products.
  • Added a filterProductsByCategory function that filters products based on the selected category.
  • Added an event listener to the category filter select element to trigger the filtering and re-rendering of products.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect TypeScript Configuration: Ensure your tsconfig.json is correctly configured. A common issue is not specifying the correct outDir or rootDir, leading to compilation errors. Review your configuration and make sure it aligns with your project structure.
  • Type Errors: TypeScript’s type checking can be strict. Pay close attention to type errors in your code editor. Use type annotations to define the types of variables, function parameters, and return values.
  • Incorrect Paths: Make sure your import paths are correct. When importing modules, ensure that the paths are relative to the current file. Double-check your file paths and consider using relative paths (e.g., './models/product') to avoid confusion.
  • Missing HTML Elements: Ensure that the HTML elements you are trying to manipulate in your JavaScript/TypeScript code (e.g., the product container) exist in your HTML file. Check the browser’s developer console for errors related to missing elements.
  • Not Compiling Changes: Remember to recompile your TypeScript code (tsc) after making changes. If you forget to compile, your changes won’t be reflected in the browser.

Advanced Features (Optional)

Here are some advanced features you can add to enhance your product catalog:

  • Product Details Page: Create a detailed page for each product.
  • Sorting and Pagination: Implement sorting options (e.g., by price, name) and pagination for large catalogs.
  • Search Functionality: Add a search bar to filter products by name or description.
  • State Management: For more complex applications, consider using a state management library like Redux or Zustand.
  • API Integration: Fetch product data from an external API instead of using static data.

Key Takeaways

  • TypeScript significantly improves the development experience by providing type safety and code readability.
  • Building a product catalog involves defining data models, creating components for displaying products, and managing user interactions.
  • The setup process involves configuring the TypeScript compiler and structuring your project.
  • Interactivity, such as filtering, enhances the user experience.

Frequently Asked Questions (FAQ)

Q: What is TypeScript?

A: TypeScript is a superset of JavaScript that adds static typing. It helps catch errors early in development and improves code maintainability.

Q: Why use TypeScript for an e-commerce catalog?

A: TypeScript helps ensure data consistency, reduces the chance of type-related errors, and makes the code more manageable as the catalog grows.

Q: How do I compile TypeScript code?

A: You compile TypeScript code using the TypeScript compiler (tsc) in the terminal. The compiler uses the configuration specified in your tsconfig.json file.

Q: Can I use this code with a framework like React or Angular?

A: Yes, the concepts and structure presented here can be adapted for use with frameworks like React or Angular. You’d typically integrate the TypeScript code into the framework’s component structure.

Conclusion

Building an e-commerce product catalog with TypeScript provides a robust and scalable foundation for your online store. By embracing type safety, clear code organization, and user-friendly features, you can create a compelling shopping experience. As you expand your catalog and add more features, the benefits of TypeScript will continue to shine, making maintenance and updates smoother. Remember to continuously refine your code, add advanced features, and always prioritize the user experience. This foundational knowledge will serve you well as you venture into the world of e-commerce web development.

More posts