TypeScript Tutorial: Building a Simple Web-Based Recipe Application

Written by

learnmodernjavascript

in

In today’s digital age, we’re constantly bombarded with information, and finding that perfect recipe can sometimes feel like searching for a needle in a haystack. Imagine having a centralized, easy-to-use application where you can store, organize, and access all your favorite recipes. This tutorial will guide you through building a simple web-based recipe application using TypeScript, a powerful superset of JavaScript that adds static typing and other features to enhance your development experience. We’ll focus on creating a functional, user-friendly application, perfect for beginners and intermediate developers looking to expand their TypeScript skills.

Why TypeScript?

TypeScript offers several advantages over plain JavaScript, especially for larger projects:

  • Type Safety: TypeScript’s static typing helps catch errors during development, reducing runtime bugs.
  • Improved Code Readability: Types make your code easier to understand and maintain.
  • Enhanced Developer Experience: Features like autocompletion and refactoring tools make coding more efficient.
  • Object-Oriented Programming (OOP) Support: TypeScript provides robust support for OOP principles, enabling better code organization.

Project Setup

Before we dive into the code, let’s set up our development environment. We’ll use Node.js and npm (Node Package Manager) to manage our project dependencies. If you don’t have them installed, download and install them from the official Node.js website.

  1. Create a Project Directory: Create a new directory for your project (e.g., `recipe-app`) and navigate into it using your terminal.
  2. Initialize npm: Run `npm init -y` to create a `package.json` file. This file will store your project’s metadata and dependencies.
  3. Install TypeScript: Run `npm install typescript –save-dev` to install TypeScript as a development dependency. The `–save-dev` flag indicates that this package is only needed during development.
  4. Create a TypeScript Configuration File: Run `npx tsc –init` to generate a `tsconfig.json` file. This file configures the TypeScript compiler. You can customize the compiler options here, but for this tutorial, we’ll use the default settings.
  5. Create Source Files: Create a `src` directory to hold your TypeScript source files. Inside `src`, create a file named `index.ts`. This will be our main entry point.

Basic Structure of Our Recipe App

Our recipe app will have the following core features:

  • Recipe Data: We’ll store recipes as objects with properties like name, ingredients, instructions, and possibly an image URL.
  • Recipe Display: We’ll display recipes in a user-friendly format, likely using HTML elements.
  • Data Management: We’ll need a way to add, edit, and delete recipes. For simplicity, we’ll use an in-memory array to store recipes. In a real-world application, you’d use a database.

Defining Recipe Types

One of the key benefits of TypeScript is its ability to define types. Let’s start by defining a `Recipe` type:

// src/index.ts

interface Ingredient {
  name: string;
  quantity: string;
}

interface Recipe {
  name: string;
  ingredients: Ingredient[];
  instructions: string[];
  imageUrl?: string; // Optional image URL
}

Here, we’ve defined two interfaces: `Ingredient` and `Recipe`. The `Ingredient` interface describes the structure of an ingredient, while the `Recipe` interface describes the structure of a recipe. The `imageUrl` property in the `Recipe` interface is optional, indicated by the `?` symbol. This means a recipe may or may not have an image.

Creating Sample Recipes

Let’s create an array of sample recipes to populate our application:

// src/index.ts (continued)

const recipes: Recipe[] = [
  {
    name: "Spaghetti Carbonara",
    ingredients: [
      { name: "Spaghetti", quantity: "200g" },
      { name: "Pancetta", quantity: "100g" },
      { name: "Eggs", quantity: "2" },
      { name: "Parmesan Cheese", quantity: "50g" },
      { name: "Black Pepper", quantity: "to taste" },
    ],
    instructions: [
      "Cook spaghetti according to package directions.",
      "Fry pancetta until crispy.",
      "Whisk eggs with parmesan and pepper.",
      "Combine spaghetti, pancetta, and egg mixture. Serve immediately.",
    ],
  },
  {
    name: "Chocolate Chip Cookies",
    ingredients: [
      { name: "Flour", quantity: "225g" },
      { name: "Butter", quantity: "115g" },
      { name: "Sugar", quantity: "75g" },
      { name: "Brown Sugar", quantity: "75g" },
      { name: "Eggs", quantity: "1" },
      { name: "Chocolate Chips", quantity: "150g" },
    ],
    instructions: [
      "Cream together butter and sugars.",
      "Beat in egg.",
      "Add flour and chocolate chips.",
      "Bake at 180°C for 10-12 minutes.",
    ],
  },
];

We’ve created a constant `recipes` variable that holds an array of `Recipe` objects. Each object conforms to the `Recipe` interface we defined earlier.

Displaying Recipes in HTML

Now, let’s create a function to display these recipes in HTML. We’ll dynamically generate HTML elements based on the recipe data.


// src/index.ts (continued)

function displayRecipes(recipes: Recipe[]): void {
  const recipeContainer = document.getElementById('recipe-container');

  if (!recipeContainer) {
    console.error('recipe-container element not found');
    return;
  }

  recipeContainer.innerHTML = ''; // Clear existing content

  recipes.forEach((recipe) => {
    const recipeElement = document.createElement('div');
    recipeElement.classList.add('recipe');

    const nameElement = document.createElement('h3');
    nameElement.textContent = recipe.name;
    recipeElement.appendChild(nameElement);

    if (recipe.imageUrl) {
      const imageElement = document.createElement('img');
      imageElement.src = recipe.imageUrl;
      imageElement.alt = recipe.name;
      recipeElement.appendChild(imageElement);
    }

    const ingredientsElement = document.createElement('ul');
    recipe.ingredients.forEach((ingredient) => {
      const ingredientItem = document.createElement('li');
      ingredientItem.textContent = `${ingredient.name}: ${ingredient.quantity}`;
      ingredientsElement.appendChild(ingredientItem);
    });
    recipeElement.appendChild(ingredientsElement);

    const instructionsElement = document.createElement('ol');
    recipe.instructions.forEach((instruction) => {
      const instructionItem = document.createElement('li');
      instructionItem.textContent = instruction;
      instructionsElement.appendChild(instructionItem);
    });
    recipeElement.appendChild(instructionsElement);

    recipeContainer.appendChild(recipeElement);
  });
}

This `displayRecipes` function takes an array of `Recipe` objects as input. It then iterates through the recipes and dynamically creates HTML elements for each recipe, including the name, image (if available), ingredients, and instructions. The function then appends these elements to a container with the ID `recipe-container`. Note the use of `document.getElementById` to find the HTML element where the recipes will be displayed.

Creating the HTML Structure

Let’s create the basic HTML structure for our application. Create an `index.html` file in the root directory of your project:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recipe App</title>
    <link rel="stylesheet" href="style.css">  <!-- Link to your CSS file -->
</head>
<body>
    <h1>My Recipes</h1>
    <div id="recipe-container">
        <!-- Recipes will be displayed here -->
    </div>
    <script src="index.js"></script>  <!-- Link to your compiled JavaScript file -->
</body>
</html>

This HTML file includes a title, a container with the ID `recipe-container` where the recipes will be displayed, and links to a CSS file (`style.css`, which we’ll create later) and the compiled JavaScript file (`index.js`).

Styling with CSS

To make our recipe application visually appealing, let’s add some basic CSS styling. Create a file named `style.css` in the root directory of your project:


body {
  font-family: sans-serif;
  margin: 20px;
}

h1 {
  text-align: center;
}

.recipe {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}

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

.recipe h3 {
  margin-top: 0;
}

This CSS provides basic styling for the body, headings, and recipe elements. Feel free to customize these styles to your liking.

Compiling and Running the Application

Now that we have our TypeScript code and HTML structure, we need to compile the TypeScript code into JavaScript and then run the application.

  1. Compile TypeScript: In your terminal, run `npx tsc` in the project root directory. This will compile your `index.ts` file into `index.js` in the same directory. This command uses the TypeScript compiler (`tsc`) to transpile the TypeScript code into JavaScript. The compiled JavaScript code is what the browser will execute.
  2. Open the HTML file: Open `index.html` in your web browser. You should see the recipes displayed. If you don’t see anything, check the browser’s developer console (usually by pressing F12) for any errors. Double-check that the paths to your JavaScript and CSS files are correct in your `index.html`.

Your application should now display the sample recipes.

Adding Recipe Functionality: Adding Recipes

Let’s add the ability to add new recipes to our application. We’ll add a form to the HTML and create functions to handle user input.

First, add the following HTML form within the `<body>` of your `index.html` file, above the `<div id=”recipe-container”>` element:


<h2>Add New Recipe</h2>
<form id="recipe-form">
    <label for="recipeName">Recipe Name:</label><br>
    <input type="text" id="recipeName" name="recipeName" required><br><br>

    <label for="ingredientName">Ingredient Name:</label><br>
    <input type="text" id="ingredientName" name="ingredientName"><br><br>

    <label for="ingredientQuantity">Ingredient Quantity:</label><br>
    <input type="text" id="ingredientQuantity" name="ingredientQuantity"><br><br>

    <button type="button" id="addIngredientButton">Add Ingredient</button><br><br>

    <ul id="ingredientsList"></ul><br>

    <label for="instruction">Instruction:</label><br>
    <textarea id="instruction" name="instruction" rows="4" cols="50"></textarea><br><br>

    <button type="button" id="addInstructionButton">Add Instruction</button><br><br>

    <ul id="instructionsList"></ul><br>

    <label for="imageUrl">Image URL (Optional):</label><br>
    <input type="text" id="imageUrl" name="imageUrl"><br><br>

    <button type="submit">Add Recipe</button>
</form>

Next, add the following TypeScript code to handle form submission and adding the new recipe. This includes event listeners and functions to manage the new recipe data and update the display.


// src/index.ts (continued)

interface Ingredient {
    name: string;
    quantity: string;
}

interface Recipe {
    name: string;
    ingredients: Ingredient[];
    instructions: string[];
    imageUrl?: string; // Optional image URL
}

const recipes: Recipe[] = [
    {
        name: "Spaghetti Carbonara",
        ingredients: [
            { name: "Spaghetti", quantity: "200g" },
            { name: "Pancetta", quantity: "100g" },
            { name: "Eggs", quantity: "2" },
            { name: "Parmesan Cheese", quantity: "50g" },
            { name: "Black Pepper", quantity: "to taste" },
        ],
        instructions: [
            "Cook spaghetti according to package directions.",
            "Fry pancetta until crispy.",
            "Whisk eggs with parmesan and pepper.",
            "Combine spaghetti, pancetta, and egg mixture. Serve immediately.",
        ],
    },
    {
        name: "Chocolate Chip Cookies",
        ingredients: [
            { name: "Flour", quantity: "225g" },
            { name: "Butter", quantity: "115g" },
            { name: "Sugar", quantity: "75g" },
            { name: "Brown Sugar", quantity: "75g" },
            { name: "Eggs", quantity: "1" },
            { name: "Chocolate Chips", quantity: "150g" },
        ],
        instructions: [
            "Cream together butter and sugars.",
            "Beat in egg.",
            "Add flour and chocolate chips.",
            "Bake at 180°C for 10-12 minutes.",
        ],
    },
];

function displayRecipes(recipes: Recipe[]): void {
    const recipeContainer = document.getElementById('recipe-container');

    if (!recipeContainer) {
        console.error('recipe-container element not found');
        return;
    }

    recipeContainer.innerHTML = ''; // Clear existing content

    recipes.forEach((recipe) => {
        const recipeElement = document.createElement('div');
        recipeElement.classList.add('recipe');

        const nameElement = document.createElement('h3');
        nameElement.textContent = recipe.name;
        recipeElement.appendChild(nameElement);

        if (recipe.imageUrl) {
            const imageElement = document.createElement('img');
            imageElement.src = recipe.imageUrl;
            imageElement.alt = recipe.name;
            recipeElement.appendChild(imageElement);
        }

        const ingredientsElement = document.createElement('ul');
        recipe.ingredients.forEach((ingredient) => {
            const ingredientItem = document.createElement('li');
            ingredientItem.textContent = `${ingredient.name}: ${ingredient.quantity}`;
            ingredientsElement.appendChild(ingredientItem);
        });
        recipeElement.appendChild(ingredientsElement);

        const instructionsElement = document.createElement('ol');
        recipe.instructions.forEach((instruction) => {
            const instructionItem = document.createElement('li');
            instructionItem.textContent = instruction;
            instructionsElement.appendChild(instructionItem);
        });
        recipeElement.appendChild(instructionsElement);

        recipeContainer.appendChild(recipeElement);
    });
}

// Add Recipe Functionality

const recipeForm = document.getElementById('recipe-form') as HTMLFormElement | null;
const ingredientNameInput = document.getElementById('ingredientName') as HTMLInputElement | null;
const ingredientQuantityInput = document.getElementById('ingredientQuantity') as HTMLInputElement | null;
const addIngredientButton = document.getElementById('addIngredientButton') as HTMLButtonElement | null;
const ingredientsList = document.getElementById('ingredientsList') as HTMLUListElement | null;
const instructionInput = document.getElementById('instruction') as HTMLTextAreaElement | null;
const addInstructionButton = document.getElementById('addInstructionButton') as HTMLButtonElement | null;
const instructionsList = document.getElementById('instructionsList') as HTMLUListElement | null;

let ingredients: Ingredient[] = [];
let instructions: string[] = [];

if (addIngredientButton) {
    addIngredientButton.addEventListener('click', () => {
        if (ingredientNameInput && ingredientQuantityInput) {
            const ingredientName = ingredientNameInput.value;
            const ingredientQuantity = ingredientQuantityInput.value;
            if (ingredientName && ingredientQuantity) {
                ingredients.push({ name: ingredientName, quantity: ingredientQuantity });
                if (ingredientsList) {
                    const ingredientItem = document.createElement('li');
                    ingredientItem.textContent = `${ingredientName}: ${ingredientQuantity}`;
                    ingredientsList.appendChild(ingredientItem);
                }
                ingredientNameInput.value = '';
                ingredientQuantityInput.value = '';
            }
        }
    });
}

if (addInstructionButton) {
    addInstructionButton.addEventListener('click', () => {
        if (instructionInput) {
            const instructionText = instructionInput.value;
            if (instructionText) {
                instructions.push(instructionText);
                if (instructionsList) {
                    const instructionItem = document.createElement('li');
                    instructionItem.textContent = instructionText;
                    instructionsList.appendChild(instructionItem);
                }
                instructionInput.value = '';
            }
        }
    });
}

if (recipeForm) {
    recipeForm.addEventListener('submit', (event: Event) => {
        event.preventDefault(); // Prevent the default form submission

        const recipeNameInput = document.getElementById('recipeName') as HTMLInputElement | null;
        const imageUrlInput = document.getElementById('imageUrl') as HTMLInputElement | null;

        if (recipeNameInput) {
            const recipeName = recipeNameInput.value;
            const imageUrl = imageUrlInput?.value;

            if (recipeName) {
                const newRecipe: Recipe = {
                    name: recipeName,
                    ingredients: ingredients,
                    instructions: instructions,
                    imageUrl: imageUrl ? imageUrl : undefined,
                };

                recipes.push(newRecipe);
                displayRecipes(recipes);
                recipeForm.reset();
                ingredients = [];
                instructions = [];
                if (ingredientsList) ingredientsList.innerHTML = '';
                if (instructionsList) instructionsList.innerHTML = '';
            }
        }
    });
}

displayRecipes(recipes);

This code adds event listeners to the “Add Ingredient” button, the “Add Instruction” button, and the form’s submit event. It retrieves the input values from the form, creates new `Ingredient` and `Instruction` elements, and adds them to the appropriate lists. When the form is submitted, it creates a new `Recipe` object using the collected data, adds it to the `recipes` array, and re-renders the displayed recipes.

Adding Recipe Functionality: Editing and Deleting Recipes (Basic Implementation)

To enhance our recipe app, let’s add basic functionality for editing and deleting recipes. This will involve adding buttons to each recipe to trigger these actions.

First, modify the `displayRecipes` function to include “Edit” and “Delete” buttons for each recipe. We’ll also need to add event listeners to these buttons.


// src/index.ts (continued)

function displayRecipes(recipes: Recipe[]): void {
    const recipeContainer = document.getElementById('recipe-container');

    if (!recipeContainer) {
        console.error('recipe-container element not found');
        return;
    }

    recipeContainer.innerHTML = ''; // Clear existing content

    recipes.forEach((recipe, index) => {
        const recipeElement = document.createElement('div');
        recipeElement.classList.add('recipe');

        const nameElement = document.createElement('h3');
        nameElement.textContent = recipe.name;
        recipeElement.appendChild(nameElement);

        if (recipe.imageUrl) {
            const imageElement = document.createElement('img');
            imageElement.src = recipe.imageUrl;
            imageElement.alt = recipe.name;
            recipeElement.appendChild(imageElement);
        }

        const ingredientsElement = document.createElement('ul');
        recipe.ingredients.forEach((ingredient) => {
            const ingredientItem = document.createElement('li');
            ingredientItem.textContent = `${ingredient.name}: ${ingredient.quantity}`;
            ingredientsElement.appendChild(ingredientItem);
        });
        recipeElement.appendChild(ingredientsElement);

        const instructionsElement = document.createElement('ol');
        recipe.instructions.forEach((instruction) => {
            const instructionItem = document.createElement('li');
            instructionItem.textContent = instruction;
            instructionsElement.appendChild(instructionItem);
        });
        recipeElement.appendChild(instructionsElement);

        // Add Edit and Delete buttons
        const editButton = document.createElement('button');
        editButton.textContent = 'Edit';
        editButton.addEventListener('click', () => {
            // Implement edit functionality here (e.g., open a form to edit the recipe)
            console.log(`Edit recipe: ${recipe.name}`);
        });
        recipeElement.appendChild(editButton);

        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Delete';
        deleteButton.addEventListener('click', () => {
            // Implement delete functionality here
            if (confirm(`Are you sure you want to delete ${recipe.name}?`)) {
                recipes.splice(index, 1);
                displayRecipes(recipes);
            }
        });
        recipeElement.appendChild(deleteButton);

        recipeContainer.appendChild(recipeElement);
    });
}

In this updated `displayRecipes` function, we’ve added “Edit” and “Delete” buttons to each recipe element. The “Delete” button, when clicked, uses the `splice` method to remove the recipe from the `recipes` array and then re-renders the display. The “Edit” button currently just logs a message to the console; you would replace this with the logic to open an edit form and update the recipe data.

Error Handling and User Experience

While our application is functional, we can improve it by adding error handling and enhancing the user experience.

Error Handling:

Implement checks to ensure the user provides valid data (e.g., non-empty recipe names, valid ingredient quantities). Display error messages to the user if invalid data is entered. For example, you could add checks within the `submit` event listener of the form.

User Experience Enhancements:

  • Loading Indicator: Display a loading indicator while the recipes are being fetched or updated.
  • Confirmation Dialogs: Use confirmation dialogs before deleting recipes to prevent accidental deletions. (We’ve included this in the delete button implementation above)
  • Clearer Feedback: Provide visual feedback to the user after a recipe is added, edited, or deleted (e.g., a success message).
  • Styling and Layout: Improve the styling and layout of your application to make it more user-friendly. Use CSS to arrange elements, add spacing, and choose appropriate fonts.
  • Image Handling: Implement image preview and validation for image URLs.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when working with TypeScript and how to avoid them:

  1. Incorrect Type Annotations: Forgetting to add type annotations or using the wrong types can lead to unexpected behavior. Always double-check your types, especially when working with external data or complex objects. Use the `typeof` operator to infer types from existing variables.
  2. Ignoring Compiler Errors: The TypeScript compiler is your friend! Don’t ignore compiler errors; they are there to help you catch bugs early. Read the error messages carefully and fix the issues before running your code.
  3. Mixing JavaScript and TypeScript: While you can gradually migrate a JavaScript project to TypeScript, avoid mixing the two languages in the same file unless necessary. Use `.ts` files for TypeScript code and `.js` files for JavaScript (if needed for external libraries or legacy code).
  4. Not Understanding `tsconfig.json`: The `tsconfig.json` file is crucial for configuring the TypeScript compiler. Take the time to understand the different options and how they affect your project. Experiment with different settings to see how they impact your code.
  5. Not Using a Code Editor with TypeScript Support: Using a code editor with good TypeScript support (like VS Code) is essential. These editors provide features like autocompletion, type checking, and refactoring, which significantly improve your productivity.

Key Takeaways

  • TypeScript Enhances JavaScript: TypeScript adds static typing and other features to JavaScript, making your code more robust and maintainable.
  • Types Are Important: Defining types is crucial for catching errors early and improving code readability.
  • Use HTML, CSS, and JavaScript (or TypeScript) Together: Web applications are built using a combination of HTML for structure, CSS for styling, and JavaScript (or TypeScript) for functionality.
  • Start Simple and Iterate: Break down your project into smaller, manageable steps. Build a basic version of your application and then add more features incrementally.
  • Practice Makes Perfect: The best way to learn TypeScript is to practice. Build small projects, experiment with different features, and don’t be afraid to make mistakes.

FAQ

Q: What are the benefits of using TypeScript over JavaScript?

A: TypeScript offers type safety, improved code readability, a better developer experience (with features like autocompletion), and enhanced support for object-oriented programming, making it ideal for larger and more complex projects.

Q: How do I compile TypeScript code?

A: You compile TypeScript code using the TypeScript compiler (`tsc`). Run `npx tsc` in your project directory to compile all `.ts` files into `.js` files.

Q: Can I use TypeScript with existing JavaScript code?

A: Yes, you can gradually migrate a JavaScript project to TypeScript. TypeScript can infer types from existing JavaScript code. You can also use `.d.ts` files to describe the types of external JavaScript libraries.

Q: What are interfaces in TypeScript?

A: Interfaces define the structure of objects. They specify the properties and their types that an object must have. Interfaces provide a way to enforce a certain shape for your data, improving code consistency and maintainability.

Q: Where can I learn more about TypeScript?

A: The official TypeScript documentation is an excellent resource: [https://www.typescriptlang.org/docs/](https://www.typescriptlang.org/docs/). You can also find many online tutorials, courses, and articles on websites like MDN Web Docs, freeCodeCamp, and Udemy.

Building a web-based recipe application in TypeScript provides a solid foundation for understanding the language and its benefits. While this tutorial covers the basics, there’s always more to learn. Explore more advanced features like classes, modules, and asynchronous programming to further enhance your skills. Consider integrating a database for persistent storage and adding features like user authentication and recipe search to make your app even more functional. Continue to experiment, build, and learn, and you’ll find yourself well-equipped to tackle more complex TypeScript projects in the future. The ability to create dynamic, interactive web applications is a valuable skill in today’s software development landscape. Embrace the journey of learning and keep building!

More posts