⚛️
TypeScript with Frameworks

TypeScript with React

Typing Props & Hooks
💡 TypeScript, ke, saath, React, EK, "LABELED, TOOLBOX" jaisa, hai — HAR, COMPONENT, ke, PROPS, ka, EK, CLEAR, "LABEL" (interface) HOTA, hai, ki, KYA, PASS, karna, ZAROORI, hai.

Component, PROPS, ko, EK, INTERFACE, se, TYPE, kiya, jaata hai — jaise, interface ButtonProps { label: string; onClick: () => void; }. FunctionComponent, YA, DIRECTLY, PROPS, TYPE, se, ANNOTATE, kiya, ja, sakta hai.

Hooks, jaise, useState, GENERICS, USE, karte, HAIN — jaise, useState<string>(""), EXPLICITLY, STATE, ka, TYPE, SPECIFY, karta hai, jab, INITIAL, VALUE, se, INFER, nahi, ho, paata.

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

function Button({ label, onClick, disabled }: ButtonProps) {
  return <button onClick={onClick} disabled={disabled}>{label}</button>;
}

const [user, setUser] = useState<User | null>(null);   // explicit, generic
⚛️
TypeScript, ke, saath, React, EK, "LABELED, TOOLBOX" jaisa, hai — HAR, COMPONENT, ke, PROPS, ka, EK, CLEAR, "LABEL" (interface) HOTA, hai, ki, KYA, PASS, karna, ZAROORI, hai.
1 / 2
⚡ Quick Recap
  • Component props, EK, interface, se, TYPED, hote, hain
  • Hooks (useState) generics, use, karte, hain, EXPLICIT, typing, ke, liye
  • disabled?: boolean, jaisa, OPTIONAL, prop, common, pattern, hai
Is page mein (2 subtopics)

children, PROP, ko, React.ReactNode, TYPE, se, ANNOTATE, kiya, jaata hai — YE, MOST, PERMISSIVE, TYPE, hai, JO, STRINGS, elements, arrays, aur, null/undefined, SAB, ko, ALLOW, karta hai.

interface CardProps {
  children: React.ReactNode;
}
function Card({ children }: CardProps) {
  return <div className="card">{children}</div>;
}

React, EVENTS, apne, KHUD, ke, SYNTHETIC, EVENT, types, USE, karte, HAIN — jaise, React.MouseEvent<HTMLButtonElement>, ek, button, click, handler, ke, liye, PROPERLY, TYPED, event, deta hai.

💡Tip: onClick={(e: React.MouseEvent<HTMLButtonElement>) => {}}, se, e.currentTarget, PROPERLY, TYPED, HTMLButtonElement, ki, tarah, milta, hai, GENERIC, EventTarget, ki, tarah, NAHI.