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 in React.FC<Props> we're letting TypeScript now this component will need props, destructuring we're letting it know it specifically needs bannerImg and an altImg prop.

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.

Comments

[Nick Taylor]

Great post Elizabeth! One suggestion. For interfaces and any types you define in TypeScript, use Pascal casing. I believe it's the official naming convention.

Also, a couple of other resources that you may find useful:

• @swyx 's awesome cheat sheet for TypeScript and React that he created a while back.

Nick Taylor (he/him)

@nickytonline

@SharpeMartha There's an awesome TypeScript React cheatsheet created by @swyx as well that you might find helpful

github.com/typescript-che…

17:15 PM - 10 Jul 2020

0 2

• If you are looking to bootstrap a new TypeScript project, including a React project, consider giving TSDX a look.

@dance2die wrote about TSDX a while back.

How to use TSDX

Sung M. Kim ・ Jun 17 '19 ・ 1 min read

#tsdx #react #typescript

Looking forward to your next post!

[Elizabeth Villalejos]

Hi Nick! Thank you for pointing it out (I'll update it ASAP) and for sharing those resources. I'll be diving into it 🤓

[w3bdesign]

I think you may have forgotten something, you are talking about both types and interfaces, but I see interface CandyBar which should probably be type CandyBar ?

[Elizabeth Villalejos]

It's interface CandyBar.
For example within that interface, okToSell: boolean would be the name of the property and the type.