TypeScript Tutorial: Building a Simple Interactive E-commerce Product Comparison Tool

Written by

learnmodernjavascript

in

In the bustling world of online shopping, consumers are constantly bombarded with options. Making an informed decision can be overwhelming. This is where a product comparison tool steps in, providing a streamlined way for users to assess different products side-by-side. In this tutorial, we’ll build a simple, interactive e-commerce product comparison tool using TypeScript. We’ll cover everything from setting up the project to handling user interactions, ensuring you have a solid understanding of TypeScript concepts along the way. This tool will empower users to make better purchasing decisions, ultimately enhancing their shopping experience.

Why 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 brings several benefits:

  • Early Error Detection: TypeScript catches type-related errors during development, preventing runtime surprises.
  • Improved Code Readability: Type annotations make your code easier to understand and maintain.
  • Enhanced Developer Experience: TypeScript provides better autocompletion, refactoring, and navigation in your IDE.

For this project, TypeScript will help us manage the data for our products, ensuring that the comparison tool functions correctly and is easy to extend.

Setting Up the Project

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

mkdir product-comparison-tool
cd product-comparison-tool

Next, initialize a new npm project:

npm init -y

This command creates a package.json file. Now, install TypeScript and the necessary type definitions:

npm install typescript --save-dev
npm install @types/node --save-dev

The --save-dev flag indicates that these are development dependencies. We’ll also need a way to compile our TypeScript code into JavaScript. Create a tsconfig.json file in your project directory with the following content:

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

This configuration tells the TypeScript compiler to:

  • Compile to ES5 JavaScript.
  • Use the CommonJS module system.
  • Output the compiled files to a dist directory.
  • Look for TypeScript files in the src directory.
  • Enforce strict type checking.

Finally, create a src directory and a file named index.ts inside it. This is where we’ll write our TypeScript code.

Defining Product Types

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

// src/index.ts
interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  imageUrl: string;
  [key: string]: any; // Allow for dynamic properties
}

This interface defines the properties of a product: id, name, description, price, and imageUrl. The [key: string]: any; allows for adding other properties that might be specific to different product types (e.g., “screenSize” for a laptop or “color” for a shirt). This flexibility is crucial for real-world e-commerce scenarios.

Creating Product Data

Next, let’s create some sample product data. We’ll store this data in an array of Product objects:

// src/index.ts
const products: Product[] = [
  {
    id: 1,
    name: "Laptop",
    description: "Powerful laptop for work and play",
    price: 1200,
    imageUrl: "laptop.jpg",
    screenSize: 15.6,
  },
  {
    id: 2,
    name: "Smartphone",
    description: "Latest smartphone with advanced features",
    price: 800,
    imageUrl: "smartphone.jpg",
    cameraResolution: "12MP",
  },
  {
    id: 3,
    name: "Headphones",
    description: "High-quality headphones for immersive audio",
    price: 150,
    imageUrl: "headphones.jpg",
  },
];

This array includes three sample products, each with its own properties. Notice how we are using the product interface we defined earlier, and how the additional properties are allowed.

Building the Comparison Tool

Now, let’s build the core functionality of our comparison tool. We’ll create functions to:

  • Display product data.
  • Select products for comparison.
  • Compare selected products.

Displaying Product Data

We’ll start by creating a function to display product data. This function will take a Product object as input and return an HTML string representing the product’s information:

// src/index.ts
function renderProduct(product: Product): string {
  return `
    <div class="product-card">
      <img src="${product.imageUrl}" alt="${product.name}">
      <h3>${product.name}</h3>
      <p>${product.description}</p>
      <p>Price: $${product.price}</p>
      <button class="compare-button" data-id="${product.id}">Compare</button>
    </div>
  `;
}

This function generates a simple HTML structure for each product, including an image, name, description, price, and a

More posts