Всем привет.
Статья представляет из себя краткое резюме из моей практики описания Vue компонентов с помощью полноценных jsx шаблонов, то есть, tsx модулей, возвращающих defineComponent.

Как мы все знаем внешний API компонента во Vue разделен, и имеет не только props. Помимо них есть ещё slots и emitters.

основа defineComponent - функция setup. И как вариант всё можно типизировать через хуки defineProps, defineSlots и defineEmits в теле этой функции. Описывать такой способ типизации я не буду - о нём можно почитать и в документации.

Почему я так не делаю? Я просто не хочу захламлять тело setup функции. Мне нравится отделять логику компонента от его внешнего API и декларировать API через свойства defineComponents, отделяя так сказать мух от котлет. И вот тут то как раз и появляются неочевидные моменты, которые я решил немного поанализировав исходники и погуглив.

Типизация свойства props

Технология css-in-js существует уже довольно давно. Ещё в начале своего профессионального опыта я встречал подходы, в которых стайлинг локальных частей интерфейса пробрасывался в html через javascript в виде css директив. Иногда это необходимая мера, хотя необходимой она случается изредка, но раз в год, как говорится, и палка стреляет. У меня на опыте был пример построения раздела интерфейса, в котором устанавливаемое на сайт пользователя модальное окно можно рестайлить через кодовый редактор с live preview. css-in-js бывает оправдан, поэтому хочу сразу оговориться - хоронить никакой подход не стоит. Но и идеализировать его как универсальную пилюлю тоже не надо. Рендер стилей, привязанный к логике рендера компонентов в контексте всего проекта - это просто свой путь со своими приключениями, появившийся на мой взгляд в общей психопатии привязывать к state всё что только можно. Что если посмотреть - откуда взялась эта техногогия? На сегодняшний день на рынке проектирования интерфейсов сложился монополист react, диктующий программистам свои правила игры, и который даже без использования styled модуля имеет в себе простейщую инверсию управления cssInJs.
React - важный персонаж в этой теме. Он, словно useEffect всего современного front-end - стал центром силы, средоточием зла в виде голого state management, не предусматривающего из коробки ничего иного.