## Reading Typed Components In Level 2, you learned that props are how a parent component passes data to a child component. In plain JavaScript, you had to look at how the props were used inside the component to figure out what they were. With TypeScript, the component declares its props up front in an interface -- and that interface becomes the single best piece of documentation about what the component needs. ### The Props Interface Here is a typical typed React component: ```typescript interface ButtonProps { label: string; onClick: () => void; variant?: "primary" | "secondary" | "danger"; disabled?: boolean; } function Button({ label, onClick, variant = "primary", disabled = false }: ButtonProps) { return ( ); } ``` Look at that `ButtonProps` interface. Without reading a single line of the component's logic, you already know: - The button needs `label` (text to display) -- **required** - The button needs `onClick` (a click handler function) -- **required** - The button accepts a `variant` (one of three visual styles) -- **optional**, defaults to "primary" - The button accepts a `disabled` flag -- **optional**, defaults to false This is the component's contract. It tells you exactly how to use it. If you are a PM reviewing a pull request, or a designer checking if the component matches specs, the props interface is the first thing to read. ### Reading Function Types in Props You will frequently see function types in props interfaces. Here are the most common patterns: ```typescript interface FormProps { onSubmit: (data: FormData) => void; onChange: (field: string, value: string) => void; onCancel: () => void; validate?: (data: FormData) => boolean; } ``` Let us decode each one: - `onSubmit: (data: FormData) => void` -- a function that receives form data and returns nothing (it just does something, like sending to a server) - `onChange: (field: string, value: string) => void` -- a function that receives a field name and a value, returns nothing - `onCancel: () => void` -- a function that takes nothing and returns nothing (just triggers an action) - `validate?: (data: FormData) => boolean` -- an optional function that takes form data and returns true or false The pattern is always `(parameters) => returnType`. When the return type is `void`, it means the function does something but does not give a value back -- like clicking a button or submitting a form. ### Two Styles of Typed Components You will see two ways developers type their components. Both do the same thing: **Style 1: Typed parameter (more common today)** ```typescript function UserCard({ name, email, avatar }: UserCardProps) { return (

{name}

{email}

); } ``` **Style 2: React.FC (older style, still common)** ```typescript const UserCard: React.FC = ({ name, email, avatar }) => { return (

{name}

{email}

); }; ``` In Style 2, `React.FC` means "this is a React Function Component that accepts UserCardProps." The angle brackets `< >` are generics -- we will cover those next. For now, just know that `React.FC` means "a component that takes Something as props." Both styles work the same way. When you see either pattern, look for the props interface to understand what the component expects. ### Union Types: One of These Values You saw `"primary" | "secondary" | "danger"` in the Button example. The `|` symbol means "or" -- the value must be exactly one of these options. This is extremely common in React components: ```typescript interface AlertProps { message: string; severity: "info" | "warning" | "error" | "success"; size?: "sm" | "md" | "lg"; onDismiss?: () => void; } ``` When you see a union type like this, think of it as a dropdown menu -- the value must be one of the listed options. This is incredibly useful for code review: if a designer asks "what visual variants does this component support?", the union type is the answer. ### Generics: The Angle Brackets Sometimes you will see angle brackets with letters inside them: ```typescript interface ListProps { items: T[]; renderItem: (item: T) => React.ReactNode; keyExtractor: (item: T) => string; } ``` This looks intimidating, but the concept is simple: **`` means "this works with any type."** The `T` is a placeholder. When someone uses this component, they fill in what `T` actually is: ```typescript items={users} renderItem={(user) => } keyExtractor={(user) => user.id} /> ``` Here `T` becomes `User`, so `items` is `User[]`, `renderItem` receives a `User`, and `keyExtractor` receives a `User`. **The practical reading strategy for generics:** when you see `` or ``, mentally replace it with the actual type being used. If you cannot figure out the actual type, you can often just ignore the generic and focus on the structure. Generics are a power tool for library authors -- as a code reader, you rarely need to understand them deeply. ### Putting It Together: Reading a Real Typed Component Here is a realistic component you might see in a production codebase: ```typescript interface SearchBarProps { placeholder?: string; value: string; onChange: (query: string) => void; onSubmit: (query: string) => void; isLoading?: boolean; suggestions?: string[]; onSelectSuggestion?: (suggestion: string) => void; } function SearchBar({ placeholder = "Search...", value, onChange, onSubmit, isLoading = false, suggestions = [], onSelectSuggestion, }: SearchBarProps) { return (

); } ``` Reading the props interface alone tells you everything about this component: - It shows a search input with a configurable placeholder - It is a **controlled component** -- the parent owns the `value` and `onChange` - It can show a loading state - It can display suggestions as a dropdown - The parent gets notified on submit and when a suggestion is selected You did not need to read the JSX to understand what this component does. The interface told you. That is the power of typed components.

5.2 Reading Typed Components