Из всех доступных фреймворков JavaScript я бы сказал, что мне больше всего нравятся Vue и React. React за его обширную экосистему, отличную поддержку TypeScript, JSX и Vue за его простоту, производительность и некоторые небольшие улучшения качества жизни, такие как автоматическое прохождение реквизитов, простая в использовании система переходов, директивы, слоты и многое другое.

Итак, как насчет того, чтобы получить лучшее из обоих миров? Получить преимущества Vue в React означало бы превратить React во Vue, так что это не вариант. Как тогда использовать TypeScript и JSX во Vue?

Что ж, Vue сильно зависит от собственного синтаксиса шаблонов и SFC (компоненты одного файла). Тем не менее, он также очень «беспристрастный» и предоставляет своим пользователям множество способов сделать то же самое. Это включает в себя использование JSX, даже TSX (JSX с TypeScript)! К сожалению, когда вы делаете много вещей хорошо, вы обычно не можете сделать что-то одно хорошо. Позвольте мне продемонстрировать это через поддержку TSX в Vue 2.

Поддержка Vue 2 TSX

Начнем с чистого JSX. Быстрый поиск по документации Vue 2 дает следующие результаты:

Его, конечно, не так много, но потенциально это все, что нам нужно? Ссылка перенаправляет нас на GitHub README, в котором подробно описывается установка необходимого плагина Babel и общее использование JSX с другими функциями Vue.

Сначала добавьте необходимые зависимости (здесь я использую Yarn):

Настройте Бабель:

Теперь, если вам повезет, вы сможете просто перейти к своему коду и написать JSX. Если нет, вы столкнетесь с несколькими ошибками на этом пути. Большинство из них должно быть легко исправлено, просмотрев проблемы GitHub плагина Babel или выполнив поиск в другом месте в Интернете. Однако ресурсы на эту тему довольно ограничены по сравнению с популярностью Vue.

Когда вы, в конце концов, приступите к написанию своего кода Vue JSX, с этого момента все должно быть довольно хорошо. Ваш JSX должен быть совместим с SFC, и вам даже не нужно использовать поле components, чтобы они работали!

Машинопись

Имея JSX, мы можем приступить к замене «J» на «T», задействовав TypeScript! Используя тот же метод, что и раньше, мы сначала настроим только TypeScript.

Теперь в документах Vue 2 есть целая страница, посвященная исключительно поддержке TypeScript, так что я не буду жаловаться на это. В нем подробно описан процесс настройки, предостережения и различные способы использования TS с Vue (отсутствие мнения — помните?)

Существует 2 основных способа использования TS с Vue — базовый и «на основе классов».

Что касается классового подхода, я должен признать, что мне он не очень нравится. Может быть, это потому, что в последнее время я больше увлекаюсь программированием в функциональном стиле, или, может быть, потому, что мне не нравятся декораторы ES. Для меня они сейчас слишком экспериментальные, и — в TypeScript — они не обеспечивают такого же автодополнения, как все другие хорошо зарекомендовавшие себя функции. В любом случае, есть целый сайт, посвященный классовым компонентам Vue и их использованию с TypeScript, так что не стесняйтесь проверить его, если вам интересно.

Что касается базового подхода, вы просто заключаете объект компонента внутрь Vue.extend(), и все. Вам по-прежнему нужно использовать для аннотирования реквизитов, метода render() и всех вычисляемых свойств с помощью PropType<T>, VNode и выбранного вами типа соответственно.

Фрагмент выше — это адаптация предыдущего для TypeScript. Я оставил JSX, но с ним есть несколько проблем, о которых я расскажу. Но перед этим я хотел бы упомянуть файл «shim», который вам понадобится для TypeScript, чтобы не волноваться при импорте *.vue файлов:

Поместите его в файл *.d.ts в вашей корневой папке, в каталоге, который includeed в вашем проекте TS, или укажите непосредственно в свойстве tsconfig.json types — ваш выбор.

Однако, если вы раньше работали с файлами объявлений TypeScript, вы могли заметить, что вышеприведенная «прокладка» несовершенна. С ним TS будет принимать *.vue SFC, но ничего, кроме общих свойств Vue, не будет типобезопасным. Никаких реквизитов, вычислений, методов и т.д. - ничего! Обойти это невозможно. Вы все еще можете получить некоторое автодополнение в своем редакторе кода / IDE, но это только благодаря некоторым исправлениям, сделанным на стороне — никакого «чистого TypeScript».

комбо TSX

Казалось бы, объединив настройки JSX и TypeScript, мы должны иметь готовый к работе TSX. К сожалению, это не так просто.

Вам наверняка понадобятся дополнительные прокладки, чтобы адаптировать типизацию JSX для Vue. Что-то вроде следующего будет делать:

Вам также необходимо настроить tsconfig.json, установив jsx на ”preserve”. Это гарантирует, что никакая обработка, связанная с TS, не коснется синтаксиса JSX, что позволит ему безопасно добраться до Babel для правильной обработки (при условии, что в вашей настройке нет никаких ошибок и проблем).

Хорошо, теперь вы должны быть готовы идти! Наслаждайтесь первоклассным опытом работы с Vue TSX… да. Давайте поговорим об этом.

Причина, по которой я только что провел вас через общую настройку Vue 2 TSX, не в том, чтобы продемонстрировать, как это сделать. Это нужно для того, чтобы показать вам, насколько ошибочен весь процесс. Конечно, это может быть полезно при преобразовании существующего проекта или шаблона, но в большинстве случаев вы отлично справитесь с Vue CLI и соответствующим набором плагинов или сборщиком без конфигурации, таким как Parcel или Poi. ». Однако это не решит множество потенциальных проблем с настройкой или отсутствие подробной документации. Более того, ни один из этих способов не даст вам надлежащего опыта работы с TSX, как вы, возможно, знаете об этом из React.

Поддержка редактора

Говоря об опыте, на что это похоже? Проведя некоторое время с ним, я должен признать — это не хорошо. Что касается редакторов, то учитываются только два игрока — VS Code и WebStorm. Я использовал Vue с расширением Vetur. Однако это не имеет значения, так как это расширение ориентировано в основном на поддержку SFC (в этой области ему тоже не хватает). Также есть расширение VueDX, которое работает намного лучше, чем Vetur для SFC, но оно полностью ломает поддержку JSX/TSX, поэтому мне пришлось его отключить.

Теперь оба редактора были близки, а WebStorm немного опередил. Автозаполнение реквизитов в основном отсутствовало, а при работе внутри компонентов — все. Взаимодействия, связанные с this, были удачными или нет, однако в целом лучше на WebStorm.

Поддержка Vue-tsx

Теперь, когда есть проблема, есть и решение. А для поддержки Vue 2 TSX это библиотека поддержки с именем vue-tsx-support. Это (в основном) библиотека типов, функций приведения, утилит и т. д. только для TS, предназначенная для правильной типизации ваших компонентов Vue и обеспечения их хорошей работы с TSX. Я не буду здесь вдаваться в подробности (README на GitHub довольно подробный), я хотел бы показать вам пример использования этой библиотеки:

Вы можете увидеть, как функции приведения ofType() и convert() используются для получения компонентов Vue, безопасных для типов, со всеми преимуществами автозаполнения.

И с учетом этого я бы сказал, что библиотека vue-tsx-support — лучший способ использовать Vue 2 с TSX прямо сейчас и, возможно, навсегда. Конечно, это немного многословно, но это единственный способ получить надлежащий опыт работы с TSX в такой настройке.

Приход Vue 3

Теперь забудьте все, что вы читали до этого момента, так как это не имеет значения. Хорошо, может быть, я шучу, но поскольку Vue 3 сейчас находится в стабильной бета-версии, комбинация Vue-TSX должна стать гораздо более заметной в Vue. космос.

Честно говоря, именно об этом и говорится в названии. Я уже давно активно использую Vue 3 при разработке своего продукта — CodeWrite (инструмент для ведения блога для разработчиков). И да, я использовал его с TSX, и опыт разработки был просто идеальным!

Vue 3 теперь написан на TypeScript, что значительно повысило его поддержку, а с новым Composition API кажется, что проблема this наконец-то решена. Конечно, документы TS и JSX не сильно изменились с точки зрения их ясности, но процесс установки в целом кажется гораздо менее громоздким.

Установка и конфигурация

Короче говоря, вам снова нужно добавить jsx: “preserve” к вашему tsconfig.json и внести некоторые изменения в ваш конфиг Babel (на этот раз это плагин):

Но на этот раз, это все! Теперь вы можете писать свои компоненты Vue в TSX с отличным автодополнением как в VS Code, так и в WebStorm!

Взгляните на пример компонента (TSX + Composition API):

Для работы SFC вам по-прежнему потребуются прокладки (хотя и другие), и автозаполнение из них может быть не идеальным, но с этой настройкой в ​​Vue 3 — я не знаю, зачем вы вообще их используете.

Опять же, конфигурация не должна быть большой проблемой со всеми доступными инструментами. Vite — примечательный новичок, прямо из основной команды Vue. Он поддерживает сверхбыстрый рабочий процесс ESM и поддерживает TypeScript, JSX и TSX практически без настройки.

Стоит ли переходить?

Теперь, готовы ли вы сразу перейти к Vue 3, зависит исключительно от вас. Я сделал это, потому что значительно улучшенная поддержка TypeScript и JSX того стоила. Кроме того, я считаю, что новый Composition API намного лучше предыдущего (Option API) и предпочитаю модель реактивности Vue модели React.

Однако Vue 3 является обратно несовместимым из-за некоторых критических изменений, поэтому его экосистема намного меньше. Для меня это не было большой проблемой, но я знаю, что это может быть для многих. Итак, опять же, на ваш выбор.

Быть в курсе!

Итак, с моим опытом работы с Vue 3, вы можете быть уверены, что появится еще больше отличного нового контента. Чтобы быть в курсе, подпишитесь на меня в Twitter, Facebook или через мою рассылку. Кроме того, если вы хотите начать свой собственный технический блог (а также проверить, что вы можете сделать с Vue 3), попробуйте CodeWrite — бесплатно!

Спасибо за чтение и удачного кодирования!