TypeScript: Building a Simple Recipe Management App

Written by

learnmodernjavascript

in

Are you tired of flipping through cookbooks or scrolling endlessly through websites to find that perfect recipe? Or perhaps you have a collection of family recipes scattered across different notebooks and digital files? In today’s digital age, managing your recipes efficiently is more important than ever. That’s where a recipe management application comes in handy. This tutorial will guide you through building a simple, yet functional, recipe management app using TypeScript.

Why TypeScript for a Recipe App?

TypeScript brings several benefits that make it an excellent choice for this project:

  • Type Safety: TypeScript’s static typing helps catch errors early in development, reducing the chance of runtime bugs. This is crucial when dealing with recipe data, ensuring consistency and accuracy.
  • Code Readability: TypeScript improves code readability and maintainability. With clear type annotations, it’s easier to understand the purpose of variables, function parameters, and return types.
  • Developer Experience: TypeScript provides better autocompletion, refactoring, and other IDE features, leading to a more productive development experience.
  • Scalability: As your recipe app grows, TypeScript’s type system helps manage complexity and ensures that changes don’t break existing functionality.

Setting Up the Project

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

First, create a new directory for your project and navigate into it:

mkdir recipe-app
cd recipe-app

Next, initialize a new npm project:

npm init -y

This command creates a package.json file, which will manage our project dependencies. Now, let’s install TypeScript and initialize a TypeScript configuration file:

npm install typescript --save-dev
npx tsc --init

The --save-dev flag tells npm to save TypeScript as a development dependency. The npx tsc --init command generates a tsconfig.json file, which configures how TypeScript compiles your code. Open tsconfig.json and make the following changes:

  • Set "target": "es2015" (or a later version) to specify the JavaScript version to compile to.
  • Set "module": "commonjs" (or a suitable module system for your environment).
  • Set "outDir": "./dist" to specify the output directory for the compiled JavaScript files.
  • Ensure "strict": true is enabled for strict type checking.

These settings are a good starting point for a TypeScript project. Feel free to adjust them based on your project’s specific needs.

Creating the Recipe Model

The heart of our recipe app is the recipe data itself. Let’s create a Recipe interface to define the structure of a recipe. Create a new file named recipe.ts in a src directory (create the directory if it doesn’t exist).

// src/recipe.ts

export interface Recipe {
  id: string;
  name: string;
  ingredients: string[];
  instructions: string[];
  prepTime: number; // in minutes
  cookTime: number; // in minutes
  cuisine?: string; // Optional field
  servings?: number; // Optional field
}

In this interface:

  • id: A unique identifier for the recipe (string).
  • name: The name of the recipe (string).
  • ingredients: An array of strings representing the ingredients.
  • instructions: An array of strings representing the steps to prepare the recipe.
  • prepTime: The preparation time in minutes (number).
  • cookTime: The cooking time in minutes (number).
  • cuisine: The cuisine type (optional string).
  • servings: The number of servings (optional number).

Using an interface ensures that all recipe objects adhere to a consistent structure. The optional fields (cuisine and servings) are denoted by the ? symbol.

Implementing the Recipe Management Logic

Now, let’s create a class to manage our recipes. Create a new file named recipeManager.ts in the src directory.

// src/recipeManager.ts
import { Recipe } from './recipe';

export class RecipeManager {
  private recipes: Recipe[] = [];

  addRecipe(recipe: Recipe): void {
    // Basic validation to prevent duplicate IDs
    if (this.recipes.some(r => r.id === recipe.id)) {
      throw new Error("Recipe with this ID already exists.");
    }
    this.recipes.push(recipe);
    console.log(`Recipe '${recipe.name}' added.`);
  }

  getRecipe(id: string): Recipe | undefined {
    return this.recipes.find(recipe => recipe.id === id);
  }

  getAllRecipes(): Recipe[] {
    return this.recipes;
  }

  updateRecipe(id: string, updatedRecipe: Partial<Recipe>): void {
    const index = this.recipes.findIndex(recipe => recipe.id === id);
    if (index === -1) {
      throw new Error("Recipe not found.");
    }
    // Using Object.assign to update the recipe
    this.recipes[index] = Object.assign({}, this.recipes[index], updatedRecipe);
    console.log(`Recipe with ID '${id}' updated.`);
  }

  deleteRecipe(id: string): void {
    this.recipes = this.recipes.filter(recipe => recipe.id !== id);
    console.log(`Recipe with ID '${id}' deleted.`);
  }
}

In this class:

  • recipes: An array to store the recipe objects.
  • addRecipe(recipe: Recipe): Adds a new recipe to the recipes array, including a check for duplicate IDs.
  • getRecipe(id: string): Retrieves a recipe by its ID.
  • getAllRecipes(): Returns all recipes in the array.
  • updateRecipe(id: string, updatedRecipe: Partial<Recipe>): Updates an existing recipe by ID. The Partial<Recipe> type allows updating only specific properties of the recipe.
  • deleteRecipe(id: string): Removes a recipe by its ID.

Creating a Simple User Interface (CLI)

For this tutorial, we’ll create a simple command-line interface (CLI) to interact with our recipe app. This will allow us to add, view, update, and delete recipes. Create a new file named index.ts in the src directory.

// src/index.ts
import * as readline from 'readline';
import { RecipeManager } from './recipeManager';
import { Recipe } from './recipe';

const recipeManager = new RecipeManager();
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

function askQuestion(query: string): Promise<string> {
  return new Promise(resolve => rl.question(query, resolve));
}

async function addRecipe() {
  const id = await askQuestion('Enter recipe ID: ');
  const name = await askQuestion('Enter recipe name: ');
  const ingredientsStr = await askQuestion('Enter ingredients (comma-separated): ');
  const instructionsStr = await askQuestion('Enter instructions (comma-separated): ');
  const prepTimeStr = await askQuestion('Enter prep time (in minutes): ');
  const cookTimeStr = await askQuestion('Enter cook time (in minutes): ');

  const ingredients = ingredientsStr.split(',').map(s => s.trim());
  const instructions = instructionsStr.split(',').map(s => s.trim());
  const prepTime = parseInt(prepTimeStr, 10);
  const cookTime = parseInt(cookTimeStr, 10);

  const newRecipe: Recipe = {
    id,
    name,
    ingredients,
    instructions,
    prepTime,
    cookTime,
  };

  try {
    recipeManager.addRecipe(newRecipe);
    console.log('Recipe added successfully!');
  } catch (error: any) {
    console.error(error.message);
  }
}

async function viewRecipe() {
  const id = await askQuestion('Enter recipe ID to view: ');
  const recipe = recipeManager.getRecipe(id);
  if (recipe) {
    console.log(recipe);
  } else {
    console.log('Recipe not found.');
  }
}

async function listRecipes() {
  const recipes = recipeManager.getAllRecipes();
  if (recipes.length === 0) {
    console.log('No recipes found.');
  } else {
    console.table(recipes);
  }
}

async function updateRecipe() {
  const id = await askQuestion('Enter recipe ID to update: ');
  const name = await askQuestion('Enter new recipe name (leave blank to skip): ');
  const ingredientsStr = await askQuestion('Enter new ingredients (comma-separated, leave blank to skip): ');
  const instructionsStr = await askQuestion('Enter new instructions (comma-separated, leave blank to skip): ');
  const prepTimeStr = await askQuestion('Enter new prep time (in minutes, leave blank to skip): ');
  const cookTimeStr = await askQuestion('Enter new cook time (in minutes, leave blank to skip): ');

  const updatedRecipe: Partial<Recipe> = {};

  if (name) updatedRecipe.name = name;
  if (ingredientsStr) updatedRecipe.ingredients = ingredientsStr.split(',').map(s => s.trim());
  if (instructionsStr) updatedRecipe.instructions = instructionsStr.split(',').map(s => s.trim());
  if (prepTimeStr) updatedRecipe.prepTime = parseInt(prepTimeStr, 10);
  if (cookTimeStr) updatedRecipe.cookTime = parseInt(cookTimeStr, 10);

  try {
    recipeManager.updateRecipe(id, updatedRecipe);
    console.log('Recipe updated successfully!');
  } catch (error: any) {
    console.error(error.message);
  }
}

async function deleteRecipe() {
  const id = await askQuestion('Enter recipe ID to delete: ');
  try {
    recipeManager.deleteRecipe(id);
    console.log('Recipe deleted successfully!');
  } catch (error: any) {
    console.error(error.message);
  }
}

async function main() {
  while (true) {
    const answer = await askQuestion(
      'What would you like to do? (add/view/list/update/delete/exit): '
    );

    switch (answer.toLowerCase()) {
      case 'add':
        await addRecipe();
        break;
      case 'view':
        await viewRecipe();
        break;
      case 'list':
        await listRecipes();
        break;
      case 'update':
        await updateRecipe();
        break;
      case 'delete':
        await deleteRecipe();
        break;
      case 'exit':
        rl.close();
        return;
      default:
        console.log('Invalid command.');
    }
  }
}

main();

This code does the following:

  • Imports necessary modules (readline, RecipeManager, and Recipe).
  • Creates a RecipeManager instance.
  • Sets up a readline interface for user input.
  • Defines an askQuestion function to handle user input prompts.
  • Implements functions for adding, viewing, listing, updating, and deleting recipes.
  • The main function presents a menu to the user and calls the appropriate functions based on user input.

Compiling and Running the App

Now that we’ve written our code, let’s compile and run the application. Open your terminal and navigate to your project directory. Then, run the following command to compile the TypeScript code:

tsc

This command will compile all TypeScript files in the src directory and generate corresponding JavaScript files in the dist directory.

To run the application, execute the following command:

node dist/index.js

You should now see the CLI menu in your terminal. You can start adding, viewing, updating, and deleting recipes. Try adding a few recipes to test the functionality.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect Type Annotations: Ensure your type annotations are accurate. TypeScript will catch type errors during compilation. Review the error messages and correct the types accordingly.
  • Missing Imports: Always import the necessary modules. TypeScript will highlight missing imports during compilation.
  • Incorrect File Paths: Double-check your file paths when importing modules. Incorrect paths will result in import errors.
  • Unhandled Errors: When working with asynchronous operations (e.g., user input), handle potential errors using try...catch blocks.
  • Ignoring Compiler Warnings: Pay attention to TypeScript compiler warnings. They often indicate potential issues that can lead to runtime errors.

Enhancements and Next Steps

This simple recipe app is a good starting point. Here are some ideas for further development:

  • Data Persistence: Implement data persistence using local storage, a file system, or a database (e.g., SQLite, MongoDB).
  • User Interface: Create a more user-friendly interface using a framework like React, Angular, or Vue.js.
  • Search and Filtering: Add search and filtering capabilities to find recipes based on keywords, ingredients, or cuisine.
  • Recipe Categories: Implement recipe categories to organize recipes more effectively.
  • User Authentication: Add user authentication to allow multiple users to manage their recipes.
  • Import/Export: Add the ability to import and export recipes in formats like JSON or CSV.

Summary / Key Takeaways

In this tutorial, we’ve built a basic recipe management application using TypeScript. We’ve covered setting up the project, creating a recipe model with an interface, implementing a recipe manager class, and building a simple command-line interface. We’ve also discussed common mistakes and provided suggestions for further enhancements. By using TypeScript, we’ve ensured type safety, improved code readability, and enhanced the overall development experience.

FAQ

Q: Why use TypeScript for this project?
A: TypeScript provides type safety, improves code readability, enhances developer experience, and aids in code maintainability and scalability.

Q: How do I handle errors in TypeScript?
A: Use try...catch blocks to handle potential errors, especially when dealing with asynchronous operations or user input.

Q: Can I use a different UI than the CLI?
A: Yes, you can. You can create a web-based UI using frameworks like React, Angular, or Vue.js to provide a more user-friendly experience.

Q: How can I store the recipes permanently?
A: You can use local storage, a file system, or a database (like SQLite or MongoDB) to store the recipes persistently.

Q: Where can I find more information about TypeScript?
A: The official TypeScript documentation is an excellent resource: https://www.typescriptlang.org/docs/

Building a recipe management app in TypeScript is a great way to learn and practice TypeScript concepts. It provides a practical application of type safety, object-oriented programming, and user interaction. This project can easily be expanded upon, offering numerous opportunities to enhance your TypeScript skills and create a valuable tool for managing your recipes. This simple foundation allows you to experiment, learn, and grow as a developer, turning a basic project into something truly useful.

More posts