Typing React components

A component that says what it needs

React builds a page out of components. A component is a function that takes one object, called its props, and returns JSX: tags that look like HTML and describe what to show. When you write <CartItem name="Tea" price={3} />, React calls CartItem with the props object { name: "Tea", price: 3 }. Quotes pass text. Braces pass any JavaScript value, like the number 3.

Here is a small cart list in plain JavaScript with JSX, with one mistake in it:

import { createRoot } from "react-dom/client";

function CartItem({ name, price }) {
  return <li>{name}: ${price.toFixed(2)}</li>;
}

createRoot(document.getElementById("root")).render(
  <ul>
    <CartItem name="Tea" price={3} />
    <CartItem name="Cake" price="4" />
  </ul>
);

Line 3 makes the CartItem component. Its one argument is the props object, and the braces take name and price out of it (Destructuring explains this). Line 4 shows the name and the price with two decimals. The $ there is just a dollar sign in the text. Line 7 tells React to draw the list into the page's <div id="root">. Line 9 passes the price 3 in braces, a number. Line 10 passes "4" in quotes, which is text. Text has no toFixed method, so the code stops with TypeError: price.toFixed is not a function, and the page shows nothing. Nothing warned you before it ran.

With TypeScript, you give the props a type. The file ends in .tsx, which means TypeScript with JSX:

1import { createRoot } from "react-dom/client";2 3type CartItemProps = {4  name: string;5  price: number;6};7 8function CartItem({ name, price }: CartItemProps) {9  return <li>{name}: ${price.toFixed(2)}</li>;10}11 12createRoot(document.getElementById("root")!).render(13  <ul>14    <CartItem name="Tea" price={3} />15    <CartItem name="Cake" price="4" />16  </ul>17);

Lines 3 to 6 describe the props: a name that is a string and a price that is a number. Line 8 puts : CartItemProps after the props, the way you type any function parameter. Line 12 adds a ! after getElementById, because that call can return null (Typing the DOM explains why). TypeScript marks line 15, on purpose here, because it's the bug:

• Type 'string' is not assignable to type 'number' means "you're passing text where CartItemProps says a number goes". TypeScript checks every tag that uses CartItem, before the code runs.

Change what line 15 passes and watch what TypeScript and the page say:

1import { createRoot } from "react-dom/client";2 3type CartItemProps = {4  name: string;5  price: number;6};7 8function CartItem({ name, price }: CartItemProps) {9  return <li>{name}: ${price.toFixed(2)}</li>;10}11 12createRoot(document.getElementById("root")!).render(13  <ul>14    <CartItem name="Tea" price={3} />15    <CartItem name="Cake" price="4" />16  </ul>17);

Only price={4} passes the check. The typo prise and the text "4" would break the page, and TypeScript catches both. The extra onSale wouldn't break anything, but TypeScript still flags it, because CartItemProps doesn't list it. A prop the component doesn't know about is usually a mistake.

Typing a component's props

A component always gets exactly one argument: the props object. So you type it like any other function parameter (Typing functions covers parameters). Here the props type is an interface:

1import { createRoot } from "react-dom/client";2 3interface ProfileCardProps {4  name: string;5  city: string;6  orders: number;7}8 9function ProfileCard(props: ProfileCardProps) {10//                   ^?11  return <p>{props.name} from {props.city} has {props.orders} orders</p>;12}13 14createRoot(document.getElementById("root")!).render(15  <ProfileCard name="Asha" city="Pune" orders={3} />16);

Lines 3 to 7 list the three props. Line 9 says the parameter props has that type, and the query on line 10 shows it: (parameter) props: ProfileCardProps. Line 11 reads each prop from the object. Line 15 passes them all, with orders={3} in braces because it's a number. The page shows Asha from Pune has 3 orders.

Most React code takes the props apart right in the parameter list. The type still goes after the whole pattern, not after each name:

1import { createRoot } from "react-dom/client";2 3interface ProfileCardProps {4  name: string;5  city: string;6  orders: number;7}8 9function ProfileCard({ name, city, orders }: ProfileCardProps) {10//       ^?11  return <p>{name} from {city} has {orders} orders</p>;12}13 14createRoot(document.getElementById("root")!).render(15  <ProfileCard name="Asha" city="Pune" orders={3} />16);

Line 9 takes name, city, and orders out of the props, and : ProfileCardProps after the braces types all three. The query on line 10 points at the function's name and shows function ProfileCard(…): JSX.Element. You never wrote a return type. TypeScript worked it out from the JSX on line 11: JSX.Element is React's type for what a tag like <p> makes. You rarely need to write it yourself.

Props types can use everything you know about types. A prop that takes one of a few words is a union of literal types:

1import { createRoot } from "react-dom/client";2 3type StockBadgeProps = {4  status: "in-stock" | "low" | "sold-out";5};6 7const labels = { "in-stock": "In stock", low: "Only a few left", "sold-out": "Sold out" };8 9function StockBadge({ status }: StockBadgeProps) {10  return <span>{labels[status]}</span>;11}12 13createRoot(document.getElementById("root")!).render(14  <p>15    Green tea: <StockBadge status="low" />. Lemon cake: <StockBadge status="soldout" />.16  </p>17);

Line 4 says status must be one of three words. Line 10 uses it to look up a label. Line 15 passes "low", which is fine, and then "soldout", which TypeScript marks on purpose:

• Type '"soldout"' is not assignable to type '"in-stock" | "low" | "sold-out"'. Did you mean '"sold-out"'? means the word isn't one of the three, and TypeScript found the one you probably meant.

Without TypeScript, nothing would complain: labels["soldout"] is undefined, so the page shows Lemon cake: . with an empty badge, and a shopper never learns the cake is gone.

You'll also see components typed with FC (short for function component) from React's types. It types the whole function at once:

1import { createRoot } from "react-dom/client";2import type { FC } from "react";3 4type GreetingProps = { name: string };5 6const Greeting: FC<GreetingProps> = ({ name }) => <h2>Welcome back, {name}</h2>;7 8createRoot(document.getElementById("root")!).render(<Greeting name="Asha" />);

Line 2 imports the type FC. import type brings in types only, so the line is removed before the code runs (TypeScript modules explains it). Line 6 says Greeting is an FC whose props are GreetingProps, so name is a string with no type written next to it. Line 8 draws Welcome back, Asha. The table compares the two ways. Read each row as a question, then each way's answer.

Children and ReactNode

Whatever you put between a component's opening and closing tags arrives as a prop named children. TypeScript checks it like any other prop, so your props type has to list it:

1import { createRoot } from "react-dom/client";2import type { ReactNode } from "react";3 4type PanelProps = {5  title: string;6  children: ReactNode;7};8 9function Panel({ title, children }: PanelProps) {10  return (11    <section>12      <h2>{title}</h2>13      {children}14    </section>15  );16}17 18createRoot(document.getElementById("root")!).render(19  <Panel title="Your cart">20    <p>Tea × 2</p>21  </Panel>22);

Line 2 imports the type ReactNode from React. Line 6 says children is a ReactNode. Line 13 draws the children under the heading. Lines 19 to 21 use the panel: the paragraph on line 20 sits between the tags, so it becomes children. The page shows the heading Your cart and then Tea × 2.

ReactNode is React's name for anything it can draw:

• an element, like <p>Tea × 2</p>,
• text and numbers,
• an array of any of these, like a list from .map(),
• null, undefined, true, and false, which draw nothing.

Try each one between the tags, and one thing that isn't a ReactNode:

1import { createRoot } from "react-dom/client";2import type { ReactNode } from "react";3 4type PanelProps = {5  title: string;6  children: ReactNode;7};8 9function Panel({ title, children }: PanelProps) {10  return (11    <section>12      <h2>{title}</h2>13      {children}14    </section>15  );16}17 18const cart = { items: 2, total: 6 };19createRoot(document.getElementById("root")!).render(20  <Panel title="Your cart">21    <p>Tea × 2</p>22  </Panel>23);

The element, the text, the number, and null are all fine. The object cart is caught twice: by TypeScript while you type, and by React, which throws Objects are not valid as a React child when it runs. An empty panel is an error only because line 6 makes children required.

ReactNode is the right type for most children. Two other types from React come up too: PropsWithChildren, which adds an optional children to a props type, and ReactElement, which allows only an element, not text:

1import { createRoot } from "react-dom/client";2import type { PropsWithChildren, ReactElement } from "react";3 4type NoteProps = PropsWithChildren<{ tone: "info" | "warning" }>;5 6function Note({ tone, children }: NoteProps) {7//                    ^?8  return <p className={tone}>{children}</p>;9}10 11function Frame({ children }: { children: ReactElement }) {12  return <div className="frame">{children}</div>;13}14 15createRoot(document.getElementById("root")!).render(16  <Frame>17    <Note tone="info">Free delivery over $20</Note>18  </Frame>19);

Line 4 makes the props tone plus an optional children. The query on line 7 shows children: React.ReactNode. Line 11 types Frame's children as ReactElement. Lines 16 to 18 put a Note element inside the frame, which fits. The page shows Free delivery over $20. Put the text straight inside the frame instead, and TypeScript objects:

1import { createRoot } from "react-dom/client";2import type { PropsWithChildren, ReactElement } from "react";3 4type NoteProps = PropsWithChildren<{ tone: "info" | "warning" }>;5 6function Note({ tone, children }: NoteProps) {7//                    ^?8  return <p className={tone}>{children}</p>;9}10 11function Frame({ children }: { children: ReactElement }) {12  return <div className="frame">{children}</div>;13}14 15createRoot(document.getElementById("root")!).render(16  <Frame>17    Free delivery over $2018  </Frame>19);

Line 17 is now plain text. TypeScript marks the <Frame> tag on line 16 on purpose: 'Frame' components don't accept text as child elements means text is a string, and Frame asked for an element. React itself would draw the text fine. The type is a rule you chose, so choose ReactElement only when a component really needs an element. Read the table row by row: the type you write, then what it lets in.

Typing event handlers

React calls your handlers with its own event objects, not the browser's. Their types come from React's types too: ChangeEvent, MouseEvent, FormEvent, and more. Each takes the element in angle brackets, like ChangeEvent<HTMLInputElement> (Typing events covers the browser's own events). When you write the handler inline, you don't need to name any of them:

1import { createRoot } from "react-dom/client";2 3function SearchBox() {4  return <input placeholder="Search teas" onChange={(event) => console.log(event.target.value)} />;5//                                                   ^?6}7 8createRoot(document.getElementById("root")!).render(<SearchBox />);

Line 4 passes an arrow function to onChange. TypeScript knows an input's onChange calls it with a change event from an input, so the query on line 5 shows (parameter) event: React.ChangeEvent<HTMLInputElement>. In React's change event, event.target is the input itself, so event.target.value is a string with no checks needed. Type tea in the box and the console shows t, te, and tea.

Move the same handler into a function of its own, and TypeScript can't work out the type anymore:

1import { createRoot } from "react-dom/client";2 3function SearchBox() {4  function handleChange(event) {5    console.log(event.target.value);6  }7  return <input placeholder="Search teas" onChange={handleChange} />;8}9 10createRoot(document.getElementById("root")!).render(<SearchBox />);

TypeScript types a function where you write it, not where you use it. On line 4, nothing says what event is, so it marks it on purpose: Parameter 'event' implicitly has an 'any' type means event would be any, which turns checking off, and strict mode doesn't let that happen silently (any, unknown & never explains any). Pick a type for line 5 below:

1import { createRoot } from "react-dom/client";2import type { ChangeEvent } from "react";3 4function SearchBox() {5  function handleChange(event) {6    console.log(event.target.value);7  }8  return <input placeholder="Search teas" onChange={handleChange} />;9}10 11createRoot(document.getElementById("root")!).render(<SearchBox />);

Only ChangeEvent<HTMLInputElement> fits both the code inside the handler and the input it's given to. To find the right type for any handler, write it inline first and point at event: the editor shows the type to copy. The table lists the common ones. Read each row as: this handler, on this element, gets this event.

The second part of MouseEvent<HTMLButtonElement, MouseEvent> is the browser's own event, which React keeps in event.nativeEvent. A form's submit handler is another one to know:

1import { createRoot } from "react-dom/client";2import type { FormEvent } from "react";3 4function SignupForm() {5  function handleSubmit(event: FormEvent<HTMLFormElement>) {6    event.preventDefault();7    const data = new FormData(event.currentTarget);8    console.log(`Signed up ${data.get("email")}`);9  }10  return (11    <form onSubmit={handleSubmit}>12      <input name="email" defaultValue="asha@example.com" />13      <button>Sign up</button>14    </form>15  );16}17 18createRoot(document.getElementById("root")!).render(<SignupForm />);

Line 5 types the event as a FormEvent from a form. Line 6 stops the browser from reloading the page, its default action for a submit. On line 7, event.currentTarget is typed HTMLFormElement, so new FormData accepts it (FormData reads a form's fields). Press Sign up and the console shows Signed up asha@example.com.

Components also pass functions to each other. A child gets a function as a prop and calls it when something happens. Type that prop with a function type:

1import { createRoot } from "react-dom/client";2 3type AddButtonProps = {4  productId: string;5  onAdd: (productId: string) => void;6};7 8function AddButton({ productId, onAdd }: AddButtonProps) {9  return <button onClick={() => onAdd(productId)}>Add to cart</button>;10}11 12function logAdded(productId: string) {13  console.log(`Added ${productId}`);14}15 16createRoot(document.getElementById("root")!).render(<AddButton productId="tea" onAdd={logAdded} />);

Line 5 says onAdd is a function that takes a product id, a string, and gives back nothing (void). Line 9 calls it with the id when the button is clicked. Line 12 defines logAdded, which fits that type, and line 16 passes it as onAdd. Click Add to cart and the console shows Added tea. TypeScript checks both sides: line 9 must call onAdd with a string, and line 16 must pass a function that takes one.

Optional and default props

A ? after a prop's name makes it optional, as in any object type. Callers can leave it out, and inside the component it may be undefined. A default value in the parameter list fills it in:

1import { createRoot } from "react-dom/client";2 3type ShopButtonProps = {4  label: string;5  size?: "small" | "medium" | "large";6  disabled?: boolean;7};8 9function ShopButton({ label, size = "medium", disabled = false }: ShopButtonProps) {10//                           ^?11  return <button className={`button-${size}`} disabled={disabled}>{label}</button>;12}13 14createRoot(document.getElementById("root")!).render(15  <p>16    <ShopButton label="Buy" /> <ShopButton label="Sold out" size="small" disabled />17  </p>18);

Lines 5 and 6 make size and disabled optional. Line 9 gives them defaults with =, the same default values JavaScript allows when you take an object apart (Destructuring). The query on line 10 shows size: "small" | "medium" | "large", with no undefined: with a default, it always has a value inside the component. Line 16 makes two buttons. Buy leaves out both props, so it gets medium and is enabled. Sold out passes size="small" and disabled with no value, which JSX reads as disabled={true}.

Change how line 10 below gives size a value, and watch the query and line 12:

1import { createRoot } from "react-dom/client";2 3type ShopButtonProps = {4  label: string;5  size?: "small" | "medium" | "large";6};7 8const paddings = { small: 4, medium: 8, large: 12 };9 10function ShopButton({ label, size = "medium" }: ShopButtonProps) {11//                           ^?12  const padding = paddings[size];13  return <button style={{ padding }}>{label}</button>;14}15 16createRoot(document.getElementById("root")!).render(<ShopButton label="Buy" />);

Older React code sets defaults with Component.defaultProps = { … }. React 19 ignores defaultProps on function components, so use default values in the parameter list, as above. Class components still support it.

A typed product list

A real shop page puts all of this together: an object prop, an optional slot for extra content, a callback, and a list. Read it top to bottom:

1import { createRoot } from "react-dom/client";2import type { ReactNode } from "react";3 4type Product = {5  id: string;6  name: string;7  price: number;8};9 10type ProductCardProps = {11  product: Product;12  badge?: ReactNode;13  onAdd: (product: Product) => void;14};15 16function ProductCard({ product, badge, onAdd }: ProductCardProps) {17  return (18    <li>19      {product.name}: ${product.price.toFixed(2)} {badge}20      <button onClick={() => onAdd(product)}>Add {product.name}</button>21    </li>22  );23}24 25const products: Product[] = [26  { id: "tea", name: "Green tea", price: 3 },27  { id: "cake", name: "Lemon cake", price: 4.5 },28];29 30function ProductList() {31  return (32    <ul>33      {products.map((product) => (34        <ProductCard35          key={product.id}36          product={product}37          badge={product.price > 4 ? <strong>Treat</strong> : null}38          onAdd={(added) => console.log(`Added ${added.name}`)}39        />40      ))}41    </ul>42  );43}44 45createRoot(document.getElementById("root")!).render(<ProductList />);

• Lines 4 to 8 describe a product. The same type is used by the data, the card, and the callback.
• Lines 10 to 14 are the card's props: the product object, an optional badge that can be anything React draws, and onAdd, which gets the whole product.
• Line 19 shows the name, the price, and the badge. Line 20 calls onAdd with the product on a click.
• Lines 25 to 28 are the products, typed Product[], so a missing price there would be marked too.
• Lines 33 to 39 make one card per product. Line 35's key is React's own prop for lists: every component accepts it without listing it in its props.
• Line 37 passes a <strong> element or null as the badge. Line 38's added gets the type Product from the props type, so added.name is checked.

The page shows Green tea: $3.00 and Lemon cake: $4.50 Treat, each with an Add button. Click Add Lemon cake and the console shows Added Lemon cake.

Now sort some tags. Each card below is checked on its own, with these two components:

1import type { ReactNode } from "react";2 3function Panel(props: { title: string; children: ReactNode }) {4  return <section>{props.children}</section>;5}6 7function ShopButton(props: { label: string; size?: "small" | "large" }) {8  return <button>{props.label}</button>;9}

Common mix-ups

A name you don't import can quietly mean something else. Without an import, MouseEvent is the browser's event type, not React's:

1import { createRoot } from "react-dom/client";2 3function BuyButton() {4  function handleClick(event: MouseEvent) {5    console.log(`Clicked at ${event.clientX}`);6  }7  return <button onClick={handleClick}>Buy</button>;8}9 10createRoot(document.getElementById("root")!).render(<BuyButton />);

Line 4 types event as the browser's MouseEvent, and line 7 hands the function to onClick, which passes React's. TypeScript marks line 7 on purpose: Type '(event: MouseEvent) => void' is not assignable to type 'MouseEventHandler<HTMLButtonElement>' means the function wants a different kind of event than onClick gives. Add import type { MouseEvent } from "react" and it fits. The same goes for JSX:

1import { createRoot } from "react-dom/client";2 3function Logo(): JSX.Element {4  return <strong>Tea House</strong>;5}6 7createRoot(document.getElementById("root")!).render(<Logo />);

Cannot find namespace 'JSX' on line 3 means there is no JSX to use. Older React types made JSX available everywhere. React 19's types keep it inside React, so import it:

1import { createRoot } from "react-dom/client";2import type { JSX } from "react";3 4function Logo(): JSX.Element {5  return <strong>Tea House</strong>;6}7 8createRoot(document.getElementById("root")!).render(<Logo />);

Line 2 imports the type, and line 4 uses it with no error. The page shows Tea House.

• "TypeScript checks my props while the page runs." No. The types are removed first. Props built from a server reply can still be wrong, so check that data when it arrives (Typing fetch & JSON).
• "Every component needs FC." No. A plain function with a typed parameter gets the same checks at every tag.
• "Every component accepts children." No. Only a component whose props type lists children, and FC doesn't add it for you.
• "onClick gets the browser's MouseEvent." No. It gets React's MouseEvent, which you import from "react".
• "A prop with a default value is required." No. The ? keeps it optional for callers. The default only means it's never undefined inside the component.
• "key has to be in my props type." No. key is React's own prop. Every component accepts it, and your component never sees it in its props.

Practice exercises

Each exercise is a small React component. Press Edit & run on the starter code: the errors update as you type, and the page and console show what it does. Try first, then use the hints.

import { createRoot } from "react-dom/client";

type OrderSummaryProps = {
  orderId: string;
  items: number;
  paid: boolean;
};

function OrderSummary({ orderId, items, paid }: OrderSummaryProps) {
  return <p>Order {orderId}: {items} items, {paid ? "paid" : "not paid"}</p>;
}

createRoot(document.getElementById("root")!).render(
  <OrderSummary orderId="A-17" items="3" paid />
);

1import { createRoot } from "react-dom/client";2 3type OrderSummaryProps = {4  orderId: string;5  items: number;6  paid: boolean;7};8 9function OrderSummary({ orderId, items, paid }: OrderSummaryProps) {10  return <p>Order {orderId}: {items} items, {paid ? "paid" : "not paid"}</p>;11}12 13createRoot(document.getElementById("root")!).render(14  <OrderSummary orderId="A-17" items={3} paid />15);

1import { createRoot } from "react-dom/client";2 3function LikeButton() {4  return <button onClick={(event) => console.log(event.type)}>Like</button>;5}6 7createRoot(document.getElementById("root")!).render(<LikeButton />);

1import { createRoot } from "react-dom/client";2import type { MouseEvent } from "react";3 4function LikeButton() {5  function handleClick(event: MouseEvent<HTMLButtonElement>) {6    console.log(event.type);7  }8  return <button onClick={handleClick}>Like</button>;9}10 11createRoot(document.getElementById("root")!).render(<LikeButton />);

1import { createRoot } from "react-dom/client";2 3function UserAvatar({ name, imageUrl }) {4  return <img src={imageUrl} alt={`Photo of ${name}`} />;5}6 7createRoot(document.getElementById("root")!).render(8  <UserAvatar name="Asha" imageUrl="/asha.png" />9);

1import { createRoot } from "react-dom/client";2 3type UserAvatarProps = {4  name: string;5  imageUrl: string;6};7 8function UserAvatar({ name, imageUrl }: UserAvatarProps) {9  return <img src={imageUrl} alt={`Photo of ${name}`} />;10}11 12createRoot(document.getElementById("root")!).render(13  <UserAvatar name="Asha" imageUrl="/asha.png" />14);

1import { createRoot } from "react-dom/client";2 3function QuantityBox() {4  function handleChange(event) {5    console.log(`Quantity: ${event.target.valueAsNumber}`);6  }7  return <input type="number" aria-label="Quantity" onChange={handleChange} />;8}9 10createRoot(document.getElementById("root")!).render(<QuantityBox />);

1import { createRoot } from "react-dom/client";2import type { ChangeEvent } from "react";3 4function QuantityBox() {5  function handleChange(event: ChangeEvent<HTMLInputElement>) {6    console.log(`Quantity: ${event.target.valueAsNumber}`);7  }8  return <input type="number" aria-label="Quantity" onChange={handleChange} />;9}10 11createRoot(document.getElementById("root")!).render(<QuantityBox />);

1import { createRoot } from "react-dom/client";2import type { ReactNode } from "react";3 4type InfoCardProps = {5  title: string;6  children: ReactNode;7};8 9function InfoCard({ title, children }: InfoCardProps) {10  return (11    <section>12      <h2>{title}</h2>13      {children}14    </section>15  );16}17 18createRoot(document.getElementById("root")!).render(19  <div>20    <InfoCard title="Delivery">Free over $20</InfoCard>21    <InfoCard />22  </div>23);

1import { createRoot } from "react-dom/client";2import type { ReactNode } from "react";3 4type InfoCardProps = {5  title?: string;6  children?: ReactNode;7};8 9function InfoCard({ title = "Good to know", children }: InfoCardProps) {10  return (11    <section>12      <h2>{title}</h2>13      {children}14    </section>15  );16}17 18createRoot(document.getElementById("root")!).render(19  <div>20    <InfoCard title="Delivery">Free over $20</InfoCard>21    <InfoCard />22  </div>23);

1import { createRoot } from "react-dom/client";2 3type StarRatingProps = {4  onRate: (stars: number) => void;5};6 7function StarRating({ onRate }: StarRatingProps) {8  return (9    <p>10      <button onClick={() => onRate(1)}>1 star</button>11      <button onClick={() => onRate(5)}>5 stars</button>12      <button onClick={() => onRate(6)}>6 stars</button>13    </p>14  );15}16 17createRoot(document.getElementById("root")!).render(18  <StarRating onRate={(stars) => console.log(`You gave ${stars} stars`)} />19);

1import { createRoot } from "react-dom/client";2 3type Stars = 1 | 2 | 3 | 4 | 5;4 5type StarRatingProps = {6  onRate: (stars: Stars) => void;7};8 9function StarRating({ onRate }: StarRatingProps) {10  return (11    <p>12      <button onClick={() => onRate(1)}>1 star</button>13      <button onClick={() => onRate(5)}>5 stars</button>14    </p>15  );16}17 18createRoot(document.getElementById("root")!).render(19  <StarRating onRate={(stars) => console.log(`You gave ${stars} stars`)} />20);

Check your understanding

Key takeaways

• A component takes one props object. Type it like a parameter, after the whole pattern.
• TypeScript checks every tag against the props type: missing, misspelled, and wrong-typed props are marked.
• children is a prop like any other. Type it ReactNode unless you need something narrower.
• Inline handlers get their event type from the element. A handler written on its own needs one, like ChangeEvent<HTMLInputElement>.
• React's event types come from "react", not from the browser's globals.
• Optional props use ?. Default values in the parameter list remove undefined inside.
• Types are gone when the page runs, so data from outside still needs checking.

Coming next: Typing state & hooks. Components also remember things: state, reducers, refs, and context all have types too.