JS & TS Fundamentals
JavaScript API
TypeScript Deep Dive
Work with Generics
# React and Inference
In the next example we can see how a React
useState hook can infer the type. In fact:useStateis initialized with the stringFabio.- TypeScript infers the type of
nameto bestringbased on the initial value provided. - Therefore,
nameis inferred to always be astring, andsetNameis expected to be called with a value of typestring.
App.tsx
When we try to assign a
number or a boolean to the name state, we get an error, although we did not explicitly the state to be typed as a string:When we try to assign a
number or a boolean to the name "state" we get an error, even though we did not explicitly specify that the state should be typed as a string.
Run the script above, and after removing the comments, you'll observe the type errors displayed by the interactive playground.
In a real-world project, this would result in a compiler error, preventing you from progressing further with the project and deploying new builds.
# Additional Notes
- Inference works even if we initialize the state with objects and arrays
- Inference cannot work if
useStateis initialized withnullorundefinedsince he would not be able to deduce the type
