Что значат эти строки в коде на typescript?

Question

[Daria]

Прохожу видео урок и не могу понять что значат эти строки. Блогер на 1:01:40 в видео "Full MERN Website React Nodejs w/ GraphQL Tailwind and Docker From Zero To Deployment + GIVEAWAY"
делает кастомные css на меню, но вот что значит это

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

и эта строка

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

вот в этом коде

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 }>`

Во-первых, к template string literal (``) можно применить функцию-тэг, она будет вызвана с массивом фиксированных строк и интерполируемыми значениями (`${/* вот этими */ value}`).
Во-вторых, в TS функция может быть дженериком (принимать тип в качестве параметра), при вызове функции в дженерик можно передать конкретный тип (например { menu?: any }) или не передавать (тогда дженерик выведется автоматически из аргументов)
В-третьих, так как тегирование template string literal по своей сути вызов функции, то и в него можно явно передавать дженерики.

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

А тут в качестве интерполируемого значения передается стрелочная функция, в которой деструктурирован первый аргумент. В данном случае это нормально, так как функция-тег получит данную функцию "как есть", без приведения к строке.

Comments

[Daria]

Спасибо вам! Все поняла!