Typing React Component Props with TypeScript
Use TypeScript to define a 'contract' for your component's props with an interface or type. This catches bugs by ensuring data passed to a component has the correct shape. The footgun: files with JSX must use the .tsx extension.
Why it exists
JavaScript is dynamically typed, which means you can pass any data as a component prop. This is flexible but error-prone, often leading to runtime bugs. TypeScript adds a static type system to catch mismatches between what a component expects and what it receives before the code even runs.
The mental model
Think of TypeScript props as a contract. A component declares the exact 'shape' of the data it needs to render (e.g., title must be a string, disabled must be a boolean). Any parent component using it must honor that contract. If it doesn't, the TypeScript compiler will raise an error, preventing a class of common bugs.
How it works
You define the shape of your props using a TypeScript interface or type. Then, in your component's function signature, you destructure the props and apply that type. For example, function MyButton({ title, disabled }: ButtonProps). The TypeScript compiler then checks all usages of <MyButton ... /> to ensure the provided props match the ButtonProps interface. Every file containing JSX must use the .tsx file extension.
When to use it
Use TypeScript props in almost all React projects to improve code quality and maintainability. It is especially valuable in large codebases or when working in a team, as it makes components self-documenting and easier to use correctly. Most modern React frameworks like Next.js or Remix offer TypeScript support out of the box.
When not to use it
For very small, quick prototypes or single-file experiments, the overhead of defining types might feel unnecessary. However, given the robust tooling and framework support, the reasons to avoid it in any production-level application are minimal.
One canonical example
To create a typed button component, first define its props: interface MyButtonProps { title: string; disabled: boolean; }. Then, use this in the component definition: function MyButton({ title, disabled }: MyButtonProps) { return <button disabled={disabled}>{title}</button>; }. Now, using <MyButton title="Submit" disabled={false} /> is type-safe. Trying to pass title={123} would cause a compile-time error.
Interview question
What is the primary benefit of using TypeScript to define the shape of React component props?
- a.It simplifies the process of creating default values for optional component props.
- b.It ensures that data passed to a component matches its expected structure during compilation.Correct
- c.It enables components to automatically adapt their behavior based on prop types at runtime.
- d.It reduces the overall amount of code required to define and use component props.
Why? this is the answer
The card emphasizes that TypeScript adds a static type system to catch mismatches "before the code even runs," which means during compilation. This prevents runtime bugs by ensuring prop data conforms to the defined shape. Option C describes dynamic runtime behavior, which is not what TypeScript's static type checking provides.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles