Что это за тип?!

Если вы новичок в 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 набирает?! Правильно, мы ищем замечательных людей, которые помогут нам создать классные продукты. Для получения дополнительной информации загляните к нам здесь.