Что это за тип?!
Если вы новичок в TypeScript и используете такую библиотеку, как react-emotion, вам может быть интересно, как печатать ваши стилизованные компоненты. Вот что я делаю.
Допустим, у вас есть следующий стилизованный компонент:
Какой тип для AStyledComponent
?
Я не знаю, но VSCode здесь, чтобы спасти положение:
На изображении выше показано, как я наводил курсор на AStyledComponent
, а VSCode показывает мне, какой это тип. Затем мы можем использовать этот тип:
Но… что это за определения типов? И откуда они берутся?
Что ж, немного покопавшись в react-emotion, create-emotion-styled и сам react — я нашел вот такие классные импорты:
Примечание. Когда я говорю «копать», я имел в виду зайти в node_modules/react-emotion, node_modules/create-emotion-styled и посмотреть в их файле определения типов (index.d.ts
).
Что касается параметров для StyledOtherComponent<A, B, C>
:
A
, обозначенный какany
на изображениях выше, предназначен для свойств, используемых в определении стиля.B
, обозначенный какDetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
, относится к компоненту, который вы оборачиваете.C
обозначается какany
для темы.
Хорошо! Это все, что у меня есть для вас сегодня. Дайте мне знать, если у вас есть какие-либо вопросы или отзывы — я буду рад их услышать.
Кроме того, знаете ли вы, что команда Echobind набирает?! Правильно, мы ищем замечательных людей, которые помогут нам создать классные продукты. Для получения дополнительной информации загляните к нам здесь.