React Academy · Lesson

Typing Props & Component Return Types

Define prop interfaces, use React.FC vs explicit return types, and type optional props.

Typing Props & Component Return Types is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Type Props?

TypeScript prop types catch wrong prop names, missing required props, and type mismatches at compile time rather than at runtime.

Defining a Props Interface

Create an interface or type alias for your props and pass it as a generic to React.FC or annotate the destructured parameter directly.

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
}

function Button({ label, onClick, variant = 'primary', disabled = false }: ButtonProps) {
  return <button onClick={onClick} disabled={disabled} className={variant}>{label}</button>;
}

React.FC vs Explicit Return Type

React.FC<Props> infers children and return type but has some quirks (implicit children before React 18). Prefer explicit parameter typing for clarity.

// Prefer this:
function Card({ title }: { title: string }): JSX.Element {
  return <div>{title}</div>;
}

// Over this (React.FC quirks pre-18):
const Card: React.FC<{ title: string }> = ({ title }) => <div>{title}</div>;

Optional vs Required Props

Mark optional props with ?. TypeScript enforces that required props are always provided at the call site.

interface AvatarProps {
  src: string;          // required
  alt: string;          // required
  size?: number;        // optional, defaults to 40
  className?: string;   // optional
}

function Avatar({ src, alt, size = 40, className }: AvatarProps) {
  return <img src={src} alt={alt} width={size} height={size} className={className} />;
}

Union Types for Variants

Use string literal unions to restrict a prop to a set of valid values, giving autocomplete and error checking.

interface AlertProps {
  type: 'info' | 'warning' | 'error' | 'success';
  message: string;
}

function Alert({ type, message }: AlertProps) {
  return <div className={`alert alert-${type}`}>{message}</div>;
}

Children Prop Typing

Type children explicitly using React.ReactNode (most permissive) or React.ReactElement (only JSX elements).

interface CardProps {
  title: string;
  children: React.ReactNode; // string, element, array, null
}

function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="body">{children}</div>
    </div>
  );
}

Function Props

Type callback props by spelling out the function signature: parameter types and return type.

interface InputProps {
  value: string;
  onChange: (value: string) => void;
  onBlur?: () => void;
  onEnter?: (value: string) => void;
}

function Input({ value, onChange, onBlur }: InputProps) {
  return (
    <input
      value={value}
      onChange={e => onChange(e.target.value)}
      onBlur={onBlur}
    />
  );
}

Component Return Types

React components should return JSX.Element, React.ReactElement, or React.ReactNode. null is valid when a component renders nothing.

function ConditionalBanner({ show }: { show: boolean }): JSX.Element | null {
  if (!show) return null;
  return <div className="banner">Welcome!</div>;
}

Spreading Props with Type Safety

Use React.HTMLAttributes<HTMLDivElement> or spread rest props to forward arbitrary HTML attributes while keeping custom props typed.

interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
  padding?: number;
}

function Box({ padding = 16, style, ...rest }: BoxProps) {
  return <div style={{ padding, ...style }} {...rest} />;
}

Discriminated Union Props

Use discriminated unions when a component's props shape changes based on a type field, enforcing valid combinations.

type ButtonProps =
  | { as: 'button'; onClick: () => void }
  | { as: 'a'; href: string };

function Action(props: ButtonProps) {
  if (props.as === 'button') return <button onClick={props.onClick}>Go</button>;
  return <a href={props.href}>Go</a>;
}

Default Props via Destructuring

In TypeScript + React, set defaults with destructuring defaults instead of defaultProps (which is deprecated for function components).

interface ToastProps {
  message: string;
  duration?: number;
  position?: 'top' | 'bottom';
}

function Toast({ message, duration = 3000, position = 'top' }: ToastProps) {
  return <div className={`toast ${position}`}>{message}</div>;
}

Quick Check

Which TypeScript type is the most permissive for typing the children prop in React?

Recap

Define prop shapes with interfaces, use literal unions for variant props, type callbacks with full signatures, and prefer destructuring defaults over defaultProps. Return JSX.Element | null from components that conditionally render nothing.

Frequently asked questions

Is the “Typing Props & Component Return Types” lesson free?

Yes — the full text of “Typing Props & Component Return Types” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Typing Props & Component Return Types”?

Define prop interfaces, use React.FC vs explicit return types, and type optional props. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Typing Props & Component Return Types” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy