TypeScript Tutorial: Creating a Simple Web-Based E-commerce Product Catalog

Written by

learnmodernjavascript

in

In the world of web development, creating an intuitive and efficient e-commerce product catalog is a common challenge. Displaying product information, managing inventory, and providing a seamless user experience are critical for any online store. This tutorial will guide you through building a simple, yet functional, product catalog using TypeScript. We’ll focus on the core concepts, ensuring that even developers new to TypeScript can follow along and build a solid foundation. This project provides a practical way to learn TypeScript while creating something useful.

Why TypeScript?

TypeScript, a superset of JavaScript, brings static typing to your code. This means you define the types of variables, function parameters, and return values. This offers several advantages:

  • Early Error Detection: TypeScript catches potential errors during development, before you even run your code.
  • Improved Code Readability: Types make your code easier to understand and maintain.
  • Enhanced Refactoring: Refactoring becomes safer and more efficient with type checking.
  • Better Tooling: TypeScript provides excellent support for autocompletion, refactoring, and other IDE features.

By using TypeScript, you can write more robust, maintainable, and scalable code. This tutorial will demonstrate how these benefits translate into a real-world project.

Setting Up Your Project

Before we dive into the code, let’s set up our project environment. We’ll use Node.js and npm (Node Package Manager) for this tutorial. If you haven’t installed them already, you can download them from the official Node.js website. Open your terminal or command prompt and follow these steps:

  1. Create a Project Directory: Create a new directory for your project and navigate into it:
mkdir product-catalog
cd product-catalog
  1. Initialize npm: Initialize a new npm project. This will create a package.json file to manage your project dependencies:
npm init -y
  1. Install TypeScript: Install TypeScript globally or locally. For this tutorial, we’ll install it locally as a development dependency:
npm install --save-dev typescript
  1. Initialize TypeScript Configuration: Create a tsconfig.json file. This file configures the TypeScript compiler. Run the following command:
npx tsc --init

This command creates a tsconfig.json file with a lot of default settings. You might need to modify some of these settings based on your project requirements. For this tutorial, the default settings will work fine. However, it’s good practice to understand the configurations, so let’s review a few key settings:

  • 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 the TypeScript files.
  • strict: Enables strict type-checking options. It’s generally a good idea to set this to true.

Your project structure should now look something like this:


product-catalog/
├── node_modules/
├── package.json
├── package-lock.json
├── tsconfig.json
└──

Defining Product Data with TypeScript

The core of our product catalog is the product data. We’ll define a TypeScript interface to represent a product. This interface will ensure that all product objects have the same structure and data types. Create a new file named product.ts in your project directory. Add the following code:


// product.ts

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

export default Product;

Let’s break down this code:

  • interface Product: This declares an interface named Product. Interfaces define the structure of an object.
  • id: number: Each product has a unique numeric identifier.
  • name: string: The name of the product.
  • description: string: A brief description of the product.
  • price: number: The price of the product (in a numerical format).
  • imageUrl: string: The URL of the product image.
  • stock: number: The current stock level of the product.

By using an interface, we ensure that all product objects conform to this structure. This helps prevent errors and makes your code more predictable.

Creating a Product Data Array

Now, let’s create an array of product data to populate our catalog. Create a new file named data.ts in your project directory. Import the Product interface and add the following code:


// data.ts
import Product from './product';

const products: Product[] = [
  {
    id: 1,
    name: 'T-Shirt',
    description: 'Comfortable cotton t-shirt.',
    price: 19.99,
    imageUrl: 'https://via.placeholder.com/150',
    stock: 50,
  },
  {
    id: 2,
    name: 'Jeans',
    description: 'Classic denim jeans.',
    price: 49.99,
    imageUrl: 'https://via.placeholder.com/150',
    stock: 30,
  },
  {
    id: 3,
    name: 'Sneakers',
    description: 'Stylish and comfortable sneakers.',
    price: 79.99,
    imageUrl: 'https://via.placeholder.com/150',
    stock: 20,
  },
];

export default products;

In this code:

  • import Product from './product';: Imports the Product interface we defined earlier.
  • const products: Product[] = [...]: Declares an array named products. The Product[] type annotation indicates that this array will hold objects of type Product.
  • We then populate the products array with a few sample product objects. Each object adheres to the Product interface, providing values for id, name, description, price, imageUrl, and stock.

Displaying Products in HTML

Now that we have our product data, let’s create the HTML structure to display the products. Create an index.html file in your project directory. Add the following code:


<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Product Catalog</h1>
        <div id="product-container" class="product-grid">
            <!-- Products will be displayed here -->
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

This HTML structure includes:

  • A basic HTML structure with a <head> and <body>.
  • A <title> for the page.
  • A link to a style.css file (we’ll create this later).
  • A <div> with the ID product-container where we’ll dynamically add our product listings.
  • A link to index.js (which will be generated by the TypeScript compiler).

Styling with CSS

To make our product catalog visually appealing, let’s add some basic CSS. Create a style.css file in your project directory and add the following code:


.container {
    max-width: 960px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

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

.product-card {
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
}

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

.product-card button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.product-card button:hover {
    background-color: #0056b3;
}

This CSS provides basic styling for the container, headings, product grid, and product cards. Feel free to customize the styles to your liking.

Writing the TypeScript Logic

Now, let’s write the TypeScript code that will fetch the product data and display it in the HTML. Create a new file named index.ts in your project directory. Add the following code:


// index.ts
import products from './data';
import Product from './product';

const productContainer = document.getElementById('product-container');

function renderProducts(products: Product[]): void {
  if (!productContainer) {
    console.error('Product container not found in the DOM.');
    return;
  }

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

    productCard.innerHTML = `
      <img src="${product.imageUrl}" alt="${product.name}">
      <h3>${product.name}</h3>
      <p>${product.description}</p>
      <p>Price: $${product.price.toFixed(2)}</p>
      <p>Stock: ${product.stock}</p>
      <button>Add to Cart</button>
    `;

    productContainer.appendChild(productCard);
  });
}

renderProducts(products);

Let’s break down this code:

  • import products from './data';: Imports the products array from our data.ts file.
  • import Product from './product';: Imports the Product interface.
  • const productContainer = document.getElementById('product-container');: Gets a reference to the <div> element with the ID product-container from the HTML.
  • function renderProducts(products: Product[]): void { ... }: This function takes an array of Product objects as input and renders them in the HTML.
  • if (!productContainer) { ... }: Checks if the productContainer element was found. If not, it logs an error to the console. This is crucial for debugging.
  • products.forEach(product => { ... });: Iterates over each product in the products array.
  • Inside the loop:
    • const productCard = document.createElement('div');: Creates a new <div> element for each product.
    • productCard.classList.add('product-card');: Adds the product-card class to the <div>, which will apply the styling we defined in style.css.
    • productCard.innerHTML = `... `;: Sets the HTML content of the productCard using template literals. This creates the HTML for each product card, including the image, name, description, price, stock, and an “Add to Cart” button.
    • productContainer.appendChild(productCard);: Appends the productCard to the productContainer in the HTML.
  • renderProducts(products);: Calls the renderProducts function to render the initial product list.

Compiling and Running the Code

Now that we’ve written our TypeScript code, let’s compile it into JavaScript and run it. Open your terminal and navigate to your project directory. Run the following command:

tsc

This command will use the TypeScript compiler (tsc) to compile your index.ts file into a index.js file. The compiled JavaScript file will be placed in the same directory as your TypeScript files. Open your index.html file in a web browser. You should see the product catalog displayed, with each product’s image, name, description, price, stock, and an “Add to Cart” button. If you encounter any errors, check the browser’s developer console for error messages. Common issues include incorrect file paths, typos, or missing elements in the HTML.

Adding Basic Functionality: Add to Cart

To enhance our product catalog, let’s add a basic “Add to Cart” functionality. This will demonstrate how to handle user interactions in TypeScript. Modify the index.ts file to include this functionality:


// index.ts
import products from './data';
import Product from './product';

const productContainer = document.getElementById('product-container');

function renderProducts(products: Product[]): void {
  if (!productContainer) {
    console.error('Product container not found in the DOM.');
    return;
  }

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

    productCard.innerHTML = `
      <img src="${product.imageUrl}" alt="${product.name}">
      <h3>${product.name}</h3>
      <p>${product.description}</p>
      <p>Price: $${product.price.toFixed(2)}</p>
      <p>Stock: ${product.stock}</p>
      <button data-id="${product.id}">Add to Cart</button>
    `;

    const addToCartButton = productCard.querySelector('button');

    if (addToCartButton) {
      addToCartButton.addEventListener('click', () => {
        addToCart(product.id);
      });
    }
    productContainer.appendChild(productCard);
  });
}

function addToCart(productId: number): void {
  console.log(`Adding product with ID ${productId} to cart`);
  // In a real application, you would add the product to a cart
  // (e.g., using local storage, a backend API, etc.)
}

renderProducts(products);

Here’s what changed:

  • We’ve added a data-id attribute to the “Add to Cart” button. This attribute stores the product’s ID, which we’ll use to identify the product when the button is clicked.
  • We’ve added a query selector const addToCartButton = productCard.querySelector('button'); to select the button element.
  • We’ve added an event listener to the “Add to Cart” button. When the button is clicked, it calls the addToCart function, passing the product ID.
  • We’ve created a placeholder addToCart function that logs a message to the console. In a real application, this function would add the product to a shopping cart.

Recompile your TypeScript code by running tsc in your terminal. Refresh your browser, and click the “Add to Cart” buttons. You should see messages in the browser’s console indicating which product was added to the cart.

Common Mistakes and How to Fix Them

When working with TypeScript, you might encounter some common mistakes. Here are a few and how to resolve them:

  • Type Errors: TypeScript’s type checking can prevent you from assigning values of the wrong type to variables. For example, if you try to assign a string to a variable declared as a number, the compiler will throw an error. To fix this, ensure that the data types you’re assigning match the types you’ve declared. Double-check your data sources and the types defined in your interfaces.
  • Incorrect File Paths: Make sure your import statements have the correct file paths. If you’re importing a module from another file, the path needs to be correct relative to the current file. Use relative paths (e.g., ./data, ../utils) correctly. Check for typos in file names.
  • Missing or Incorrect HTML Element References: Make sure you have correctly selected the HTML elements in your TypeScript code. For example, if you try to get an element by ID, make sure that element exists in your HTML and that the ID is spelled correctly. Use the browser’s developer tools (right-click, Inspect) to verify that the element exists and that your JavaScript is running.
  • Compiler Errors: The TypeScript compiler can provide detailed error messages. Read these messages carefully, as they often pinpoint the exact location and cause of the error. Pay attention to the line numbers and file names mentioned in the error messages.
  • Incorrect DOM Manipulation: When manipulating the DOM (e.g., adding elements, setting attributes), make sure you’re using the correct methods and properties. For example, use createElement to create new elements, appendChild to add them to the DOM, and textContent or innerHTML to set their content. Use the browser’s developer tools to inspect the DOM and verify that your changes are being applied correctly.

Key Takeaways

  • TypeScript Fundamentals: You’ve learned how to define interfaces, use type annotations, and work with arrays in TypeScript.
  • Project Setup: You’ve set up a basic TypeScript project with npm and the TypeScript compiler.
  • DOM Manipulation: You’ve learned how to dynamically create and manipulate HTML elements using TypeScript.
  • Event Handling: You’ve implemented basic event handling to respond to user interactions.
  • Code Organization: You’ve structured your code into multiple files for better organization and maintainability.

FAQ

  1. What is the difference between an interface and a type alias in TypeScript?

    Both interfaces and type aliases are used to define the shape of an object. However, interfaces can be extended, and you can merge multiple declarations of the same interface. Type aliases are more versatile and can be used for more complex types, such as unions and intersections. In this example, we used an interface because it is more suitable for describing the shape of an object (Product).

  2. How do I debug TypeScript code?

    You can debug TypeScript code in several ways. The easiest way is to use your browser’s developer tools. Compile your TypeScript code to JavaScript (using tsc), and then open your HTML file in your browser. Use the developer tools (right-click, Inspect) to inspect the console for errors and use the debugger to step through your JavaScript code. You can also use a code editor with TypeScript support (like VS Code) to set breakpoints and debug your code directly.

  3. How can I add more features to this product catalog?

    You can add features like product filtering, sorting, searching, pagination, and a more sophisticated shopping cart. You could also integrate with a backend API to fetch product data and manage the shopping cart. You can also add user authentication and authorization, and implement more advanced features such as product reviews and ratings, related products, and recommendations.

  4. What are some best practices for writing TypeScript?

    Some best practices include using interfaces to define object shapes, using type annotations to improve code readability and prevent errors, writing clear and concise code, commenting your code, and using a linter and code formatter to maintain code quality. Also, enable strict mode in your tsconfig.json to catch more potential errors during development.

By following this tutorial, you’ve taken your first steps into building a product catalog with TypeScript. This is just the beginning. The concepts you’ve learned here can be applied to many other web development projects. As you continue to learn and practice, you’ll become more proficient in TypeScript and be able to build increasingly complex and sophisticated applications. Remember to experiment, explore, and most importantly, have fun while coding! The skills you’ve gained here will be valuable as you move forward in your web development journey, enabling you to create more robust, maintainable, and enjoyable user experiences.

More posts