Real World Example

A food delivery listing page (Swiggy, Zomato) receives restaurants from an API. Interfaces define the contract between the backend and the front end teams.

Example

interface Listing {
  id: string;
  name: string;
  rating: number;
}

interface Restaurant extends Listing {
  cuisines: string[];
  deliveryMinutes: number;
  pureVeg?: boolean;
}

function card(r: Restaurant): string {
  const veg = r.pureVeg ? " [VEG]" : "";
  return `${r.name}${veg} | ${r.rating.toFixed(1)} stars | ${r.cuisines.join(", ")} | ${r.deliveryMinutes} min`;
}

const restaurants: Restaurant[] = [
  { id: "r1", name: "Meghana Foods", rating: 4.5, cuisines: ["Biryani", "Andhra"], deliveryMinutes: 32 },
  { id: "r2", name: "Udupi Grand", rating: 4.2, cuisines: ["South Indian"], deliveryMinutes: 25, pureVeg: true },
];

restaurants
  .sort((a, b) => a.deliveryMinutes - b.deliveryMinutes)
  .forEach((r) => console.log(card(r)));

Output

Udupi Grand [VEG] | 4.2 stars | South Indian | 25 min
Meghana Foods | 4.5 stars | Biryani, Andhra | 32 min

Restaurant Listing Contracts

Example