How are TypeScript types typically applied to React components?

How are TypeScript types typically applied to React components?

• A. Use any for props to avoid typing complexity.
• B. Define a Props interface and annotate the component signature; use useState<number>() to type state; optionally use React.FC<Props>.
• C. Only function components can have typed props.
• D. State in functional components cannot be typed.

Answer: (B)

When using TypeScript with React, you describe the shape of what a component expects by defining a Props type (or interface) and then annotating the component’s parameters with that type. This ensures the props you pass match what the component expects, catching mismatches at compile time. For internal state in a functional component, you can specify its type with the useState hook, such as useState<number>(0) to keep the state as a number. Using React.FC<Props> is optional; it can be convenient to declare a component as a function component with Props, but it isn’t required and some teams avoid it for flexibility with children and default props. It’s also worth noting that typing props isn’t limited to function components—class components can be typed by extending React.Component<Props, State>. In short, define Props, annotate the component signature with that type, type state with useState’s generic, and you have a clear, type-safe React component structure.

When using TypeScript with React, you describe the shape of what a component expects by defining a Props type (or interface) and then annotating the component’s parameters with that type. This ensures the props you pass match what the component expects, catching mismatches at compile time. For internal state in a functional component, you can specify its type with the useState hook, such as useState(0) to keep the state as a number. Using React.FC is optional; it can be convenient to declare a component as a function component with Props, but it isn’t required and some teams avoid it for flexibility with children and default props. It’s also worth noting that typing props isn’t limited to function components—class components can be typed by extending React.Component<Props, State>. In short, define Props, annotate the component signature with that type, type state with useState’s generic, and you have a clear, type-safe React component structure.