Upgrade your React game with TypeScript: Interfaces, types and components

Now it's time to put some flavor on our app and create a few components for our app. To do so, we need to understand some TypeScript concepts.

Types

Types are for letting TS know what kind of data for a specific property should expect.

interface CandyBar{
  name: string;
  okToSell: boolean;
  inventory: number;
  categories?: string[];
  howManyinTheFreezer: (bars: number)=> number,
}

These are just a few examples of the types. By adding the ? to a type we make it optional. For functions we have to make sure to specify the type for its parameters and for what it will return.

Interfaces

An interface is what allows us to create the syntax for a class. Interfaces can be extended dynamically, so we can do something like this:

interface Dog{
  name: string,
  age: number,
}
interface Breed extends Dog{
  breed: string,
}
interface Dog{
  isFriendly: boolean,
}

Here we're extending Dog's interface with Breed and then we're adding types to it.

Ok, got it 📝.

There's one extra thing to add before going hard into our first component, though.

Prop-types

React has a very useful way to check for types too, prop-types and if we mix it with TypeScript, we can make sure to check from compiler to runtime. Isn't it great?

We can take advantage of it by doing the following:

npm i --save-dev @types/prop-types prop-types

And making sure in our component we add import PropTypes from 'prop-types';

Creating our first component

Ok, now we're good to go. I decided to go slow and start with a component that won't require a lot since we're just starting: a Navbar.

When we do stateless components like this, practically the only change our code has is the Menubar: React.FC part right at the very beginning. In that part, we're specifying that Menubar's type as a React Functional Component. The rest of the code is the usual HTML with Tailwind classes.

Now, how about something that requires us to use Props? We're doing a Banner component. The prop is going to be an image we're going to give it since we want to be able to change it up easily.

Now all we need to do it's call it in App.tsx, give it the props we defined and we're good to go.

I hope you found this helpful, stay safe and please remember to take a break.

Got something to add? Please feel free to reach out for any question, comment, meme or dog photos swap.