What do these lines mean in typescript code?

Question

typescript

I'm going through a video lesson and I can't understand what these lines mean. The blogger at 1:01:40 in the video "Full MERN Website React Nodejs w/ GraphQL Tailwind and Docker From Zero To Deployment + GIVEAWAY"
makes custom css on the menu, but that's what this and this line means

styled.li<{ menu?: any }>`

${({ menu }) =>
    menu &&
    css

here in this code

const ListContainer = styled.ul`
  ${tw`
    flex
    list-none
  `};
`;

const NavItem = styled.li<{ menu?: any }>`
  ${tw`
    text-sm
    md:text-base
    text-black
    font-medium
    mr-1
    md:mr-5
    cursor-pointer
    transition
    duration-300
    ease-in-out
    hover:text-gray-700
  `};
  ${({ menu }) =>
    menu &&
    css`
      ${tw`
      text-white
      text-xl
      mb-3
      focus:text-white
    `};
    `};
`;

export function NavItems() {
  const isMobile = useMediaQuery({ maxWidth: SCREENS.sm });</a>

Answer 1

styled.li<{ menu?: any }>`

First, a tag function`` can be applied to template string literal ( ) and it will be called with an array of fixed strings and interpolated values ​​( ). Secondly, in TS, a function can be a generic (take a type as a parameter), when calling a function, a specific type can be passed to a generic (for example ) or not passed (then the generic will be automatically derived from the arguments) Thirdly, since template string tagging literal is essentially a function call, then you can explicitly pass generics to it.`${/* вот этими */ value}`

${({ menu }) =>
    menu &&
    css

And here, as an interpolated value, an arrow function is passed , in which the first argument is destructured . In this case, this is fine, since the tag function will receive the given function "as is", without casting to a string.