11.14-bob: TypeScript bilan React

  JAVASCRIPT (xato ish vaqtida — foydalanuvchi ko'radi):
  <UserCard name={user.nam} />        // "nam" — xato (name kerak)  undefined  bug
  function UserCard({ name, age }) { return <h2>{nme}</h2>; }   // "nme" — xato  crash
  //  bu xatolar FAQAT ilova ishlaganda (yoki umuman) seziladi

  TYPESCRIPT (xato KOD yozayotganda — muharrirda qizil):
  interface Props { name: string; age: number; }
  <UserCard name={user.nam} />        //  muharrir DARROV: "nam mavjud emas"
  function UserCard({ name, age }: Props) { return <h2>{nme}</h2>; }  //  "nme topilmadi"

  3 ASOSIY FOYDA:
   Xato compile paytida (foydalanuvchi ko'rishidan OLDIN)
   Autocomplete (har props/metod/maydon taklif qilinadi — tez yozish)
   Refactoring xavfsiz (nom o'zgarsa — barcha ishlatish joyi topiladi)

   TS — React'da xatolarni ERTA (yozaytganda) tutadi (JS — kech, ish vaqtida)
   Turlar — "jonli hujjat" (komponentni qanday ishlatish — kodda ko'rinadi)

  YANGI LOYIHA (TS bilan — 11.3):
  npm create vite@latest my-app -- --template react-ts   # React + TypeScript

  FAYL KENGAYTMASI:
  .tsx — JSX'li TypeScript fayl (komponentlar)         // React komponent  .tsx
  .ts  — JSX'siz TypeScript (util, hook, types)         // oddiy mantiq  .ts

  TURLAR (@types — kutubxonalar uchun):
  - react, react-dom turlari — react-ts shablonda avtomatic
  - boshqa kutubxona: npm i -D @types/<paket>  (agar o'zi TS bermasa)

  tsconfig.json (asosiy sozlamalar — 7.1):
  "jsx": "react-jsx",          // yangi JSX transform (import React kerak emas — 11.2)
  "strict": true,              // qattiq tekshiruv (tavsiya — barcha himoya)

  ┌────────────────────────────────────────────────────────────┐
  │ Komponent  .tsx | Mantiq/util/types  .ts                 │
  │ react-ts shablon — turlar va sozlama tayyor                 │
  └────────────────────────────────────────────────────────────┘

   react-ts shablon 11.3-bob — turlar, tsconfig, sozlama tayyor (qo'lda sozlash kerak emas)
   strict: true — barcha himoyani yoq (null tekshiruv, implicit any yo'q — 7.1)

  PROPS TURI — interface yoki type bilan (komponentga kiruvchi ma'lumot):

  // interface bilan (keng ishlatiladi):
  interface ButtonProps {
    text: string;
    variant: "primary" | "danger";    // union — faqat shu qiymatlar 7.4-bob
    disabled?: boolean;                // ? — ixtiyoriy
    onClick: () => void;               // funksiya turi
  }
  function Button({ text, variant, disabled, onClick }: ButtonProps) {
    return <button className={variant} disabled={disabled} onClick={onClick}>{text}</button>;
  }

  // type bilan (ekvivalent — ko'pincha union/utility uchun):
  type ButtonProps = { text: string; variant: "primary" | "danger" };

  INTERFACE vs TYPE (React props uchun):
  - interface — kengaytiriladigan (extends), object shakli uchun (an'anaviy)
  - type — union, intersection, utility types uchun (moslashuvchanroq — 7.2)
   ikkalasi ham ishlaydi; izchillik muhim (jamoa tanlovi)

   Props turi — komponentning "shartnomasi" (qanday ishlatish — autocomplete + tekshiruv)
   ? — ixtiyoriy prop; union ("a"|"b") — faqat ruxsat etilgan qiymatlar (7.4)

  CHILDREN — komponent ichidagi JSX (11.2: 2.8) — turi ReactNode:

  interface CardProps {
    title: string;
    children: React.ReactNode;        //  ReactNode — JSX, matn, raqam, array, null... (hammasi)
  }
  function Card({ title, children }: CardProps) {
    return <div className="card"><h3>{title}</h3>{children}</div>;
  }

  CHILDREN TURLARI (qaysi birini qachon):
  - React.ReactNode — eng keng (JSX, string, number, array, null — odatda SHU)
  - React.ReactElement — faqat JSX element (string/null emas — kamroq)
  - (children?: ReactNode) — ixtiyoriy children

  PropsWithChildren (yordamchi — children'ni avtomatik qo'shadi):
  function Card({ title, children }: React.PropsWithChildren<{ title: string }>) {...}

   children turi — deyarli har doim React.ReactNode (eng moslashuvchan)
   PropsWithChildren<Props> — children'ni qo'lda yozmasdan qo'shadi (qulay)

  useState — TURNI ko'pincha O'ZI ANGLAYDI (inference), ba'zan qo'lda:

  // 1. INFERENCE (TS boshlang'ich qiymatdan turni ANGLAYDI — qo'lda kerak emas):
  const [count, setCount] = useState(0);         // number (0 dan)
  const [name, setName] = useState("");          // string
  const [open, setOpen] = useState(false);       // boolean

  // 2. GENERIC (murakkab tur — qo'lda belgila):
  const [user, setUser] = useState<User | null>(null);   // User obyekt yoki null
  const [items, setItems] = useState<Product[]>([]);     // Product massivi
  //  useState<T>(boshlang'ich) — T turni aniq beradi

  // 3. UNION (bir nechta holat):
  const [status, setStatus] = useState<"idle" | "loading" | "error">("idle");

  QACHON GENERIC kerak:
  - boshlang'ich null/bo'sh ([]) — TS turni anglay olmaydi (null/never[])
  - union turi (status — bir nechta qiymat)

   Oddiy qiymat (0, "", false) — inference yetadi (generic kerak emas)
   null/bo'sh massiv/union — generic kerak: useState<User|null>(null), useState<T[]>([])

  useRef — ikki xil ishlatish (11.5: 2.12, 2.13), ikki xil tur:

  // 1. DOM REF (element turi + null — boshlang'ich):
  const inputRef = useRef<HTMLInputElement>(null);   // <input> elementi (yoki null)
  inputRef.current?.focus();                          // ?. — null bo'lishi mumkin (render'dan oldin)
  // DOM tur: HTMLInputElement, HTMLDivElement, HTMLButtonElement... (element'ga mos)

  // 2. MUTABLE QIYMAT (render'siz qiymat — 11.5: 2.13):
  const countRef = useRef<number>(0);                // number (boshlang'ich 0)
  const timerRef = useRef<number | null>(null);      // interval ID (number yoki null)
  countRef.current += 1;                              // .current — to'g'ridan o'zgartiriladi

  DOM TUR QANDAY TOPISH:
  <input>  HTMLInputElement | <div>  HTMLDivElement | <button>  HTMLButtonElement
  <form>  HTMLFormElement | <a>  HTMLAnchorElement | <canvas>  HTMLCanvasElement

   DOM ref: useRef<HTMLXElement>(null) — null boshlang'ich (DOM render'dan keyin to'ladi)
   inputRef.current?.focus() — ?. (null tekshiruv — strict mode — 2.5)

  useReducer — state turi + action turi (discriminated union — 7.4):

  interface State { count: number; loading: boolean; }

  type Action =                          //  discriminated union — har action o'z shakli
    | { type: "increment" }
    | { type: "decrement" }
    | { type: "set"; payload: number }   // payload faqat shu action'da
    | { type: "loading"; payload: boolean };

  function reducer(state: State, action: Action): State {   // turlar — type-safe
    switch (action.type) {
      case "increment": return { ...state, count: state.count + 1 };
      case "set": return { ...state, count: action.payload };   // payload — number (TS biladi)
      case "loading": return { ...state, loading: action.payload };   // payload — boolean
      default: return state;
    }
  }

  const [state, dispatch] = useReducer(reducer, { count: 0, loading: false });
  dispatch({ type: "set", payload: 5 });     //  type-safe (payload number kerak)
  dispatch({ type: "set" });                  //  xato (set payload talab qiladi)

   Action — discriminated union (type maydon ajratadi; payload har action'da har xil — 7.4)
   TS payload turini "type"dan aniqlaydi (set  number, loading  boolean) — type-safe dispatch

  HODISA (EVENT) TURLARI — handler funksiyaga to'g'ri event turi:

  // INPUT onChange:
  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    setValue(e.target.value);            // e.target.value — string (TS biladi)
  }

  // BUTTON onClick:
  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
    e.preventDefault();
  }

  // FORM onSubmit:
  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
  }

  // KEYBOARD:
  function handleKey(e: React.KeyboardEvent<HTMLInputElement>) {
    if (e.key === "Enter") {...}
  }

  INLINE — TS turni O'ZI anglaydi (qo'lda kerak emas):
  <input onChange={(e) => setValue(e.target.value)} />   // e — avtomatik ChangeEvent (inference)

  ┌────────────────────────────────────────────────────────────┐
  │ ChangeEvent (input) | MouseEvent (click) | FormEvent (form) │
  │ KeyboardEvent (key) | FocusEvent (focus/blur)              │
  └────────────────────────────────────────────────────────────┘

   Inline handler — TS event turni o'zi anglaydi (alohida funksiyada qo'lda yoz)
   Event<HTMLXElement> — element turini ham beradi (e.target/currentTarget to'g'ri turda)

  GENERIC KOMPONENT — har qanday tur bilan ishlaydigan, lekin TYPE-SAFE komponent:

  interface ListProps<T> {                       //  T — generic tur 7.3-bob
    items: T[];
    renderItem: (item: T) => React.ReactNode;    // har element uchun UI
    keyExtractor: (item: T) => string | number;  // key (11.4: 2.13)
  }

  function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
    return <ul>{items.map(item => <li key={keyExtractor(item)}>{renderItem(item)}</li>)}</ul>;
  }

  // Ishlatish — TS turni ANGLAYDI (User yoki Product):
  <List
    items={users}                                // User[]
    renderItem={(user) => user.name}             // user — User (TS biladi, autocomplete)
    keyExtractor={(user) => user.id}
  />
  //  items User[] bo'lsa — renderItem'dagi user AVTOMATIK User turida (type-safe)

  ┌────────────────────────────────────────────────────────────┐
  │ Generic komponent: <T> — har tur bilan, lekin type-safe     │
  │ (List<User>, List<Product> — bir komponent, turli tur)      │
  └────────────────────────────────────────────────────────────┘

   Generic komponent — qayta ishlatiladigan + type-safe (List, Table, Select, Combobox)
   items turidan renderItem item turini ANGLAYDI (autocomplete + tekshiruv)

  CUSTOM HOOK 11.7-bob — qaytarish turini belgilash (yoki inference):

  // 1. INFERENCE (TS qaytarish turini o'zi anglaydi — ko'pincha yetadi):
  function useToggle(initial = false) {
    const [on, setOn] = useState(initial);
    const toggle = useCallback(() => setOn(o => !o), []);
    return [on, toggle] as const;        //  as const — tuple turi ([boolean, () => void])
  }
  const [isOpen, toggle] = useToggle();  // isOpen: boolean, toggle: () => void (type-safe)

  // 2. ANIQ QAYTARISH TURI (obyekt — murakkab hook):
  interface UseFetchResult<T> {
    data: T | null;
    loading: boolean;
    error: string | null;
  }
  function useFetch<T>(url: string): UseFetchResult<T> {   // generic — har tur uchun
    const [data, setData] = useState<T | null>(null);
    // ...
    return { data, loading, error };
  }
  const { data } = useFetch<User[]>("/api/users");   // data: User[] | null (type-safe)

   as const — massiv qaytaranda tuple turi (useState kabi [value, setter] — aniq turlar)
   Generic hook — useFetch<User[]> — qaytgan data turini chaqiruvchi belgilaydi (type-safe)

  React.FC (FunctionComponent) — komponent turini belgilashning ESKI usuli:

  // React.FC bilan (eski — endi KAM tavsiya):
  const Button: React.FC<ButtonProps> = ({ text }) => <button>{text}</button>;

  // To'g'ridan props turi bilan (ZAMONAVIY tavsiya):
  function Button({ text }: ButtonProps) { return <button>{text}</button>; }

  NEGA React.FC KAM ISHLATILADI (2026):
   Ilgari children'ni AVTOMATIK qo'shardi (endi yo'q — React 18'da olib tashlandi)
   Generic komponentlar bilan noqulay (React.FC<Props<T>> — chalkash)
   Ortiqcha (props turini to'g'ridan yozish — soddaroq, aniqroq)

  TAVSIYA: to'g'ridan props turi (function Button({...}: Props) yoki const arrow)
   children kerak bo'lsa — Props ichida aniq yoz (children: ReactNode — 2.4)

   React.FC — eski uslub (zarari yo'q, lekin ortiqcha); ZAMONAVIY — to'g'ridan props turi
   Bu — munozara mavzu; jamoa izchilligi muhim (lekin ko'pchilik React.FC'dan voz kechdi)

  UTILITY TYPES 7.4-bob React props bilan juda foydali (mavjud turni qayta ishlatish):

  // HTML element props'ini KENGAYTIRISH (button'ning barcha props'i + o'zimizniki):
  interface ButtonProps extends React.ComponentProps<"button"> {   //  barcha <button> props
    variant: "primary" | "danger";          // + o'z props'imiz
  }
  //  onClick, disabled, type, className... HAMMASI avtomatik (qo'lda yozMASDAN)

  // OMIT (ba'zi props'ni OLIB tashlash):
  type InputProps = Omit<React.ComponentProps<"input">, "size"> & { size: "sm" | "lg" };
  //  input'ning barcha props'i, LEKIN "size"ni o'zimizniki bilan almashtirish

  // PICK (faqat ba'zi props):
  type Coords = Pick<DOMRect, "top" | "left">;   // faqat top, left

  // PARTIAL (barcha props ixtiyoriy — tahrirlash/yangilash):
  function updateUser(id: string, data: Partial<User>) {...}   // User'ning ba'zi maydonlari

   React.ComponentProps<"button"> — element'ning BARCHA props'ini beradi (kengaytirish uchun)
   Omit/Pick/Partial — mavjud turni moslab qayta ishlatish (7.4 — DRY)

  CONTEXT TURI — createContext'ga tur berish (11.5: 2.11):
  interface AuthContextType {
    user: User | null;
    login: (creds: Credentials) => Promise<void>;
    logout: () => void;
  }
  const AuthContext = createContext<AuthContextType | null>(null);   // null boshlang'ich

  // Custom hook — null tekshiruv bilan (type-safe):
  function useAuth() {
    const ctx = useContext(AuthContext);
    if (!ctx) throw new Error("useAuth AuthProvider ichida");   // null  xato (TS: ctx endi AuthContextType)
    return ctx;                                                  // tur: AuthContextType (null emas)
  }

  ZOD + TS (11.10 davomi) — sxema  tur (single source — 5.9):
  const userSchema = z.object({ id: z.string(), name: z.string(), age: z.number() });
  type User = z.infer<typeof userSchema>;          // sxemadan tur (qo'lda interface yo'q)
  // API javobini tekshirish + turlash (type-safe):
  const user: User = userSchema.parse(await res.json());   // runtime tekshiruv + compile turi

   createContext<T | null>(null) + hook'da null tekshiruv (type-safe Context)
   z.infer — sxemadan tur (validatsiya + tur bir manba — 5.9, 11.10)

  QAYTARISH TURI — komponent nima qaytaradi (JSX.Element vs ReactNode):

  function A(): JSX.Element { return <div />; }      //  AYNAN bitta element
  function B(): React.ReactNode { return <div />; }  //  keng (fragment, string, null ham)
  //  ODATDA qaytarish turini QO'LDA yozmang — TS o'zi anglaydi (inference eng yaxshi)

  JSX.Element vs ReactNode (farq):
  - JSX.Element  — faqat bitta JSX element (React.createElement natijasi)
  - ReactNode    — element + string + number + array + null + boolean (KENGROQ)
   children uchun ReactNode 2.4-bob; qaytarish uchun — inference (qo'lda yozish shart emas)

  ComponentProps<typeof X> — MAVJUD komponent props turini olish (qayta e'lon qilmasdan):
  function Button(props: { text: string; variant: "a" | "b" }) {...}
  type ButtonProps = React.ComponentProps<typeof Button>;   // { text; variant } — avtomatik
  //  o'rovchi/HOC komponent yozganda foydali (props'ni takrorlamaslik)

  Record<K, V> — kalitqiymat xaritasi props uchun:
  interface Props {
    styles: Record<string, string>;                 // { [key]: string } — CSS obyekti
    labels: Record<"uz" | "en", string>;             // FAQAT shu kalitlar (majburiy)
  }

   Qaytarish turini yozmang — inference (JSX.Element/ReactNode qo'lda kamdan-kam)
   ComponentProps<typeof X> — mavjud komponent props'ini olish (DRY — 2.12 davomi)
   Record<K, V> — xarita props (kalit turi + qiymat turi bir joyda)

  forwardRef (11.5: 2.14) — komponentga tashqaridan ref berish, TIP bilan:

  interface InputProps {
    label: string;
    error?: string;
  }
  // forwardRef<REF_TURI, PROPS_TURI> — ikki generic argument:
  const Input = React.forwardRef<HTMLInputElement, InputProps>(
    ({ label, error }, ref) => {                    // ref — ikkinchi argument
      return (
        <div>
          <label>{label}</label>
          <input ref={ref} aria-invalid={!!error} />   {/* ref shu <input>'ga */}
        </div>
      );
    }
  );
  Input.displayName = "Input";                        // devtools uchun (arrow — nom yo'q)

  // Ishlatish — ref type-safe (HTMLInputElement):
  const ref = useRef<HTMLInputElement>(null);
  <Input ref={ref} label="Email" />                   // ref.current — HTMLInputElement | null

   forwardRef<ElementTuri, PropsTuri> — birinchi = ref turi, ikkinchi = props
   displayName — arrow funksiyada nom yo'q (devtools "ForwardRef" o'rniga aniq nom)
   React 19'da forwardRef kerak emas — ref oddiy prop bo'ldi (versiyaga qarab)

  POLYMORPHIC KOMPONENT — turli HTML teg'da render bo'ladigan komponent (as prop):

  // Oddiy holat (ElementType — har qanday teg/komponent):
  interface TextProps {
    as?: React.ElementType;              // qaysi teg: "h1", "p", "span", Link...
    children: React.ReactNode;
  }
  function Text({ as: Component = "span", children }: TextProps) {
    return <Component>{children}</Component>;         // as  render'da teg
  }
  <Text as="h1">Sarlavha</Text>          // <h1> bo'lib render
  <Text as="p">Matn</Text>               // <p> bo'lib render

  // TO'LIQ TYPE-SAFE polymorphic (as teg props'ini ham to'g'ri oladi — ilg'or):
  type PolymorphicProps<E extends React.ElementType> = {
    as?: E;
    children: React.ReactNode;
  } & Omit<React.ComponentPropsWithoutRef<E>, "as" | "children">;   // teg'ning native props'i

  function Box<E extends React.ElementType = "div">({ as, ...rest }: PolymorphicProps<E>) {
    const Component = as || "div";
    return <Component {...rest} />;
  }
  <Box as="a" href="/uz">Havola</Box>    // href — <a>'da bor (type-safe); <button>'da xato

   as?: React.ElementType — komponent qaysi teg'da render bo'lishini tanlash (Button, Text, Box)
   ComponentPropsWithoutRef<E> — tanlangan teg'ning native props'i (as="a"  href, as="button"  type)
   Ilg'or naqsh — dizayn-tizim komponentlarida (bir Box, ko'p teg — type-safe)

  TYPE-SAFE REACT LOYIHA (xulosa — qatlamma-qatlam turlash):

  ┌──────────────────────────────────────────────────────────┐
  │ Komponent props (interface — 2.3)                          │
  │                                                             │
  │ Hooklar (useState<T>, custom hook — 2.5, 2.10)             │
  │                                                             │
  │ Context (createContext<T> — 2.13)                          │
  │                                                             │
  │ API qatlami (Zod schema + z.infer — 2.13, 5.9)            │
  │                                                             │
  │ Backend (bir xil Zod schema — 5.9 — full-stack type-safe)  │
  └──────────────────────────────────────────────────────────┘

  AMALIY MASLAHATLAR:
   strict: true (barcha himoya — 2.2)
   any'dan qoch (unknown + tekshiruv yoki aniq tur — 7.5)
   Inference'ga ishon (oddiy holatda qo'lda tur yozma — 2.5)
   Zod API chegarasida (server javobi — runtime + tur — 2.13)
   React.FC emas, to'g'ridan props turi (2.11)

   Type-safe — komponentdan API'gacha (va backend'gacha — Zod) ZANJIR (full-stack)
   TS — "to'sqinlik" emas, YORDAMCHI (xato erta, autocomplete, ishonchli refactoring)

PROPS 2.3-bob:       interface Props { name: string; variant: "a"|"b"; opt?: boolean }
                   function C({ name }: Props) {...}
CHILDREN 2.4-bob:    children: React.ReactNode  |  React.PropsWithChildren<Props>
useState 2.5-bob:    useState(0)  |  useState<User|null>(null)  |  useState<T[]>([])
useRef 2.6-bob:      useRef<HTMLInputElement>(null)  |  useRef<number>(0)
useReducer 2.7-bob:  type Action = {type:"x"} | {type:"set"; payload:number}  // discriminated union
EVENT 2.8-bob:       e: React.ChangeEvent<HTMLInputElement>  |  React.FormEvent<HTMLFormElement>
GENERIC 2.9-bob:     function List<T>({ items }: ListProps<T>) {...}
HOOK 2.10-bob:       return [a, b] as const  |  function useFetch<T>(): Result<T>
HTML PROPS 2.12-bob: extends React.ComponentProps<"button">  |  Omit<...,"size">
CONTEXT 2.13-bob:    createContext<T | null>(null)  +  if (!ctx) throw
ZOD 2.13-bob:        type User = z.infer<typeof userSchema>  |  schema.parse(data)
COMPPROPS 2.14-bob:  React.ComponentProps<typeof Button>  |  Record<"a"|"b", string>
forwardRef 2.15-bob: React.forwardRef<HTMLInputElement, Props>((props, ref) => ...)
POLYMORPH 2.16-bob:  as?: React.ElementType  |  ComponentPropsWithoutRef<E>  (as prop)

interface ButtonProps {
  text: string;
  variant: "primary" | "danger" | "ghost";   // union — faqat shu qiymatlar
  disabled?: boolean;                          // ixtiyoriy
  onClick: () => void;
}

function Button({ text, variant, disabled = false, onClick }: ButtonProps) {
  return (
    <button className={`btn btn-${variant}`} disabled={disabled} onClick={onClick}>
      {text}
    </button>
  );
}

// Ishlatish — type-safe:
<Button text="Saqlash" variant="primary" onClick={() => {}} />   // 
// <Button text="X" variant="warning" />   //  "warning" union'da yo'q + onClick yetishmaydi

interface CardProps {
  title: string;
  children: React.ReactNode;        // JSX, matn, array... (hammasi)
  footer?: React.ReactNode;         // ixtiyoriy children-kabi prop
}

function Card({ title, children, footer }: CardProps) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <div className="body">{children}</div>
      {footer && <div className="footer">{footer}</div>}
    </div>
  );
}
// Yoki PropsWithChildren bilan:
// function Card({ title, children }: React.PropsWithChildren<{ title: string }>) {...}

interface User { id: string; name: string; }

function Component() {
  const [count, setCount] = useState(0);                    // number (inference)
  const [name, setName] = useState("");                     // string
  const [user, setUser] = useState<User | null>(null);      // generic (null boshlang'ich)
  const [items, setItems] = useState<User[]>([]);           // generic (bo'sh massiv)
  const [status, setStatus] = useState<"idle" | "loading" | "done">("idle");   // union

  setUser({ id: "1", name: "Ali" });   //  type-safe
  // setUser({ id: "1" });             //  name yetishmaydi
  return null;
}

function SearchForm() {
  const inputRef = useRef<HTMLInputElement>(null);   // DOM ref
  const timerRef = useRef<number | null>(null);      // mutable (interval ID)

  useEffect(() => {
    inputRef.current?.focus();                        // ?. — null bo'lishi mumkin (2.6)
  }, []);

  const startTimer = () => {
    timerRef.current = window.setInterval(() => console.log("tick"), 1000);
  };
  const stopTimer = () => {
    if (timerRef.current) clearInterval(timerRef.current);
  };

  return <input ref={inputRef} />;
}

interface State { count: number; loading: boolean; }

type Action =
  | { type: "increment" }
  | { type: "decrement" }
  | { type: "set"; payload: number }
  | { type: "setLoading"; payload: boolean };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "increment": return { ...state, count: state.count + 1 };
    case "decrement": return { ...state, count: state.count - 1 };
    case "set": return { ...state, count: action.payload };          // payload: number (TS biladi)
    case "setLoading": return { ...state, loading: action.payload }; // payload: boolean
    default: return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0, loading: false });
  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "set", payload: 100 })}>100</button>
      {/* dispatch({ type: "set" }) —  payload talab qilinadi (type-safe) */}
    </div>
  );
}

function Form() {
  const [value, setValue] = useState("");

  // Alohida funksiya — qo'lda tur
  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    setValue(e.target.value);
  }
  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    console.log(value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={value} onChange={handleChange} />
      {/* Inline — TS o'zi anglaydi (qo'lda tur kerak emas): */}
      <input onChange={(e) => setValue(e.target.value)} />
      <button onClick={(e) => e.preventDefault()}>Yuborish</button>
    </form>
  );
}

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
  keyExtractor: (item: T) => string | number;
}

function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
  if (items.length === 0) return <p>Bo'sh</p>;
  return <ul>{items.map(item => <li key={keyExtractor(item)}>{renderItem(item)}</li>)}</ul>;
}

// Ishlatish — TS turni anglaydi:
interface Product { id: string; name: string; price: number; }
<List<Product>
  items={products}
  renderItem={(p) => `${p.name} — ${p.price}`}   // p: Product (autocomplete)
  keyExtractor={(p) => p.id}
/>

// Tuple qaytaruvchi (as const):
function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = useCallback(() => setOn(o => !o), []);
  return [on, toggle] as const;        // [boolean, () => void] (tuple)
}
const [isOpen, toggle] = useToggle();  // isOpen: boolean, toggle: () => void

// Generic obyekt qaytaruvchi:
interface FetchResult<T> { data: T | null; loading: boolean; error: string | null; }

function useFetch<T>(url: string): FetchResult<T> {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  useEffect(() => {
    fetch(url).then(r => r.json()).then((d: T) => { setData(d); setLoading(false); });
  }, [url]);
  return { data, loading, error };
}

const { data } = useFetch<Product[]>("/api/products");   // data: Product[] | null

// Custom Input — <input>'ning BARCHA props'i + o'zimizniki:
interface InputProps extends React.ComponentProps<"input"> {
  label: string;
  error?: string;
}

function Input({ label, error, ...rest }: InputProps) {
  return (
    <div className="field">
      <label>{label}</label>
      <input {...rest} aria-invalid={!!error} />   {/* native props: onChange, placeholder, disabled... */}
      {error && <span className="error">{error}</span>}
    </div>
  );
}

// Ishlatish — native input props avtomatik:
<Input label="Email" type="email" placeholder="email@x.uz" onChange={(e) => {}} required />
//  onChange/type/placeholder/required — ComponentProps<"input">'dan (qo'lda yozMASDAN — 2.12)

interface User { id: string; name: string; email: string; password: string; role: "user" | "admin"; }

// Yangi user yaratish — id yo'q (server beradi), password kerak:
type CreateUserDto = Omit<User, "id">;                    // id'siz

// Tahrirlash — barcha maydon ixtiyoriy (faqat o'zgarganini yubor):
type UpdateUserDto = Partial<Omit<User, "id" | "password">>;   // id/password'siz, hammasi ixtiyoriy

// Public user — parolsiz (xavfsizlik):
type PublicUser = Omit<User, "password">;

function updateUser(id: string, data: UpdateUserDto) { /* ... */ }
updateUser("1", { name: "Yangi" });    //  faqat name (Partial — ixtiyoriy)

interface User { id: string; name: string; }
interface AuthContextType {
  user: User | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
}

const AuthContext = createContext<AuthContextType | null>(null);   // null boshlang'ich

export function AuthProvider({ children }: React.PropsWithChildren) {
  const [user, setUser] = useState<User | null>(null);
  const login = async (email: string, password: string) => { /* ... */ setUser({ id: "1", name: "Ali" }); };
  const logout = () => setUser(null);
  return <AuthContext.Provider value={{ user, login, logout }}>{children}</AuthContext.Provider>;
}

export function useAuth(): AuthContextType {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error("useAuth AuthProvider ichida ishlatilishi kerak");   // null tekshiruv
  return ctx;                                                                     // tur: AuthContextType
}

// Komponent ikki rejimda — TS to'g'ri props'ni talab qiladi:
type AlertProps =
  | { variant: "success"; message: string }
  | { variant: "error"; message: string; retry: () => void };   // error'da retry MAJBURIY

function Alert(props: AlertProps) {
  return (
    <div className={`alert alert-${props.variant}`}>
      <p>{props.message}</p>
      {props.variant === "error" && <button onClick={props.retry}>Qayta</button>}   {/* retry — faqat error'da */}
    </div>
  );
}

<Alert variant="success" message="Saqlandi" />                      // 
<Alert variant="error" message="Xato" retry={() => {}} />           // 
// <Alert variant="error" message="Xato" />                        //  retry yetishmaydi

import { z } from "zod";

const productSchema = z.object({
  id: z.string(),
  name: z.string(),
  price: z.number().positive(),
  inStock: z.boolean(),
});

type Product = z.infer<typeof productSchema>;        // sxemadan tur (qo'lda interface yo'q)
const productsSchema = z.array(productSchema);

async function getProducts(): Promise<Product[]> {
  const res = await fetch("/api/products");
  const data = await res.json();
  return productsSchema.parse(data);                 // runtime tekshiruv + tur (xato bo'lsa throw)
}
//  z.infer — bir manba (validatsiya + tur); parse — server javobini xavfsiz qiladi (5.9, 11.10)

import { z } from "zod";

const userSchema = z.object({ id: z.string(), name: z.string(), role: z.enum(["user", "admin"]) });
type User = z.infer<typeof userSchema>;

interface UserCardProps extends React.ComponentProps<"div"> {   // div props + o'zimizniki
  user: User;
  onSelect?: (id: string) => void;
}

function UserCard({ user, onSelect, ...rest }: UserCardProps) {
  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
    onSelect?.(user.id);
  };
  return (
    <div {...rest} className="user-card" onClick={handleClick}>
      <h3>{user.name}</h3>
      <span className={`badge badge-${user.role}`}>{user.role}</span>   {/* role: "user"|"admin" */}
    </div>
  );
}

// Generic ro'yxat bilan birga:
function UserList({ users }: { users: User[] }) {
  return (
    <List<User>
      items={users}
      renderItem={(u) => <UserCard user={u} onSelect={(id) => console.log(id)} />}
      keyExtractor={(u) => u.id}
    />
  );
}
//  Zod (tur) + interface (props) + ComponentProps (native) + event tur + generic — to'liq type-safe

interface InputProps {
  label: string;
  error?: string;
}

// forwardRef<ref turi, props turi> — ref uzatuvchi komponent:
const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ label, error }, ref) => (
    <div className="field">
      <label>{label}</label>
      <input ref={ref} aria-invalid={!!error} />   {/* ref shu <input>'ga */}
      {error && <span className="error">{error}</span>}
    </div>
  )
);
Input.displayName = "Input";   // devtools uchun (arrow — nom yo'q)

// Mavjud komponent props turini olish (qayta e'lon qilmasdan):
type InputPublicProps = React.ComponentProps<typeof Input>;   // { label; error? } + ref

// Ishlatish — ref type-safe:
function Form() {
  const inputRef = useRef<HTMLInputElement>(null);
  useEffect(() => inputRef.current?.focus(), []);   // ref.current: HTMLInputElement | null
  return <Input ref={inputRef} label="Email" />;
}
//  React 19'da forwardRef kerak emas (ref oddiy prop) — React 18'da esa shu naqsh (2.15)

// To'liq type-safe polymorphic Box — as teg'ning native props'ini ham oladi:
type PolymorphicProps<E extends React.ElementType> = {
  as?: E;
  children?: React.ReactNode;
} & Omit<React.ComponentPropsWithoutRef<E>, "as" | "children">;

function Box<E extends React.ElementType = "div">({ as, children, ...rest }: PolymorphicProps<E>) {
  const Component = as || "div";
  return <Component {...rest}>{children}</Component>;
}

// Ishlatish — as teg'ga qarab native props type-safe:
<Box>oddiy div</Box>                                   // <div>
<Box as="a" href="/uz">Havola</Box>                    // href — <a>'da bor 
<Box as="button" type="submit" onClick={() => {}}>Yuborish</Box>   // type/onClick — <button>'da 
// <Box as="button" href="/x" />                       //  href <button>'da yo'q (type-safe)

type Lang = "uz" | "en";

interface LabeledProps {
  lang: Lang;
  // Record<K, V> — har til uchun matn MAJBURIY (biror til yo'q bo'lsa — compile xatosi):
  labels: Record<Lang, string>;
  styles?: Record<string, string>;   // ixtiyoriy kalitlar (inline CSS obyekti)
}

function Labeled({ lang, labels, styles }: LabeledProps) {
  return <span style={styles}>{labels[lang]}</span>;   // labels[lang] — string (type-safe)
}

<Labeled
  lang="uz"
  labels={{ uz: "Saqlash", en: "Save" }}   // ikki til ham majburiy
  styles={{ color: "red", fontWeight: "bold" }}
/>
// <Labeled lang="uz" labels={{ uz: "Saqlash" }} />   //  "en" yetishmaydi (Record<Lang>)

 function C(props) {...}  (any — TS himoyasi yo'q)
 function C({ name }: Props) {...}  (interface — type-safe — 2.3)

 const [user, setUser] = useState(null);  (tur: null — setUser(realUser) xato)
 useState<User | null>(null)  (generic — 2.5)

 const data: any = await res.json();  (TS himoyasi o'chadi — 2.17)
 Zod parse yoki aniq tur (unknown + tekshiruv — 2.13, 7.5)

 const C: React.FC<Props> = ...  (eski, ortiqcha — 2.11)
 function C({ ... }: Props) {...}  (to'g'ridan props turi)

 function h(e: any) {...}  (e.target.value — any, himoya yo'q)
 e: React.ChangeEvent<HTMLInputElement>  (2.8)

 return [on, toggle]  (tur: (boolean | fn)[] — destructuring noto'g'ri)
 return [on, toggle] as const  (tuple — 2.10)