Create an Avatar Component in Gatsby with TypeScript Part 3: Adding Types

This is part 3 of the Create an Avatar Component in Gatsby with TypeScript series

  1. 1) Create an Avatar Component in Gatsby with TypeScript Part 1
  2. 2) Create an Avatar Component in Gatsby with TypeScript Part 2: Gatsby Image
  3. 3) Create an Avatar Component in Gatsby with TypeScript Part 3: Adding Types

We left off with our avatar component working using Gatsby Image and still able to receive an image url. Now, let's look at what it would take to type this component. I like to use type instead of interface for the props. You can read more about the difference between type and interface if you'd like.

The props type will look something like this:

The cool part here is that the user prop can be typed to match the graphql alias names. This helps anyone consuming this component know the values they can pass.

Let's take a look at typing our data variable. We know the shape of what we expect because of our graphql. We just need to provide the correct typing at the childImageSharp level. Luckily Gatsby Image has a type of FixedObject that can help us out here. We pass the type to the static query hook like useStaticQuery<Data>(graphql to signify that we expect the return to be Data.

Let's refactor the redundancy in the Data type.

Cool, now we should have something like this:

Thanks for following along!

Categorydev
Discuss this article on Twitter