Blog Post 2: TypeScript Basics and Our First POS Component

Welcome back! In this post, we’ll cover some TypeScript basics and create our first component for the Restaurant POS system.

Let’s start with some key TypeScript concepts:

1. Static Typing
   TypeScript’s main advantage is its static typing system. Let’s look at an example:

    let tableNumber: number = 5;
    let serverName: string = “John Doe”;
    let isOccupied: boolean = false;
    // This would cause a compile-time error
    // tableNumber = "Six"; // Type 'string' is not assignable to type 'number'

1. Interfaces
   Interfaces allow us to define the structure of objects:

    interface MenuItem {
     id: number;
     name: string;
     price: number;
     category: string;
    }
    const burger: MenuItem = {
     id: 1,
     name: "Cheeseburger",
     price: 9.99,
     category: "Main Course"
    };

Now, let’s create our first component: a simple menu item display.

Create a new file src/components/MenuItem.tsx:

import React from ‘react’;
interface MenuItemProps {
 id: number;
 name: string;
 price: number;
 category: string;
}
const MenuItem: React.FC<MenuItemProps> = ({ id, name, price, category }) => {
 return (
 <div className="menu-item">
 <h3>{name}</h3>
 <p>Price: ${price.toFixed(2)}</p>
 <p>Category: {category}</p>
 </div>
 );
};
export default MenuItem;

Now, let’s use this component in our App.tsx:

import React from ‘react’;
import MenuItem from ‘./components/MenuItem’;
const App: React.FC = () => {
 const sampleMenuItem = {
 id: 1,
 name: "Cheeseburger",
 price: 9.99,
 category: "Main Course"
 };
return (
 <div className="App">
 <h1>Restaurant POS</h1>
 <MenuItem {…sampleMenuItem} />
 </div>
 );
};
export default App;

This example demonstrates how TypeScript helps us ensure that we’re passing the correct props to our components. If we tried to pass an invalid prop or omit a required one, TypeScript would alert us at compile-time.

In our next blog post, we’ll expand on this by creating a menu list component and introduce some more advanced TypeScript concepts like generics and union types.

To wrap up, let’s visualize the component structure we’ve created so far:

This diagram shows our current simple structure, with the App component rendering a MenuItem component. As we progress, we’ll see this structure grow more complex.

Stay tuned for our next post where we’ll dive deeper into TypeScript and expand our POS system’s functionality!