What is this type?!

Alvin Crespo
Alvin CrespoThursday, October 25, 2018
Four penguins standing

If you’re new to TypeScript and you’re using a library like react-emotion, you might be wondering how to type your styled components. Here’s what I do.

Let’s say you have the following styled component:

React code

What is the type for AStyledComponent?

I don’t know, but VSCode is here to save the day:

React code

The above image shows me hovering over AStyledComponent and VSCode showing me what type it is. We can then use this type:

React code

But…what are all these type definitions? And, where do they come from?

Well, after some digging around in react-emotion, create-emotion-styled and react itself — I found these awesome imports:

React code

Note: When I say “digging” I meant going into node_modules/react-emotion, node_modules/create-emotion-styled and looking in their type definitions file (index.d.ts ).

As for the parameters for StyledOtherComponent<A, B, C> :

  • A, denoted as any in the images above, is for the properties used within the style definition. B, denoted as DetailedHTMLProps<HTMLAttributes, HTMLDivElement> is for the component you are wrapping.
  • C, denoted as any, is for a theme.

Alright! That’s all I have for you folks today. Let me know if you have any questions or feedback — I’d love to hear it.

Also, did you know the team at Echobind is hiring?! That’s right, we’re looking for some awesome people to help us build some cool products. For more info, check us out here.

Share this post


Related Posts:

Interested in working with us?

Give us some details about your project, and our team will be in touch with how we can help.

Get in Touch