TypeScript Tutorial: Creating a Simple E-commerce Product Catalog

Written by

learnmodernjavascript

in

In today’s digital age, e-commerce has exploded, with businesses of all sizes selling products online. One of the fundamental components of any e-commerce platform is a product catalog. This catalog allows customers to browse, search, and view the products a business offers. Building a product catalog from scratch can be a complex undertaking, but with TypeScript, we can create a simple yet functional catalog, learning valuable programming concepts along the way.

Why TypeScript?

TypeScript, a superset of JavaScript, brings static typing to the language. This means we can define the data types of our variables, function parameters, and return values. This adds several benefits:

  • Early Error Detection: TypeScript catches type-related errors during development, before runtime.
  • Improved Code Readability: Types make it easier to understand the purpose of variables and functions.
  • Enhanced Code Maintainability: Types make it easier to refactor and update code without introducing unexpected errors.
  • Better Tooling: TypeScript provides better autocompletion, refactoring, and other features in modern IDEs.

For our e-commerce product catalog, TypeScript will help us ensure data consistency, making our catalog more robust and reliable.

Setting Up the Project

Let’s start by setting up our project. We’ll use Node.js and npm (Node Package Manager). If you don’t have them installed, download and install them from the official Node.js website. Open your terminal or command prompt and create a new directory for our project:

mkdir product-catalog
cd product-catalog

Next, initialize a new npm project:

npm init -y

This command creates a `package.json` file in your project directory. Now, install TypeScript and a few other necessary packages:

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

* `typescript`: The TypeScript compiler.
* `@types/node`: Type definitions for Node.js, allowing us to use Node.js modules in our TypeScript code.

Next, we need to configure TypeScript. Create a `tsconfig.json` file in your project’s root directory. This file tells the TypeScript compiler how to compile your code. You can generate a basic `tsconfig.json` file by running:

npx tsc --init

This command creates a `tsconfig.json` file with default settings. You can customize these settings to fit your project’s needs. For our project, we’ll keep the default settings for now. Important settings to consider are:

  • `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.

Defining Product Types

The foundation of our product catalog is the product data. We’ll define a `Product` type using TypeScript’s type system. Create a new file called `product.ts` in your project directory:

// product.ts

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

export default Product;

In this code:

  • We define an `interface` named `Product`. Interfaces define the shape of an object.
  • The `Product` interface specifies the properties each product will have: `id`, `name`, `description`, `price`, `imageUrl`, `category`, and `stock`.
  • Each property has a specific type (e.g., `number`, `string`).
  • We export the `Product` interface so we can use it in other parts of our application.

Creating a Product Catalog Class

Now, let’s create a class to manage our product catalog. Create a new file called `catalog.ts`:

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

class ProductCatalog {
    private products: Product[];

    constructor() {
        this.products = [];
    }

    addProduct(product: Product): void {
        this.products.push(product);
    }

    getProducts(): Product[] {
        return this.products;
    }

    getProductById(id: number): Product | undefined {
        return this.products.find(product => product.id === id);
    }

    searchProducts(searchTerm: string): Product[] {
        const searchTermLower = searchTerm.toLowerCase();
        return this.products.filter(product =>
            product.name.toLowerCase().includes(searchTermLower) ||
            product.description.toLowerCase().includes(searchTermLower)
        );
    }

    updateProductStock(id: number, newStock: number): void {
        const productIndex = this.products.findIndex(product => product.id === id);
        if (productIndex !== -1) {
            this.products[productIndex].stock = newStock;
        } else {
            console.log(`Product with ID ${id} not found.`);
        }
    }
}

export default ProductCatalog;

In this code:

  • We import the `Product` interface from `product.ts`.
  • We define a class called `ProductCatalog`.
  • The `products` property is a private array of `Product` objects. The `private` keyword means that this property can only be accessed from within the `ProductCatalog` class.
  • The constructor initializes the `products` array.
  • `addProduct(product: Product)`: Adds a new product to the catalog.
  • `getProducts(): Product[]`: Returns all products in the catalog.
  • `getProductById(id: number): Product | undefined`: Finds a product by its ID. It returns either the `Product` object or `undefined` if not found.
  • `searchProducts(searchTerm: string): Product[]`: Searches for products by name or description.
  • `updateProductStock(id: number, newStock: number)`: Updates the stock quantity of a product.

Adding Sample Products

Let’s add some sample products to our catalog. Create a new file called `data.ts`:

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

const sampleProducts: Product[] = [
    {
        id: 1,
        name: 'Laptop',
        description: 'A powerful laptop for everyday use.',
        price: 1200,
        imageUrl: 'laptop.jpg',
        category: 'Electronics',
        stock: 10,
    },
    {
        id: 2,
        name: 'T-shirt',
        description: 'A comfortable cotton t-shirt.',
        price: 20,
        imageUrl: 'tshirt.jpg',
        category: 'Clothing',
        stock: 50,
    },
    {
        id: 3,
        name: 'Headphones',
        description: 'Noise-canceling headphones for immersive audio.',
        price: 150,
        imageUrl: 'headphones.jpg',
        category: 'Electronics',
        stock: 20,
    },
    {
        id: 4,
        name: 'Jeans',
        description: 'Stylish and durable jeans.',
        price: 60,
        imageUrl: 'jeans.jpg',
        category: 'Clothing',
        stock: 30,
    },
];

export default sampleProducts;

This file defines an array of `Product` objects, which we’ll use to populate our catalog.

Putting It All Together

Now, let’s write the main part of our application. Create a new file called `index.ts`:

// index.ts
import ProductCatalog from './catalog';
import sampleProducts from './data';
import Product from './product';

// Create a new product catalog
const catalog = new ProductCatalog();

// Add sample products to the catalog
sampleProducts.forEach(product => catalog.addProduct(product));

// Get all products
const allProducts = catalog.getProducts();
console.log('All Products:', allProducts);

// Get a product by ID
const productById = catalog.getProductById(2);
console.log('Product by ID 2:', productById);

// Search for products
const searchResults = catalog.searchProducts('laptop');
console.log('Search Results for "laptop":', searchResults);

// Update product stock
catalog.updateProductStock(1, 5);
const updatedProduct = catalog.getProductById(1);
console.log('Updated Product (ID 1):', updatedProduct);

// Example of adding a new product dynamically
const newProduct: Product = {
    id: 5,
    name: 'Smartwatch',
    description: 'A modern smartwatch with fitness tracking.',
    price: 250,
    imageUrl: 'smartwatch.jpg',
    category: 'Electronics',
    stock: 15,
};

catalog.addProduct(newProduct);
const allProductsAfterAdd = catalog.getProducts();
console.log('All Products after adding smartwatch:', allProductsAfterAdd);

In this code:

  • We import `ProductCatalog`, `sampleProducts`, and the `Product` interface.
  • We create a new instance of `ProductCatalog`.
  • We add the sample products to the catalog using a `forEach` loop.
  • We demonstrate how to use the various methods of the `ProductCatalog` class: `getProducts`, `getProductById`, `searchProducts`, and `updateProductStock`.
  • We add a new product dynamically to demonstrate how to add products after the catalog is initialized.

Compiling and Running the Code

To compile your TypeScript code, run the following command in your terminal:

tsc

This command will compile all TypeScript files in your project and create corresponding JavaScript files in the same directory (or the `outDir` if you specified one in your `tsconfig.json`).

To run your code, use Node.js:

node index.js

This will execute the compiled JavaScript code and you should see the output in your console, showing the product catalog data.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Type Errors: TypeScript will highlight type errors during development. Always pay attention to these errors and fix them. For example, if you try to assign a string to a number property, TypeScript will catch it.
  • Incorrect Imports: Make sure you are importing modules correctly. Double-check the file paths and the names of the imported objects.
  • Incorrect Property Names: Ensure that you use the correct property names when accessing product data. Typos can lead to unexpected behavior.
  • Not Using Types: If you’re not seeing the benefits of TypeScript, make sure you’re using types in your code. Explicitly define the types of variables, function parameters, and return values.
  • Ignoring Compiler Warnings: The TypeScript compiler can provide warnings in addition to errors. While warnings won’t stop your code from compiling, they often indicate potential problems or areas for improvement. Always address warnings.

Key Takeaways

  • TypeScript enhances code quality: By using types, we can catch errors early and make our code more readable and maintainable.
  • Classes and Interfaces: Classes are used to define the structure and behavior of our objects, and interfaces define the shape of our data.
  • Modular Design: Breaking your code into smaller, reusable modules (like `product.ts`, `catalog.ts`, and `data.ts`) makes your application easier to understand and manage.
  • Practical Application: This tutorial demonstrates a practical application of TypeScript by building a product catalog, a common component in e-commerce applications.

FAQ

  1. Can I use this product catalog in a real e-commerce application?

    Yes, this is a simplified version, but it provides a solid foundation. You’d likely need to integrate this with a database, a front-end framework (like React or Angular), and other e-commerce features (e.g., shopping cart, payment processing).

  2. How do I add more product data?

    You can expand the `sampleProducts` array in `data.ts` with more product objects. In a real application, you’d likely fetch product data from a database or an API.

  3. How can I search for products more efficiently?

    For large catalogs, the current search implementation might become slow. You could optimize the search by using a more efficient algorithm, such as indexing the product data or using a dedicated search library.

  4. How do I handle errors in this application?

    This example does not include comprehensive error handling. In a production environment, you should add error handling to catch potential issues (e.g., database connection errors, invalid input) and provide informative messages to the user or log them for debugging.

By following this tutorial, you’ve learned how to create a simple product catalog using TypeScript. You’ve also learned about the benefits of using TypeScript, such as type safety and improved code organization. This is just a starting point; you can extend this catalog by adding features like product reviews, user authentication, and integration with a database. The power of TypeScript lies in its ability to help you build robust and maintainable applications. As you continue to learn and practice, you’ll find that TypeScript makes you a more effective and confident developer. The concepts covered here are applicable to a wide range of software development projects, making this a valuable skill to possess. The use of interfaces to define data structures and classes to encapsulate behavior are fundamental principles of object-oriented programming. Mastering these concepts will serve you well in any software project.

More posts