Как я могу устранить эту ошибку в TypeScript?

#reactjs #typescript #styled-components

#reactjs #typescript #styled-компоненты

Вопрос:

Я пытаюсь устранить эту ошибку, но понятия не имею, как ее устранить. Ниже я прилагаю свой код:введите описание изображения здесь

И это ошибка:

введите описание изображения здесь

Комментарии:

1. В качестве примечания, в будущем, пожалуйста, скопируйте и вставьте свой код / ошибку и оберните его тройными обратными ссылками ``` , чтобы другим было легче использовать.

Ответ №1:

Возможно, вы неправильно определяете свое open свойство. Вам также необходимо определить интерфейс, который объявляет ваши свойства. Попробуйте изменить свою transform строку на что-то вроде этого:

 transform: ${props => props.open ? 'translateX(0)' : 'translateX(100%)'};
  

И добавьте интерфейс, который будет использоваться следующим образом:

 interface UlProps {
   open: boolean;
}

const Ul = styled.ul<UlProps>`
   ...
`
  

Ответ №2:

Я полагаю, что вы используете обычную styled components библиотеку в файле typescript, который не поставляется с поддержкой ts.

Вы должны установить версию typescript с помощью command npm i --save-dev @types/styled-components .

Тогда вы могли бы определить такие реквизиты, как

 const UI = styled.ul<{open: boolean}>`
    \your regular style here
`;
  

и использовать его как

 <UI open={open}>
{/*children here*/}
</UI>
  

Ссылки: Этот блог