TypeScript Tutorial: Building a Simple Interactive E-commerce Product Listing

Written by

learnmodernjavascript

in

In the bustling world of web development, creating dynamic and engaging user interfaces is paramount. E-commerce platforms, in particular, thrive on providing seamless experiences for browsing and purchasing products. This tutorial will guide you through building a simple, yet functional, interactive e-commerce product listing using TypeScript. We’ll explore the core concepts of TypeScript, including types, interfaces, and classes, while constructing a practical application that you can adapt and expand upon.

Why TypeScript for an E-commerce Product Listing?

TypeScript, a superset of JavaScript, brings static typing to the language, significantly enhancing code quality and maintainability. In the context of an e-commerce product listing, TypeScript offers several advantages:

  • Early Error Detection: TypeScript catches type-related errors during development, reducing the likelihood of runtime bugs that can frustrate users and impact sales.
  • Improved Code Readability: Type annotations make code easier to understand, especially for larger projects and when collaborating with others.
  • Enhanced Code Completion and Refactoring: IDEs can leverage type information to provide smarter code completion, making development faster and more efficient. Refactoring becomes safer and more reliable.
  • Scalability: As your e-commerce platform grows, TypeScript helps you manage complexity and scale your codebase more effectively.

This tutorial will demonstrate how TypeScript can streamline the development process and contribute to a more robust and user-friendly product listing.

Setting Up Your Development Environment

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

  • Node.js and npm (Node Package Manager): These are essential for managing project dependencies and running the TypeScript compiler. Download and install them from the official Node.js website (https://nodejs.org/).
  • A Code Editor: Choose a code editor like Visual Studio Code (VS Code), Sublime Text, or Atom. VS Code is highly recommended due to its excellent TypeScript support.
  • TypeScript Compiler: Install the TypeScript compiler globally using npm:
npm install -g typescript

This command installs the tsc command-line tool, which you’ll use to compile your TypeScript code into JavaScript.

Project Structure

Let’s create a basic project structure:

ecommerce-product-listing/
├── src/
│   └── index.ts
├── tsconfig.json
└── package.json
  • src/index.ts: This file will contain the main TypeScript code for our product listing.
  • tsconfig.json: This file configures the TypeScript compiler.
  • package.json: This file manages project dependencies.

Configuring the TypeScript Compiler (tsconfig.json)

The tsconfig.json file tells the TypeScript compiler how to compile your code. Create this file in the root directory of your project and add the following configuration:

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

Let’s break down the key options:

  • target: Specifies the JavaScript version to compile to (e.g., “es5”, “es6”, “esnext”).
  • module: Specifies the module system to use (e.g., “commonjs”, “esnext”).
  • outDir: Specifies the output directory for the compiled JavaScript files.
  • rootDir: Specifies the root directory of your TypeScript files.
  • strict: Enables strict type-checking. Highly recommended for catching potential errors.
  • esModuleInterop: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: Skips type checking of declaration files (e.g., from installed libraries).
  • forceConsistentCasingInFileNames: Enforces consistent casing in file names.
  • include: Specifies the files and directories to include in the compilation.

Defining Product Types and Interfaces

In TypeScript, we use types and interfaces to define the structure of our data. Let’s define a Product interface:

// src/index.ts

interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  imageUrl: string;
  isAvailable: boolean;
}

This interface defines the properties of a product, including its ID, name, description, price, image URL, and availability status. Using an interface ensures that all product objects adhere to this defined structure, providing type safety.

Creating Product Data

Let’s create an array of Product objects to represent our product data:

// src/index.ts

interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  imageUrl: string;
  isAvailable: boolean;
}

const products: Product[] = [
  {
    id: 1,
    name: "Awesome T-Shirt",
    description: "A comfortable and stylish t-shirt.",
    price: 25,
    imageUrl: "/images/tshirt.jpg",
    isAvailable: true,
  },
  {
    id: 2,
    name: "Cool Hoodie",
    description: "A warm and cozy hoodie for chilly days.",
    price: 50,
    imageUrl: "/images/hoodie.jpg",
    isAvailable: true,
  },
  {
    id: 3,
    name: "Stylish Jeans",
    description: "Classic jeans for any occasion.",
    price: 75,
    imageUrl: "/images/jeans.jpg",
    isAvailable: false,
  },
];

This code creates an array named products, where each element conforms to the Product interface we defined earlier. Note how each product object has the properties specified in the interface, and the types are enforced.

Displaying Products in HTML

Now, let’s write some HTML to display the product data. We’ll use JavaScript to dynamically generate the HTML for each product. Create an index.html file in the root 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 Listing</title>
  <style>
    .product-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
    }

    .product-card {
      border: 1px solid #ccc;
      padding: 10px;
      width: 250px;
      text-align: center;
    }

    .product-card img {
      max-width: 100%;
      height: 200px;
      object-fit: cover;
      margin-bottom: 10px;
    }

    .product-card.unavailable {
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <div class="product-container" id="product-container"></div>
  <script src="./dist/index.js"></script>
</body>
</html>

This HTML sets up the basic structure of the page, including a div with the ID product-container where we’ll render the product cards. It also includes some basic CSS for styling and links to the compiled JavaScript file (dist/index.js).

Rendering Product Cards with TypeScript

Now, let’s write the TypeScript code to render the product cards. Add the following code to src/index.ts:

// src/index.ts

interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  imageUrl: string;
  isAvailable: boolean;
}

const products: Product[] = [
  {
    id: 1,
    name: "Awesome T-Shirt",
    description: "A comfortable and stylish t-shirt.",
    price: 25,
    imageUrl: "/images/tshirt.jpg",
    isAvailable: true,
  },
  {
    id: 2,
    name: "Cool Hoodie",
    description: "A warm and cozy hoodie for chilly days.",
    price: 50,
    imageUrl: "/images/hoodie.jpg",
    isAvailable: true,
  },
  {
    id: 3,
    name: "Stylish Jeans",
    description: "Classic jeans for any occasion.",
    price: 75,
    imageUrl: "/images/jeans.jpg",
    isAvailable: false,
  },
];

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

  if (!productContainer) {
    console.error('Product container not found!');
    return;
  }

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

    if (!product.isAvailable) {
      productCard.classList.add('unavailable');
    }

    productCard.innerHTML = `
      <img src="${product.imageUrl}" alt="${product.name}">
      <h3>${product.name}</h3>
      <p>${product.description}</p>
      <p>$${product.price.toFixed(2)}</p>
      ${product.isAvailable ? '' : '<p>Out of Stock</p>'}
    `;

    productContainer.appendChild(productCard);
  });
}

renderProducts(products);

Let’s break down this code:

  • We declare the Product interface and the products array (as we did previously).
  • We define a renderProducts function that takes an array of Product objects as input.
  • Inside the function, we get the product-container element from the HTML.
  • We iterate through each product in the products array using forEach.
  • For each product, we create a div element (productCard) and add the product-card class. If the product is unavailable, we add the unavailable class.
  • We set the innerHTML of the productCard to create the product card’s HTML content, including the image, name, description, price, and availability status.
  • We append the productCard to the productContainer.
  • Finally, we call renderProducts(products) to render the products when the page loads.

Compiling and Running the Code

Now, let’s compile the TypeScript code and run it:

  1. Compile the TypeScript code: Open your terminal and navigate to your project directory. Run the following command:
tsc

This will compile the src/index.ts file and create a dist/index.js file.

  1. Open the HTML file in your browser: Open index.html in your web browser. You should see the product listing displayed, with the product cards rendered based on the data in your TypeScript file. If you have an issue, check the browser’s developer console for errors.

Adding Interactivity: Filtering Products

Let’s add some interactivity to our product listing by implementing a filter. We’ll add a simple filter that allows users to filter products based on their availability (available or unavailable).

First, add an HTML element for the filter above the product container in index.html:

<!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 Listing</title>
  <style>
    .product-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
    }

    .product-card {
      border: 1px solid #ccc;
      padding: 10px;
      width: 250px;
      text-align: center;
    }

    .product-card img {
      max-width: 100%;
      height: 200px;
      object-fit: cover;
      margin-bottom: 10px;
    }

    .product-card.unavailable {
      opacity: 0.5;
    }

    .filter-container {
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <div class="filter-container">
    <label for="availabilityFilter">Filter by Availability:</label>
    <select id="availabilityFilter">
      <option value="all">All</option>
      <option value="available">Available</option>
      <option value="unavailable">Unavailable</option>
    </select>
  </div>
  <div class="product-container" id="product-container"></div>
  <script src="./dist/index.js"></script>
</body>
</html>

This adds a select element with options for “All”, “Available”, and “Unavailable”.

Next, modify the src/index.ts file to include the filter logic:

// src/index.ts

interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  imageUrl: string;
  isAvailable: boolean;
}

const products: Product[] = [
  {
    id: 1,
    name: "Awesome T-Shirt",
    description: "A comfortable and stylish t-shirt.",
    price: 25,
    imageUrl: "/images/tshirt.jpg",
    isAvailable: true,
  },
  {
    id: 2,
    name: "Cool Hoodie",
    description: "A warm and cozy hoodie for chilly days.",
    price: 50,
    imageUrl: "/images/hoodie.jpg",
    isAvailable: true,
  },
  {
    id: 3,
    name: "Stylish Jeans",
    description: "Classic jeans for any occasion.",
    price: 75,
    imageUrl: "/images/jeans.jpg",
    isAvailable: false,
  },
];

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

  if (!productContainer) {
    console.error('Product container not found!');
    return;
  }

  productContainer.innerHTML = ''; // Clear existing products

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

    if (!product.isAvailable) {
      productCard.classList.add('unavailable');
    }

    productCard.innerHTML = `
      <img src="${product.imageUrl}" alt="${product.name}">
      <h3>${product.name}</h3>
      <p>${product.description}</p>
      <p>$${product.price.toFixed(2)}</p>
      ${product.isAvailable ? '' : '<p>Out of Stock</p>'}
    `;

    productContainer.appendChild(productCard);
  });
}

function filterProducts(): void {
  const filterSelect = document.getElementById('availabilityFilter') as HTMLSelectElement;
  const selectedValue = filterSelect.value;
  let filteredProducts: Product[];

  switch (selectedValue) {
    case 'available':
      filteredProducts = products.filter(product => product.isAvailable);
      break;
    case 'unavailable':
      filteredProducts = products.filter(product => !product.isAvailable);
      break;
    default:
      filteredProducts = products;
  }

  renderProducts(filteredProducts);
}

// Add event listener to the filter select
const filterSelect = document.getElementById('availabilityFilter');
if (filterSelect) {
  filterSelect.addEventListener('change', filterProducts);
}

renderProducts(products);

Here’s what’s changed:

  • We added a filterProducts function that gets the selected filter value, filters the products array accordingly, and calls renderProducts with the filtered results.
  • We added an event listener to the filter select element to call filterProducts whenever the selected option changes.
  • We added productContainer.innerHTML = ''; to the start of the renderProducts function to clear the existing product cards before rendering the filtered results.

After saving the changes, recompile the TypeScript code (tsc) and refresh your browser. You should now be able to filter the product listing based on availability.

Handling User Interactions: Adding to Cart (Conceptual)

While a full shopping cart implementation is beyond the scope of this tutorial, we can conceptually outline how to add “Add to Cart” functionality. This involves:

  1. Adding a button: Add an “Add to Cart” button to each product card in the HTML generated by the renderProducts function.
  2. Event Listener: Attach a click event listener to each “Add to Cart” button.
  3. Cart Logic: When the button is clicked, the event listener would call a function to add the corresponding product to a cart (which could be stored in a JavaScript array, local storage, or a more sophisticated backend solution).
  4. Update UI: The UI would update to reflect the addition of the product to the cart (e.g., show a cart icon with an updated item count).

For example, in the renderProducts function, you’d modify the productCard.innerHTML to include the button:

productCard.innerHTML = `
  <img src="${product.imageUrl}" alt="${product.name}">
  <h3>${product.name}</h3>
  <p>${product.description}</p>
  <p>$${product.price.toFixed(2)}</p>
  ${product.isAvailable ? '' : '<p>Out of Stock</p>'}
  <button class="add-to-cart" data-product-id="${product.id}">Add to Cart</button>
`;

Then, you would add an event listener to the “Add to Cart” buttons and implement the cart logic.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners might encounter when working with TypeScript and how to fix them:

  • Type Errors: TypeScript’s type system can be strict. If you get type errors, carefully review the error messages. Make sure your variables and function parameters have the correct types. Use type annotations (e.g., let myVariable: string) to explicitly define the expected types.
  • Incorrect Module Imports: When importing modules, ensure you’re using the correct import syntax. For example, if you’re using ES modules, use import ... from '...'. If you’re working with CommonJS modules, you might need to use require(...). Check your tsconfig.json file to ensure your module settings are correct (e.g., "module": "commonjs" or "module": "esnext").
  • Incorrect DOM Manipulation: When working with the DOM, make sure you’re selecting the correct elements using document.getElementById(), document.querySelector(), etc. Also, ensure that the elements exist before trying to manipulate them. Use type assertions (e.g., const myElement = document.getElementById('myElement') as HTMLDivElement;) to tell TypeScript the specific type of the element.
  • Compiler Errors: If you encounter compiler errors (e.g., during the tsc command), carefully read the error messages. They often provide valuable clues about what’s wrong. Check your tsconfig.json file for any incorrect settings.
  • Forgetting to Compile: Remember to recompile your TypeScript code (using tsc) after making changes before refreshing your browser.

Key Takeaways

This tutorial has provided a practical introduction to building an interactive e-commerce product listing with TypeScript. You’ve learned about:

  • TypeScript Fundamentals: Types, interfaces, and classes.
  • Project Setup: Setting up a TypeScript project with tsconfig.json.
  • Data Modeling: Defining data structures with interfaces.
  • DOM Manipulation: Dynamically generating HTML with TypeScript.
  • Interactivity: Adding filtering functionality.

FAQ

  1. Why use TypeScript instead of JavaScript? TypeScript offers improved code quality, readability, maintainability, and scalability due to its static typing. It helps catch errors early in the development process.
  2. How do I debug TypeScript code? You can debug TypeScript code by compiling it to JavaScript and then debugging the JavaScript code in your browser’s developer tools. Many code editors, such as VS Code, also have built-in debugging support for TypeScript.
  3. Can I use external libraries with TypeScript? Yes, you can. TypeScript supports using external JavaScript libraries. You might need to install type definition files (.d.ts files) for the libraries to get type checking and code completion. You can typically install these using npm (e.g., npm install @types/jquery).
  4. How do I deploy a TypeScript application? You need to compile your TypeScript code to JavaScript. Then, you deploy the compiled JavaScript files (along with your HTML, CSS, and any other assets) to your web server.

By understanding these concepts and practicing with the provided examples, you’re well on your way to building more robust and maintainable web applications using TypeScript.

The journey of building interactive web applications doesn’t end here. With the foundation of TypeScript and the practical knowledge gained from this tutorial, you can now explore more advanced features, such as state management, component-based architectures, and integrating with backend APIs. The power of TypeScript lies in its ability to adapt and scale with your projects, ensuring that your code remains organized, readable, and less prone to errors as your applications evolve. As you build more complex applications, remember to embrace the benefits of type safety and the clarity that TypeScript brings. Keep experimenting, exploring new libraries, and refining your skills to become a proficient TypeScript developer. The possibilities are vast, and the rewards of writing clean, maintainable code are immeasurable.

More posts