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'

2. 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`: