How to Type React Props with TypeScript

Type React props with TypeScript by giving the props parameter an object type. Write the type inline or extract it into an interface, and TypeScript then checks every usage and adds editor autocomplete. Typed props turn a wrong prop into a compile error before the app runs.

Type props inline

The quickest way is an inline object type after the parameter:

App.tsx

function Greeting({ name }: { name: string }) {
  return <h1>Hello, {name}</h1>;
}

Passing a number instead of a string now fails to compile. The editor also suggests name as you type the component. TypeScript checks the value at the call site, so a mistake is caught where the component is used.

Extract an interface or type alias

Inline types get crowded with several props. Move the shape into an interface:

App.tsx

interface GreetingProps {
  name: string;
  count: number;
}
 
function Greeting({ name, count }: GreetingProps) {
  return <h1>Hello, {name} ({count})</h1>;
}

A type alias works the same way. Interfaces are common for props because they can be extended, but either choice is valid. Interfaces also give editor previews a name, so hovering a prop shows GreetingProps instead of a long inline shape.

Optional props and unions

Mark a prop optional with a question mark. Use a union type when a prop accepts a few known values:

App.tsx

type BadgeProps = {
  label: string;
  tone?: "green" | "red";
};
 
function Badge({ label, tone = "green" }: BadgeProps) {
  return <span className={"badge " + tone}>{label}</span>;
}

The tone prop is optional, and TypeScript only allows the strings green or red. The default keeps the component usable when a caller omits the tone. A typo like tone="reed" fails to compile, because only the listed strings are allowed.

Choose inline, interface, or type alias

Pick the form that keeps the component readable. Inline types are fine for one or two props, and an interface scales as props grow.

• One or two props: inline is fine.
• Several props: an interface.
• A union of fixed values: a type alias.

The choice is mostly team style. The important part is that every prop has a type.

Prop types catch mistakes early

Typed props protect the contract between a component and its callers. Wrong value types, missing required props, and invalid union values all fail at compile time.

• Wrong type: TypeScript flags it at the call site.
• Missing required prop: TypeScript flags it immediately.
• Invalid union value: only the listed values compile.

The earlier a mistake is caught, the cheaper the fix. This is why teams add TypeScript to React projects in the first place. The props type is the smallest piece that delivers that safety.

What to learn next

The TypeScript setup guide covers installation and tooling, then learn to type the children prop specifically.