TypeScript Tutorial: Building a Simple Interactive Recipe App

Written by

learnmodernjavascript

in

Are you a food enthusiast who loves to cook? Or perhaps a developer looking for a fun and practical project to sharpen your TypeScript skills? This tutorial is designed for you! We’ll embark on a journey to build a simple, yet functional, interactive recipe application. This project is not just about writing code; it’s about understanding how different parts of a web application work together, from data handling to user interaction. By the end of this tutorial, you’ll have a solid foundation in TypeScript, and a working recipe app to show for it.

Why Build a Recipe App?

Recipe apps are excellent projects for learning. They involve common programming concepts such as data structures (recipes, ingredients), user interface design (displaying recipes, inputting data), and event handling (responding to user actions). Moreover, building a recipe app offers a tangible, real-world application of TypeScript, allowing you to see the benefits of static typing and code organization firsthand. Plus, who doesn’t love having their own digital cookbook?

What You’ll Learn

In this tutorial, we will cover the following key concepts:

  • Setting up a TypeScript project
  • Defining data structures using interfaces
  • Implementing basic user interface elements
  • Handling user input and events
  • Working with arrays and objects to manage recipe data
  • Displaying data dynamically on the page

Prerequisites

Before we dive in, ensure you have the following:

  • A basic understanding of HTML, CSS, and JavaScript.
  • Node.js and npm (or yarn) installed on your system.
  • A code editor (like Visual Studio Code) to write your code.

Setting Up Your TypeScript Project

Let’s start by setting up our project. Open your terminal or command prompt and navigate to the directory where you want to create your project. Then, execute the following commands:

mkdir recipe-app
cd recipe-app
npm init -y
npm install typescript --save-dev
npx tsc --init

These commands do the following:

  • mkdir recipe-app: Creates a new directory for your project.
  • cd recipe-app: Navigates into the newly created directory.
  • npm init -y: Initializes a new Node.js project. The -y flag accepts the default settings.
  • npm install typescript --save-dev: Installs TypeScript as a development dependency.
  • npx tsc --init: Creates a tsconfig.json file, which configures the TypeScript compiler.

Next, open tsconfig.json in your code editor. You’ll want to make a few modifications to the default settings:

  • Set "outDir": "./dist". This tells the compiler where to put the compiled JavaScript files.
  • Set "sourceMap": true. This generates source map files, which help you debug your TypeScript code in the browser.
  • Set "module": "es6". This tells the compiler to use ES6 module syntax (import/export).
  • Set "target": "es5". This tells the compiler to compile to ES5 JavaScript, which is widely supported by browsers.

Save tsconfig.json. Now, let’s create our project files. Create a new file named index.html in your project root, and another file named src/app.ts. Your project structure should look like this:

recipe-app/
├── index.html
├── package.json
├── package-lock.json
├── tsconfig.json
└── src/
    └── app.ts

Populate index.html with basic HTML structure:

<!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>
</head>
<body>
    <h1>My Recipe App</h1>
    <div id="app"></div>
    <script src="dist/app.js"></script>
</body>
</html>

This sets up the basic HTML structure, including a title and a div with the id “app”, where our app will be rendered. It also includes a script tag to load the compiled JavaScript file (dist/app.js), which we’ll generate later.

Defining Data Structures with Interfaces

In TypeScript, interfaces define the shape of objects. Let’s define interfaces for our recipe and ingredient data. Open src/app.ts and add the following code:

// Define an interface for an ingredient
interface Ingredient {
  name: string;
  quantity: number;
  unit: string;
}

// Define an interface for a recipe
interface Recipe {
  name: string;
  ingredients: Ingredient[];
  instructions: string[];
}

Here, we define two interfaces: Ingredient and Recipe. The Ingredient interface has properties for the ingredient’s name, quantity, and unit. The Recipe interface has properties for the recipe’s name, an array of ingredients (using the Ingredient interface), and an array of instructions. This is crucial for type safety and code readability.

Implementing Basic UI Elements

Let’s create some simple UI elements to display our recipes. In src/app.ts, add the following code inside the existing code:

// Sample data (replace with your own recipes)
const recipes: Recipe[] = [
    {
        name: "Spaghetti Carbonara",
        ingredients: [
            { name: "Spaghetti", quantity: 200, unit: "g" },
            { name: "Eggs", quantity: 2, unit: "" },
            { name: "Pancetta", quantity: 100, unit: "g" },
            { name: "Parmesan", quantity: 50, unit: "g" },
        ],
        instructions: [
            "Cook spaghetti according to package directions.",
            "Fry pancetta until crispy.",
            "Whisk eggs and parmesan.",
            "Combine pasta, pancetta, and egg mixture.",
            "Serve immediately."
        ]
    }
];

// Function to display a recipe
function displayRecipe(recipe: Recipe): string {
    let ingredientsHTML = recipe.ingredients.map(ingredient => `<li>${ingredient.quantity} ${ingredient.unit} ${ingredient.name}</li>`).join('');
    let instructionsHTML = recipe.instructions.map(instruction => `<li>${instruction}</li>`).join('');

    return `
        <div class="recipe">
            <h3>${recipe.name}</h3>
            <h4>Ingredients</h4>
            <ul>${ingredientsHTML}</ul>
            <h4>Instructions</h4>
            <ul>${instructionsHTML}</ul>
        </div>
    `;
}

// Function to render the recipes
function renderRecipes(): void {
    const appElement = document.getElementById('app');
    if (appElement) {
        appElement.innerHTML = recipes.map(recipe => displayRecipe(recipe)).join('');
    }
}

// Call the render function on page load
window.onload = () => {
    renderRecipes();
};

This code does the following:

  • Defines a sample recipes array. This is where your recipe data will be stored.
  • Defines a displayRecipe function that takes a Recipe object and returns HTML to display it. This function uses map to generate the HTML for ingredients and instructions.
  • Defines a renderRecipes function that gets the “app” element from the HTML and renders all recipes using the displayRecipe function.
  • Adds an event listener to the window’s onload event to call the renderRecipes function when the page is loaded.

Now, compile your TypeScript code by running tsc in your terminal. This will create app.js and app.js.map in the dist folder. Open index.html in your browser. You should see the sample recipe displayed.

Handling User Input and Events

Let’s add a form to allow users to add new recipes. Add the following HTML inside the <body> tag of index.html, above the <div id="app">:

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

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

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

    <label for="ingredientUnit">Unit:</label>
    <input type="text" id="ingredientUnit" name="ingredientUnit"><br>

    <button type="button" id="addIngredient">Add Ingredient</button>
    <ul id="ingredientsList"></ul><br>

    <label for="instruction">Instruction:</label>
    <input type="text" id="instruction" name="instruction"><br>
    <button type="button" id="addInstruction">Add Instruction</button>
    <ul id="instructionsList"></ul><br>

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

This HTML creates a form with input fields for recipe name, ingredient details, and instructions. It also includes “Add Ingredient” and “Add Instruction” buttons to dynamically add ingredients and instructions to lists. Now, let’s add the JavaScript code to handle the form submission and add the new recipe to the recipes array. Add the following code to src/app.ts:

// Add ingredient functionality
const ingredients: Ingredient[] = [];
const ingredientListElement = document.getElementById('ingredientsList');
const addIngredientButton = document.getElementById('addIngredient');

if (addIngredientButton) {
    addIngredientButton.addEventListener('click', () => {
        const ingredientNameInput = document.getElementById('ingredientName') as HTMLInputElement;
        const ingredientQuantityInput = document.getElementById('ingredientQuantity') as HTMLInputElement;
        const ingredientUnitInput = document.getElementById('ingredientUnit') as HTMLInputElement;

        const ingredientName = ingredientNameInput.value;
        const ingredientQuantity = parseFloat(ingredientQuantityInput.value);
        const ingredientUnit = ingredientUnitInput.value;

        if (ingredientName && !isNaN(ingredientQuantity)) {
            const newIngredient: Ingredient = {
                name: ingredientName,
                quantity: ingredientQuantity,
                unit: ingredientUnit,
            };
            ingredients.push(newIngredient);
            if (ingredientListElement) {
                const ingredientItem = document.createElement('li');
                ingredientItem.textContent = `${ingredientQuantity} ${ingredientUnit} ${ingredientName}`;
                ingredientListElement.appendChild(ingredientItem);
            }

            // Clear input fields
            ingredientNameInput.value = '';
            ingredientQuantityInput.value = '';
            ingredientUnitInput.value = '';
        }
    });
}

// Add instruction functionality
const instructions: string[] = [];
const instructionsListElement = document.getElementById('instructionsList');
const addInstructionButton = document.getElementById('addInstruction');

if (addInstructionButton) {
    addInstructionButton.addEventListener('click', () => {
        const instructionInput = document.getElementById('instruction') as HTMLInputElement;
        const instructionText = instructionInput.value;

        if (instructionText) {
            instructions.push(instructionText);
            if (instructionsListElement) {
                const instructionItem = document.createElement('li');
                instructionItem.textContent = instructionText;
                instructionsListElement.appendChild(instructionItem);
            }
            instructionInput.value = ''; // Clear input field
        }
    });
}

// Handle form submission
const recipeForm = document.getElementById('recipeForm');

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

        const recipeNameInput = document.getElementById('recipeName') as HTMLInputElement;
        const recipeName = recipeNameInput.value;

        if (recipeName && ingredients.length > 0 && instructions.length > 0) {
            const newRecipe: Recipe = {
                name: recipeName,
                ingredients: ingredients,
                instructions: instructions,
            };

            recipes.push(newRecipe);
            renderRecipes(); // Re-render the recipes

            // Clear the form
            recipeNameInput.value = '';
            ingredients.length = 0;
            instructions.length = 0;
            // Clear the ingredient list display
            if (ingredientListElement) {
                ingredientListElement.innerHTML = '';
            }
            // Clear the instruction list display
            if (instructionsListElement) {
                instructionsListElement.innerHTML = '';
            }
        }
    });
}

This code does the following:

  • Gets references to the form elements.
  • Adds event listeners to the “Add Ingredient” and “Add Instruction” buttons. When clicked, it adds the ingredient/instruction to their respective lists and displays them in the UI.
  • Adds an event listener to the form’s “submit” event. When the form is submitted, it creates a new Recipe object using the data from the form, adds the recipe to the recipes array, calls renderRecipes to update the display, and clears the form.

Compile your TypeScript code and refresh your browser. You should now be able to add new recipes to the app.

Working with Arrays and Objects

The core of our recipe app involves managing arrays of ingredients and instructions within the Recipe objects. Let’s delve deeper into how we’re using arrays and objects to store and manipulate recipe data. The recipes array is an array of Recipe objects. Each Recipe object contains an array of Ingredient objects and an array of strings (for instructions). When you add a new recipe, you are essentially:

  1. Creating a new Recipe object.
  2. Populating the Recipe object with data from the form (recipe name, ingredients array, instructions array).
  3. Adding the new Recipe object to the recipes array.

When you display the recipes, you iterate over the recipes array using the map method. For each recipe, you generate the HTML to display the recipe’s name, ingredients, and instructions. The map method is crucial for transforming the array of recipe objects into an array of HTML strings.

The code also utilizes the Ingredient interface, which is an object. Each Ingredient object contains properties like name, quantity, and unit. These properties define the structure of the data for each ingredient. The displayRecipe function uses template literals (backticks) to create the HTML for each recipe, dynamically inserting the values from the recipe and ingredient objects into the HTML. This is a powerful way to generate dynamic content based on your data.

Displaying Data Dynamically

Dynamic data display is a key aspect of any web application. In our recipe app, we dynamically display recipes and their ingredients and instructions. The renderRecipes function is the core of this process. It takes the following steps:

  1. Gets the HTML element with the ID “app”.
  2. Uses the map method to iterate over the recipes array.
  3. For each recipe, calls the displayRecipe function to generate the HTML for that recipe.
  4. Joins the array of HTML strings into a single string.
  5. Sets the innerHTML of the “app” element to the generated HTML string.

This means that whenever the recipes array changes (e.g., when a new recipe is added), the renderRecipes function is called to update the display. This approach ensures that the UI always reflects the current state of the data. The use of template literals (backticks) makes it easy to create HTML strings with dynamic data. For example, the following line:

`<li>${ingredient.quantity} ${ingredient.unit} ${ingredient.name}</li>`

creates an HTML list item (<li>) for each ingredient, dynamically inserting the ingredient’s quantity, unit, and name.

Common Mistakes and How to Fix Them

When working on this project, you might encounter some common mistakes. Here are a few and how to resolve them:

  • Type Errors: TypeScript’s type system can be strict. If you get type errors, carefully check the types of your variables and function parameters. Make sure they match the interfaces you’ve defined. For example, if you’re trying to assign a string to a variable that expects a number, TypeScript will flag this as an error.
  • Incorrect HTML Structure: Double-check your HTML structure. Missing closing tags or incorrect nesting can cause display issues. Use your browser’s developer tools (usually accessed by right-clicking on the page and selecting “Inspect”) to examine the HTML and identify any problems.
  • Event Listener Issues: Ensure your event listeners are correctly attached to the elements. If the event listener is not firing, verify that the element exists in the DOM and that you’re using the correct event (e.g., “click”, “submit”). Also, make sure that you’re not accidentally preventing the default behavior of the event (e.g., using event.preventDefault() on a button that’s not supposed to submit a form).
  • Data Display Problems: If your data isn’t displaying correctly, check the following:
    • That the data is being added to the correct array (e.g., the recipes array).
    • That the renderRecipes function is being called after the data is updated.
    • That the HTML generated by the displayRecipe function is correct.
  • Form Submission Issues: If your form isn’t submitting or is submitting and refreshing the page unexpectedly, make sure that you’re preventing the default form submission behavior using event.preventDefault().

Key Takeaways

This tutorial has provided a practical introduction to building a simple, interactive recipe app using TypeScript. We’ve covered the following key takeaways:

  • Setting up a TypeScript project and configuring the compiler.
  • Defining data structures using interfaces to ensure type safety.
  • Implementing basic UI elements and handling user input.
  • Using arrays and objects to manage recipe data.
  • Dynamically displaying data on the page.

By building this app, you’ve gained hands-on experience with fundamental TypeScript concepts. This foundation will be invaluable as you tackle more complex web development projects.

FAQ

Here are some frequently asked questions:

  1. Can I add more features to this app? Absolutely! You can expand this app by adding features like editing recipes, deleting recipes, searching for recipes, and more.
  2. How can I store the recipes permanently? To persist the recipes, you can use local storage, a database (like Firebase or MongoDB), or a backend API.
  3. How can I style the app? You can add CSS styles to make the app more visually appealing. You can either write your own CSS or use a CSS framework like Bootstrap or Tailwind CSS.
  4. What are some good resources for learning more TypeScript? The official TypeScript documentation, online courses (like those on Udemy, Coursera, or freeCodeCamp), and articles on websites like Medium and Dev.to are excellent resources.

Remember, the best way to learn is by doing. Experiment with the code, try adding new features, and don’t be afraid to make mistakes. Each error is an opportunity to learn and grow.

As you continue your journey, consider exploring more advanced TypeScript features, such as generics, decorators, and advanced types. These features can help you write even more robust and maintainable code. The world of web development is constantly evolving, so keep learning, keep building, and keep pushing your boundaries. The skills you’ve acquired in this tutorial will serve as a solid base for your future endeavors in the world of TypeScript and web development. Now, go forth and create delicious digital recipes!

More posts