[TypeScript](/courses/typescript) lets you describe exactly which props a [React](/courses/reactjs) component accepts and what type each prop should contain. This catches many mistakes before the application runs and also gives better editor autocomplete. ### Basic Props Typing ```tsx interface UserCardProps { name: string; age: number; isActive: boolean; } function UserCard({ name, age, isActive }: UserCardProps) { return (

{name}

Age: {age}

{isActive ? "Active" : "Inactive"}

); } ``` [TypeScript](/courses/typescript) now rejects incorrect usage: ```tsx ``` because: ```text age expects number but received string ``` Correct: ```tsx ``` ### type vs interface for Props Both are valid: ```tsx type ButtonProps = { label: string; disabled: boolean; }; ``` or: ```tsx interface ButtonProps { label: string; disabled: boolean; } ``` You do not need to choose one because [React](/courses/reactjs) requires it. React works with both. A project should usually choose a consistent convention unless a particular TypeScript feature makes one more convenient. ### Optional Props Use `?` when a prop is optional: ```tsx interface AvatarProps { src: string; alt?: string; } ``` Then both are valid: ```tsx ``` and: ```tsx ``` ### Default Values ```tsx interface ButtonProps { label: string; variant?: "primary" | "secondary"; } function Button({ label, variant = "primary" }: ButtonProps) { return ( ); } ``` The union: ```tsx "primary" | "secondary" ``` prevents unsupported values such as: ```tsx ); } ``` Now TypeScript knows that `onSelect` must be a [function](/javascript/functions-in-javascript) receiving a string. ### Typing children For ordinary React content, `React.ReactNode` is commonly appropriate: ```tsx import type { ReactNode } from "react"; interface CardProps { title: string; children: ReactNode; } function Card({ title, children }: CardProps) { return (

{title}

{children}

); } ``` This allows children such as: ```text JSX elements Strings Numbers Fragments Arrays of renderable content null ``` ### Typing Object Props ```tsx type User = { id: string; name: string; email: string; }; interface ProfileProps { user: User; } function Profile({ user }: ProfileProps) { return

{user.name}

; } ``` Defining domain types separately lets the same `User` type be reused throughout the application. ### Prefer Specific Types Over any Avoid: ```tsx interface ProfileProps { user: any; } ``` because `any` removes much of TypeScript's protection. Prefer an actual model: ```tsx interface User { id: string; name: string; } ``` ### Interview-Ready Answer React props can be typed with either a TypeScript `type` or `interface`. Required, optional, object, union, callback, and children props can all be described explicitly. `ReactNode` is commonly used for normal children, while specific domain types should be preferred over `any`. Proper prop typing catches invalid component usage and documents the component API.