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;

If we use TypeScript, we can first...