# TypeScript with Styled components
**URL:** https://forum.codewithmosh.com/t/typescript-with-styled-components/18883
**Category:** TypeScript
**Created:** [March 17, 2023, 5:42pm UTC](https://forum.codewithmosh.com/t/typescript-with-styled-components/18883 "2023-03-17T17:42:11Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@mechanicDev](https://forum.codewithmosh.com/u/mechanicDev)
#### Post date: [March 17, 2023, 5:42pm UTC](https://forum.codewithmosh.com/t/typescript-with-styled-components/18883/1 "2023-03-17T17:42:11Z")
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!
---
### Author:  [@SAM](https://forum.codewithmosh.com/u/SAM)
#### Post date: [March 18, 2023, 9:52am UTC](https://forum.codewithmosh.com/t/typescript-with-styled-components/18883/2 "2023-03-18T09:52:54Z")
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.
---
### Author:  [@mechanicDev](https://forum.codewithmosh.com/u/mechanicDev)
#### Post date: [March 19, 2023, 1:20am UTC](https://forum.codewithmosh.com/t/typescript-with-styled-components/18883/3 "2023-03-19T01:20:40Z")
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.
---
### Author:  [@SAM](https://forum.codewithmosh.com/u/SAM)
#### Post date: [March 19, 2023, 8:55am UTC](https://forum.codewithmosh.com/t/typescript-with-styled-components/18883/4 "2023-03-19T08:55:37Z")
That’s what I was trying to say, yes.
> [@mechanicDev](#):
>
> could just as well be … ( {Props} )
`(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?
---
### Author:  [@mechanicDev](https://forum.codewithmosh.com/u/mechanicDev)
#### Post date: [March 19, 2023, 4:47pm UTC](https://forum.codewithmosh.com/t/typescript-with-styled-components/18883/5 "2023-03-19T16:47:59Z")
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 \
### Author:  [@SAM](https://forum.codewithmosh.com/u/SAM)
#### Post date: [March 20, 2023, 8:15pm UTC](https://forum.codewithmosh.com/t/typescript-with-styled-components/18883/6 "2023-03-20T20:15:14Z")
For anybody that is as confused about the syntax as I was: I knew that the thing in backticks is a [template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals?retiredLocale=de#tagged_templates). Quite a mighty tool and it’s been around for almost eight years…