XJavascript.com
Toggle Menu
Home
Online Javascript Compiler
Tutorials
JavaScript Tutorials
TypeScript Tutorials
Blog
All Posts
React with TypeScript
Test your understanding of typing components,props,and hooks in React.
1. What are the primary ways to define props for a TypeScript React component?
Only interfaces
Only type aliases
Both interfaces and type aliases
Neither; props are inferred automatically
2. Which React hooks require explicit typing in TypeScript?
useState
useEffect
useRef
useContext
3. TypeScript can infer the state type for useState if the initial value is provided.
True
False
4. What is the TypeScript type for a button click event handler's event object? (format: React.XyzEvent<...>)
5. How do you define optional props in TypeScript?
Add a '?' after the prop name
Use the 'Optional' keyword
Set the type to 'any'
Wrap the type in 'Maybe'
6. Which are valid return types for a TypeScript React functional component?
JSX.Element
null
React.ReactNode
string
7. React.FC automatically includes the 'children' prop by default.
True
False
8. What utility type makes all properties of a type optional? (TypeScript keyword)
9. What is the correct way to type a ref for an input element?
useRef<HTMLInputElement>(null)
useRef(null)
useRef<Input>(null)
useRef<ReactNode>(null)
10. Which are benefits of using TypeScript with React?
Type safety for props and state
Automatic code formatting
Better IDE autocompletion
Early error detection
11. Class components in TypeScript use React.Component<Props, State> to type props and state.
True
False
12. What interface/type is used to define the props of a functional component with no props? (e.g., () => <div />)
13. What is the difference between interface and type alias for props?
Interfaces can be extended; type aliases cannot
Type aliases can be extended; interfaces cannot
No meaningful difference for props
Interfaces are for objects; type aliases for primitives
14. Which TypeScript types are valid for React children?
React.ReactNode
JSX.Element
string
number
15. Using 'any' for props is recommended in TypeScript React to save time.
True
False
16. What is the abbreviation for the TypeScript utility type that makes all properties required?
17. How do you type a state that can be either a string or null?
useState<string | null>(null)
useState(null as string)
useState<string>(null)
useState(null)
18. What are valid ways to handle default props in TypeScript React?
Function parameter defaults (e.g., (props = { name: 'Guest' }) => ...)
Component.defaultProps
Using the 'default' keyword in interfaces
With the Partial utility type
19. React event handlers must always specify the event type to avoid 'any'.
True
False
20. What is the TypeScript type for the context value returned by createContext?
Reset
Answered 0 of 0 — 0 correct