Typing props

Declare a component's props as a type or interface, with optional ones marked. The compiler then checks every usage of the component and documents what it accepts.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

Declare a props type with required and optional fields
Explain what the compiler checks at each usage of the component
Spot the React.FC children assumption and type children explicitly

In practice

A few lines that show Typing props doing its job.

TSX

type ButtonProps = {
  variant?: "primary" | "ghost";
  disabled?: boolean;
  onClick: () => void;
  children: React.ReactNode;
};

export function Button({ variant = "primary", ...rest }: ButtonProps) {
  return <button className={"btn-" + variant} {...rest} />;
}

The common mistake

Watch for

Typing props with React.FC and relying on its implicit children. It hides which components really accept children, and newer React types no longer add children for you.

What to know first

Your roadmap puts these before Typing props, unless you already know them.

Passing props

How it stays learned

Once a session shows you understand Typing props, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

Day 3First recall, while it is fresh
Day 7Second, a week on
Day 18Last, when it has settled

Where it leads

Topics that build on Typing props.

Next in the moduleTyping events →