Typed Props Typed Props Contracts
Last updated: 2026-11-02
Typed Props Typed Props Contracts
In TypeScript you use interface or type to build a contract for props: wrong names, missing props and mismatched types are all caught at compile time, and the editor gains auto-completion for free. Annotate the component parameter with a shape and the runtime cost stays at zero. The contract also documents the component for the next reader, so the API of a component is written down in one place.
| Group | Data & Engineering |
|---|---|
| Kind | Pattern |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
type User = { id: number; name: string; vip?: boolean } // ? marks an optional property
type UserCardProps = {
user: User
onSelect: (id: number) => void // callback: annotate both the parameters and the return type
children?: React.ReactNode // any renderable content
}
function UserCard({ user, onSelect }: UserCardProps) {
return <li onClick={() => onSelect(user.id)}>{user.name}</li>
}
// ❌ Compile error: <UserCard user={{ id: 'x' }} /> id should be a numberReturns：No return value; this is a coding pattern rather than a callable API.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
The table shows the props contract of UserCard; clicking a user triggers the onSelect callback and prints its id - in a real TypeScript project a wrong type would fail at compile time (runtime JSX demo).💡 Key Points
🏷️ More Data & Engineering
💡 Related Cases
📚 Related Tutorials
❓ FAQ
