TypeScript Tutorial: Building a Simple Interactive Web-Based Shopping Cart

Written by

learnmodernjavascript

in

In today’s digital age, e-commerce reigns supreme. From ordering groceries to purchasing the latest gadgets, online shopping has become an integral part of our lives. But have you ever wondered how these websites manage your selections, calculate totals, and process your orders? The secret lies in the humble shopping cart, a fundamental component of almost every e-commerce platform. This tutorial will guide you through building a simple, yet functional, interactive shopping cart using TypeScript, a superset of JavaScript that adds static typing.

Why TypeScript?

Before diving in, let’s address the elephant in the room: why TypeScript? JavaScript, while versatile, can be prone to errors due to its dynamic typing. TypeScript addresses this by introducing static typing, which allows you to define the data types of your variables, function parameters, and return values. This leads to several benefits:

  • Early Error Detection: TypeScript catches type-related errors during development, before they make it to production.
  • Improved Code Readability: Types make your code easier to understand and maintain.
  • Enhanced Refactoring: TypeScript’s type system makes it easier to refactor your code with confidence.
  • Better Tooling: TypeScript provides excellent support for IDEs, including autocompletion, code navigation, and refactoring tools.

In essence, TypeScript helps you write more robust, maintainable, and scalable JavaScript applications.

Setting Up Your Development Environment

To get started, you’ll need the following:

  • Node.js and npm (Node Package Manager): These are essential for managing your project dependencies and running your code. You can download them from nodejs.org.
  • A Code Editor: Visual Studio Code (VS Code) is a popular choice, but you can use any editor you prefer.
  • Basic Understanding of HTML, CSS, and JavaScript: While this tutorial focuses on TypeScript, a basic understanding of these web technologies is helpful.

Once you have these installed, let’s create a new project directory and initialize it with npm:

mkdir shopping-cart-tutorial
cd shopping-cart-tutorial
npm init -y

This creates a `package.json` file, which will hold your project’s metadata and dependencies. Next, install TypeScript as a development dependency:

npm install typescript --save-dev

This command downloads and installs the TypeScript compiler (`tsc`). Now, let’s create a `tsconfig.json` file to configure the compiler. In your project directory, run:

npx tsc --init

This generates a `tsconfig.json` file with various options. For this tutorial, we’ll keep the default settings, but you can customize them to suit your needs. Open `tsconfig.json` and ensure the following settings are present:

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

These settings specify that the compiler should transpile TypeScript code to ES5 JavaScript, use the CommonJS module system, output the compiled files to a `dist` directory, and include all files in the `src` directory. The `strict` option enables strict type checking. The `esModuleInterop` allows interoperability between CommonJS and ES modules. Finally, the `skipLibCheck` option skips type checking of declaration files (.d.ts) to speed up compilation. We will now create the `src` and `dist` directories in your project directory.

Creating the Project Structure

Let’s create the following directory structure within your project:

shopping-cart-tutorial/
├── src/
│   ├── components/
│   │   ├── Product.ts
│   │   └── ShoppingCart.ts
│   ├── models/
│   │   └── Product.ts
│   ├── index.ts
├── dist/
├── package.json
├── tsconfig.json
└── index.html

This structure organizes your code into components, models, and an entry point (`index.ts`). The `index.html` file will serve as the entry point for our web page.

Defining the Product Model (models/Product.ts)

First, we need to define a `Product` model to represent the items in our shopping cart. Create a file named `Product.ts` inside the `src/models` directory and add the following code:

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

This interface defines the properties of a product: `id`, `name`, `price`, `description`, `imageUrl`, and `quantity`. The quantity attribute is used in the shopping cart to represent the number of times a product is added.

Creating the Product Component (components/Product.ts)

Now, let’s create a `Product` component to display individual product details. Create `Product.ts` inside the `src/components` directory:

import { Product } from '../models/Product';

export class ProductComponent {
  private product: Product;
  private container: HTMLElement;

  constructor(product: Product, container: HTMLElement) {
    this.product = product;
    this.container = container;
    this.render();
  }

  private render(): void {
    const productElement = document.createElement('div');
    productElement.classList.add('product');

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

    this.container.appendChild(productElement);

    const addToCartButton = productElement.querySelector('.add-to-cart') as HTMLButtonElement;
    addToCartButton.addEventListener('click', () => {
      this.addToCart(this.product.id);
    });
  }

  private addToCart(productId: number): void {
    // Implement addToCart logic here (will be handled in ShoppingCart.ts)
    console.log(`Adding product with ID ${productId} to cart`);
  }
}

This `ProductComponent` class takes a `Product` object and an HTML container element in its constructor. The `render` method creates the HTML for displaying the product details, including an image, name, description, price, and an

More posts