Does anyone know why, when using styled-componets with react, you pass the component a reference to the entire interface instead of the idividual paramets in the interface? I am new to TS so I may be using some words incorrectly.
-You can see at the top, ListItemProps is passed entirely to the styled-component, and below that, the ListGroup component accepts the individual parameters of the Props interface.
Thanks, and have a great day coding everyone!
Iām neither familiar with Styled Components nor with the template literal strings they seem to use.
But really the examples donāt look different to me. You declare that ListGroup accepts a parameter of type Props. items, heading and onSelectItem are not individual parameters. With the curly braces you are destructuring variables from an argument of type Props passed to your function.
In the first example I read the ListItemProps generic parameter as the type of the variable you can use in the template string. But take that with a pinch of salt.
Thanks, I believe I understand what you are saying, āPropsā and āListItemPropsā are the argument type that each function can accept,
but: ( {items, heading, onSelectItem} : Props )
could just as well be ā¦ ( {Props} )
I just would not have destructured access to the internal variables without an additional renaming step.
Thatās what I was trying to say, yes.
(props: Props)
Iām still puzzled about the syntax in the first example though. Is that covered in the course somewhere or are you applying Styled Components to the examples by yourself?
Itās not covered in any specific detail. Itās just one of the examples he shows for styling components. the library is just āstyled-componentsā. Iāve never worked with it outside of this module so itās new to me. I assume they are just using the carats as indicators like <? for php or $ for jquery.
For anybody that is as confused about the syntax as I was: I knew that the thing in backticks is a template literal but I have never seen a function directly in front of it neither in JavaScript nor in TypeScript.
What we have here is called a tagged template literal. Quite a mighty tool and itās been around for almost eight yearsā¦
