TypeScript: Building a Simple Image Gallery Application

Written by

learnmodernjavascript

in

In the digital age, images are everywhere. From social media feeds to e-commerce websites, visual content is crucial. As web developers, we often need to create image galleries to showcase visual assets effectively. This tutorial will guide you through building a simple yet functional image gallery application using TypeScript, a powerful language that brings type safety and enhanced developer experience to JavaScript.

Why TypeScript for an Image Gallery?

While JavaScript is the language of the web, TypeScript offers significant advantages, especially for projects of any complexity. Here’s why TypeScript is an excellent choice for building an image gallery:

  • Type Safety: TypeScript adds static typing to JavaScript. This means you can define the types of variables, function parameters, and return values. This helps catch errors early in the development process, reducing the likelihood of runtime bugs.
  • Improved Code Readability: Types make your code more self-documenting. It’s easier to understand the purpose of variables and functions when their types are explicitly defined.
  • Enhanced Developer Experience: TypeScript provides excellent tooling support, including autocompletion, refactoring, and error checking in your IDE. This speeds up development and makes it more enjoyable.
  • Scalability: As your image gallery grows, TypeScript’s type system helps you manage the complexity and maintain the code more easily.

Prerequisites

Before you start, make sure you have the following:

  • Node.js and npm (or yarn): You’ll need Node.js and npm (Node Package Manager) or yarn installed on your system. These are essential for managing project dependencies and running the application.
  • A Code Editor: A code editor like Visual Studio Code (VS Code) is recommended. VS Code offers excellent TypeScript support, including autocompletion and error checking.
  • Basic HTML, CSS, and JavaScript knowledge: While this tutorial focuses on TypeScript, some familiarity with HTML, CSS, and JavaScript will be helpful.

Setting Up the Project

Let’s get started by setting up our project. 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 image-gallery-app
cd image-gallery-app
  1. Initialize npm: Initialize a new npm project. This will create a package.json file to manage project dependencies.
npm init -y
  1. Install TypeScript: Install TypeScript as a development dependency.
npm install --save-dev typescript
  1. Create a TypeScript Configuration File: Create a tsconfig.json file in your project root. This file configures how TypeScript compiles your code. You can generate a basic one using the TypeScript compiler.
npx tsc --init

This will create a tsconfig.json file with many options. You can customize these options to fit your project’s needs. For a basic image gallery, you can start with the default configuration. Here are some key configurations to consider modifying:

  • 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 compiled JavaScript files (e.g., “./dist”).
  • sourceMap: Generates source map files for debugging.
  1. Create Project Files: Create the following files in your project directory:
    • index.html: The main HTML file for your application.
    • src/index.ts: The main TypeScript file where you’ll write the logic.
    • src/style.css: The CSS file for styling the image gallery.

Writing the HTML

Let’s start by creating the basic HTML structure for our image gallery in index.html. This will include a container for the gallery, a section to display the selected image, and navigation controls.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Image Gallery</title>
 <link rel="stylesheet" href="src/style.css">
</head>
<body>
 <div class="gallery-container">
 <div class="image-display">
 <img id="selected-image" src="" alt="Selected Image">
 </div>
 <div class="thumbnail-container">
 <!-- Thumbnails will be added here -->
 </div>
 </div>
 <script src="dist/index.js"></script>
</body>
</html>

This HTML provides the basic structure: a container for the gallery, a display area for the selected image (with the id “selected-image”), and a container (with the class “thumbnail-container”) where the image thumbnails will be displayed. It also links to the CSS file and the compiled JavaScript file.

Styling with CSS

Now, let’s add some basic styling to src/style.css to make our image gallery look presentable.

.gallery-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 80%;
 margin: 20px auto;
 border: 1px solid #ccc;
 padding: 20px;
}

.image-display {
 margin-bottom: 20px;
}

#selected-image {
 max-width: 100%;
 max-height: 400px;
 border: 1px solid #eee;
}

.thumbnail-container {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

.thumbnail-container img {
 width: 80px;
 height: 80px;
 margin: 5px;
 border: 1px solid #ddd;
 cursor: pointer;
}

.thumbnail-container img:hover {
 border: 1px solid #aaa;
}

This CSS styles the gallery container, the image display area, and the thumbnails. It sets the layout, dimensions, and adds some visual enhancements like borders and hover effects.

Writing the TypeScript Logic

Now, let’s move on to the core of our application – the TypeScript code in src/index.ts. This is where we’ll handle image data, display images, and manage user interactions.

First, let’s define an interface for our image data. This is a crucial part of using TypeScript, ensuring type safety and code clarity.

// src/index.ts

interface Image {
  url: string;
  alt: string;
}

This interface, named Image, defines the structure of each image object. It specifies that each image has a url (a string representing the image’s source) and an alt (a string providing alternative text for accessibility). This ensures that all image data conforms to a specific structure, preventing errors related to incorrect data formats.

Next, let’s create an array of Image objects to represent our image data. In a real-world scenario, you might fetch this data from an API or a database. For this example, we’ll hardcode the data.

const images: Image[] = [
  { url: 'image1.jpg', alt: 'Image 1' },
  { url: 'image2.jpg', alt: 'Image 2' },
  { url: 'image3.jpg', alt: 'Image 3' },
  { url: 'image4.jpg', alt: 'Image 4' },
  // Add more images as needed
];

Here, the images array is declared with the type Image[], ensuring that it only contains objects that match the Image interface. This is a great example of how TypeScript helps catch errors early.

Now, let’s create a function to display the selected image. This function will update the src and alt attributes of the <img> element in our HTML.

const selectedImage = document.getElementById('selected-image') as HTMLImageElement;

function displayImage(image: Image): void {
  selectedImage.src = image.url;
  selectedImage.alt = image.alt;
}

In this code:

  • We get the <img> element from the DOM using its ID. We use a type assertion (as HTMLImageElement) to tell TypeScript that this element is an HTML image element.
  • The displayImage function takes an Image object as an argument.
  • Inside the function, we update the src and alt attributes of the selected image.

Next, let’s create a function to generate the image thumbnails. This function will loop through the images array and create <img> elements for each image. These thumbnails will be displayed in the thumbnail container.

const thumbnailContainer = document.querySelector('.thumbnail-container') as HTMLDivElement;

function createThumbnails(): void {
  images.forEach(image => {
    const img = document.createElement('img');
    img.src = image.url;
    img.alt = image.alt;
    img.addEventListener('click', () => {
      displayImage(image);
    });
    thumbnailContainer.appendChild(img);
  });
}

In this code:

  • We get the thumbnail container from the DOM.
  • We loop through the images array using forEach.
  • Inside the loop, we create an <img> element for each image.
  • We set the src and alt attributes of the thumbnail.
  • We add a click event listener to each thumbnail. When a thumbnail is clicked, the displayImage function is called with the corresponding image.
  • We append the thumbnail to the thumbnail container.

Finally, let’s call the createThumbnails function to generate the thumbnails when the page loads. We’ll also display the first image by default.

function initializeGallery(): void {
  createThumbnails();
  displayImage(images[0]); // Display the first image by default
}

initializeGallery();

This initializeGallery function is the entry point of our application. It calls createThumbnails to generate the thumbnails and then displays the first image in the gallery. We call this function to start the gallery when the page loads.

Compiling and Running the Application

Now that we have written the HTML, CSS, and TypeScript code, let’s compile and run the application. Open your terminal and run the following command to compile the TypeScript code:

npx tsc

This command will compile your TypeScript code (src/index.ts) into JavaScript (dist/index.js) based on the configurations in your tsconfig.json file. If everything is configured correctly, this command will generate the JavaScript file in the dist directory.

After successful compilation, open your index.html file in a web browser. You should see the image gallery with the selected image and the thumbnails. Clicking on the thumbnails should update the selected image.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect File Paths: Double-check the file paths in your HTML (e.g., the path to your CSS file and the compiled JavaScript file).
  • Typos: Ensure that you have no typos in your code, especially in variable names, function names, and HTML element IDs/classes.
  • Incorrect Type Annotations: Make sure your type annotations are correct. TypeScript will highlight any type errors.
  • Missing Dependencies: Ensure that you have installed all the necessary dependencies (TypeScript).
  • Compilation Errors: If you encounter compilation errors, carefully read the error messages in the terminal. TypeScript error messages are usually very helpful in pinpointing the problem.

Extending the Image Gallery

Here are some ideas for extending your image gallery:

  • Add Pagination: Implement pagination to handle a large number of images.
  • Add Image Preloading: Preload images to improve the user experience.
  • Implement a Lightbox: Create a lightbox to display images in a larger format when clicked.
  • Add Image Descriptions: Display image descriptions along with the images.
  • Implement Drag and Drop: Allow users to reorder images by dragging and dropping them.
  • Implement Lazy Loading: Load images as they come into view to improve performance.

Key Takeaways

  • TypeScript adds type safety and improves code readability.
  • Interfaces define the structure of your data.
  • Type assertions are used to inform TypeScript about the type of a variable.
  • Event listeners handle user interactions.
  • The DOM is manipulated to display and update the image gallery.

FAQ

Here are some frequently asked questions about building an image gallery in TypeScript:

  1. Why use TypeScript instead of JavaScript? TypeScript adds type safety, improves code readability, and enhances developer experience. It helps catch errors early in the development process and makes the code easier to maintain and scale.
  2. How do I handle a large number of images? Implement pagination and lazy loading to handle a large number of images efficiently.
  3. How can I improve the user experience? Add features like image preloading, a lightbox, and image descriptions to improve the user experience.
  4. Where can I get image data? You can get image data from an API, a database, or even a local JSON file.
  5. How do I deploy this image gallery? You can deploy the image gallery on a web server or a platform like Netlify or Vercel.

Building an image gallery is a great way to learn and practice TypeScript. The concepts covered in this tutorial, such as type safety, interfaces, and DOM manipulation, are fundamental to web development with TypeScript. By following the steps outlined in this tutorial and experimenting with the extensions, you’ll gain valuable experience and build a solid foundation in TypeScript.

With the fundamental structure in place and the core logic implemented, you now have a functional image gallery. The journey doesn’t end here; it’s a starting point. Embrace the opportunity to expand the features, refine the design, and explore more advanced concepts. Dive into the world of image optimization, consider adding responsiveness to the layout, and explore the possibilities of dynamic image loading. As you continue to build and experiment, you’ll not only enhance your skills but also create a gallery that truly showcases your creativity and technical prowess. The possibilities are vast, and the learning never truly stops in the ever-evolving world of web development.

More posts