Using TypeScript features with React
TypeScript is a valuable addition to your React projects, especially when they grow in complexity. In this section, we will learn how we can get prop and state type validation in our React components and detect potential errors early in development.
State and props
In React, you have to define the type of component props. We have already learned that component props are JavaScript objects, so we can use type
or interface
to define the prop type.
Let’s look at one example where a component receives a name
(string
) and age
(number
) prop:
function HelloComponent({ name, age }) {
return(
<>
Hello {name}, you are {age} years old!
</>
);
}
export default HelloComponent;
Now, we can render our HelloComponent
and pass props to it:
// imports...
function App() {
return(
<HelloComponent name="Mary" age={12} />
)
}
export default App;