| name | react-typescript |
| description | Type React components and hooks with TypeScript patterns. Use when typing React props, hooks, event handlers, or component generics in TypeScript. |
| metadata | {"triggers":{"files":["**/*.tsx"],"keywords":["ReactNode","FC","PropsWithChildren","ComponentProps","react typescript","tsx types","props interface","generic component","useState type","useRef type","typed hooks"]}} |
React TypeScript
Priority: P1 (HIGH)
Implementation Guidelines
- Components: Prefer interface/type (
Props) over React.FC (which implicit children). Use JSX.Element or ReactNode as return type.
- Children: For components that accept children, use
PropsWithChildren<T> or explicitly type them as React.ReactNode.
- Events: Always type event handlers using specific React events, such as
React.ChangeEvent<HTMLInputElement> or React.FormEvent<HTMLFormElement>.
- Hooks: For
useRef, avoid any; use useRef<HTMLDivElement>(null). For useState, use generics for complex types: useState<User | null>(null).
- Native Elements: Use
ComponentPropsWithoutRef<'button'> or ComponentPropsWithRef to extend native attributes safely.
- Generics: Implement generic components for reusable UI like lists using
<T,>(props: ListProps<T>).
- Discriminated Unions: Use Discriminated Unions for mutually exclusive props (e.g.,
success vs error states).
- Utility Types: Leverage
Omit, Pick, and Partial to transform prop interfaces and avoid redundancy.
Anti-Patterns
- No
any: Use unknown.
- No
React.FC: Implicit children deprecated/bad practice.
- No
Function: Use (args: T) => void.
References
See references/example.md for typed props, generic components, and hook ref patterns.
Canonical response anchors
When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
