TypeScript with React

npm create vite@latest brew-ts -- --template react-ts
cd brew-ts
npm install
npm run dev

// Basic types
const shopName: string = 'Brew & Bean';
const price: number = 120;
const isOpen: boolean = true;
const tags: string[] = ['coffee', 'hot'];

// TypeScript can usually work the type out itself: no label needed
const city = 'Bengaluru'; // inferred as string

// An object shape: a type alias
type MenuItem = {
  id: string;
  name: string;
  category: 'coffee' | 'tea' | 'bakery' | 'food'; // union of allowed values
  price: number;
  description?: string; // ? means optional
};

const espresso: MenuItem = {
  id: 'espresso',
  name: 'Espresso',
  category: 'coffee',
  price: 120,
};

// Function with typed parameters and return type
function withGst(amount: number, rate: number = 5): number {
  return amount + (amount * rate) / 100;
}

export type Category = 'coffee' | 'tea' | 'bakery' | 'food';

export type MenuItem = {
  id: string;
  name: string;
  category: Category;
  price: number;
};

export type OrderStatus =
  | 'received'
  | 'preparing'
  | 'ready'
  | 'picked_up'
  | 'cancelled';

export type OrderLine = {
  item_id: string;
  qty: number;
};

export type Order = {
  id: string;
  customer_name: string;
  phone: string;
  items: OrderLine[];
  total: number;
  status: OrderStatus;
  pickup_time: string;
  created_at: string;
};

import type { MenuItem } from './types';

type MenuCardProps = {
  item: MenuItem;
  soldOut?: boolean;
  onAdd: (itemId: string) => void;
};

function MenuCard({ item, soldOut = false, onAdd }: MenuCardProps) {
  return (
    <article>
      <h3>{item.name}</h3>
      <p>
        {item.category} - ₹{item.price}
      </p>
      <button disabled={soldOut} onClick={() => onAdd(item.id)}>
        {soldOut ? 'Sold out' : 'Add'}
      </button>
    </article>
  );
}

export default MenuCard;

import { useEffect, useState } from 'react';
import MenuCard from './MenuCard';
import type { MenuItem } from './types';

function MenuPage() {
  const [menu, setMenu] = useState<MenuItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [cart, setCart] = useState<Record<string, number>>({});

  useEffect(() => {
    const controller = new AbortController();

    async function load() {
      try {
        const response = await fetch('/menu.json', { signal: controller.signal });
        if (!response.ok) throw new Error('Status ' + response.status);
        const data: MenuItem[] = await response.json();
        setMenu(data);
        setLoading(false);
      } catch (err) {
        if (err instanceof DOMException && err.name === 'AbortError') return;
        setError(err instanceof Error ? err.message : 'Unknown error');
        setLoading(false);
      }
    }

    load();
    return () => controller.abort();
  }, []);

  function addToCart(itemId: string) {
    setCart((current) => ({ ...current, [itemId]: (current[itemId] ?? 0) + 1 }));
  }

  if (loading) return <p>Loading...</p>;
  if (error) return <p role="alert">{error}</p>;

  return (
    <section>
      <h1>Menu</h1>
      {menu.map((item) => (
        <MenuCard key={item.id} item={item} onAdd={addToCart} />
      ))}
      <p>Items in cart: {Object.values(cart).reduce((a, b) => a + b, 0)}</p>
    </section>
  );
}

export default MenuPage;

import { useState } from 'react';
import type { ChangeEvent, FormEvent } from 'react';

type FormValues = {
  customer_name: string;
  phone: string;
  qty: number;
};

function OrderForm() {
  const [values, setValues] = useState<FormValues>({
    customer_name: '',
    phone: '',
    qty: 1,
  });

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    const { name, value, type } = event.target;
    setValues((previous) => ({
      ...previous,
      [name]: type === 'number' ? Number(value) : value,
    }));
  }

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    console.log('Order', values);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="customer_name">Name</label>
      <input
        id="customer_name"
        name="customer_name"
        value={values.customer_name}
        onChange={handleChange}
      />
      <label htmlFor="phone">Mobile</label>
      <input id="phone" name="phone" value={values.phone} onChange={handleChange} />
      <label htmlFor="qty">Quantity</label>
      <input
        id="qty"
        name="qty"
        type="number"
        min="1"
        value={values.qty}
        onChange={handleChange}
      />
      <button type="submit">Place order</button>
    </form>
  );
}

export default OrderForm;

import { useEffect, useState } from 'react';

type FetchState<T> = {
  data: T | null;
  loading: boolean;
  error: string | null;
};

export function useFetch<T>(url: string): FetchState<T> {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const controller = new AbortController();
    setLoading(true);
    setError(null);

    async function load() {
      try {
        const response = await fetch(url, { signal: controller.signal });
        if (!response.ok) throw new Error('Status ' + response.status);
        setData((await response.json()) as T);
        setLoading(false);
      } catch (err) {
        if (err instanceof DOMException && err.name === 'AbortError') return;
        setError(err instanceof Error ? err.message : 'Unknown error');
        setLoading(false);
      }
    }

    load();
    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

I am learning React with TypeScript. I get this error in my editor:

[paste the full error message]

Here is the code around it:

---
[paste about 20 lines]
---

Explain in plain English what the error means, why TypeScript is complaining, and show the smallest fix that keeps the types strict. Do not use `any` or `@ts-ignore`.