Typing React Components in TypeScript (Practical Patterns)

30‑second interview answer

In React + TypeScript, type your component props with an interface/type, prefer explicit prop types, and rely on inference for JSX. Use correct event types (React.ChangeEvent, etc.), avoid overusing React.FC, and use generics when building reusable components. Keep types simple and ergonomic.

Typing props

type ButtonProps = {
  variant?: 'primary' | 'secondary';
  onClick?: () => void;
  children: React.ReactNode;
};
 
function Button({ variant = 'primary', onClick, children }: ButtonProps) {
  return <button onClick={onClick}>{children}</button>;
}

Events

function Input() {
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };
  return <input onChange={onChange} />;
}

Generics in components

type SelectProps<T> = {
  items: T[];
  getLabel: (item: T) => string;
};
 
function Select<T>({ items, getLabel }: SelectProps<T>) {
  return (
    <ul>
      {items.map((item, i) => (
        <li key={i}>{getLabel(item)}</li>
      ))}
    </ul>
  );
}

Common pitfalls

Using any for events
Overcomplicating with React.FC
Using index keys in lists

Mini Q&A

Q1: Should you use React.FC?

Not required; many teams avoid it.

Q2: How do you type children?

React.ReactNode.

Q3: When do you need generics?

reusable typed components.

Summary checklist

I can type props and events.
I avoid overusing React.FC.
I can write a generic component.