В этой статье я расскажу о том, как я использую Vue, и планирую сделать это в 2019 году. Основными новыми технологиями, которые я нашел полезными за последний год, были TypeScript и .tsx вместо .vue файлов.

Основным преимуществом использования .tsx над .vue файлами является проверка типов в функции render - насколько мне известно, в .vue файлах нет проверки типов в разделе <template>, или, по крайней мере, это не очень хорошо поддерживается.

Создаваемое нами приложение будет выглядеть так:

Исходный код этой статьи доступен здесь.

Вы можете выбрать знак, и он выполнит расчет.

Настраивать

Установите Vue CLI v3, если вы еще этого не сделали, а затем создайте новое приложение, запустив vue create tsx_adder.

Для каждой из подсказок

  • Единственное, что нам нужно - это TypeScript и Babel, поэтому выберите эти два.
  • Нам не нужен синтаксис компонента в стиле класса
  • Мы хотим Вавилон
  • выберите «в выделенных файлах» для конфигурации

После завершения установки cd tsx_adder. Нам нужна одна зависимость, чтобы иметь возможность использовать TSX. Это vue-tsx-support. Установите, запустив vue add tsx-support. Мы также продемонстрируем Vuex с TypeScript, поэтому добавьте его с помощью yarn add vuex.

Состав

Приложение будет состоять из двух компонентов: App.tsx и Adder.tsx. App.tsx будет подключаться к хранилищу Vuex и передавать реквизиты Adder.tsx, компонент презентации, который будет обрабатывать макет и пользовательский интерфейс.

В большом приложении у вас, вероятно, будет AdderContainer.tsx, но для простоты я просто использую App.tsx для взаимодействия с магазином. Adder.tsx получает данные из хранилища через реквизиты и связывается с родителем, отправляя события. Это позволит нам продемонстрировать:

  • типизированные свойства, включая сложные типы, такие как Enums и Objects
  • события с проверкой типов между родительским / дочерним компонентами
  • как получить вывод типов и безопасность типов с помощью Vuex State в компонентах

Начните с преобразования App.vue в App.tsx. Обновите его, чтобы он содержал следующее:

Поскольку мы еще не создали Adder.tsx, создайте его: components/Adder.tsx. Внутри components/Adder.tsx добавьте следующий простой компонент:

Теперь импортируйте его в App.tsx: import { Adder } from './components/Adder'. Наконец, перейдите к main.ts и измените import App from './App.vue на import { App } from './App'. Запустите yarn serve (или npm run serve). localhost:8080 должен показать следующее:

Типы безопасного реквизита

Первое, что мы продемонстрируем, - это типобезопасные свойства, включая как примитивы (например, Number и Boolean), так и сложные типы, например Enum. В Adder.tsx добавьте следующее:

Одно предостережение: вам нужно набрать true as true, чтобы TypeScript проверял свойства во время компиляции. Обсуждается кратко здесь. Если вы добавите это, если ваш редактор поддерживает TypeScript (например, VS Code), вернитесь к App.tsx, и вы должны увидеть ошибку, а под <Adder > будет красная линия. Ближе к концу сообщения об ошибке написано Type '{}' is missing the following properties from type '{ left: number; right: number; }': left, right. Предоставим left и right в App.tsx:

Попробуйте вместо этого передать строку - TypeScript предупредит нас, что тип опоры неверен.

Затем давайте добавим более сложный тип - enum. Создайте каталог с именем types в src и внутри него файл sign.ts со следующим:

Следующее обновление Adder.tsx:

Еще один, к сожалению, хак, который показывает некоторые ограничения поддержки TS Vue, - это String as () => Sign. Поскольку наше Sign перечисление - это просто строки, мы делаем String as () => .... Если бы это было перечисление Object или Array, мы бы набрали Array as () => MyComplexArrayType[]. Более подробную информацию об этом можно найти здесь.

Вернитесь к App.tsx, и вы увидите еще одну ошибку около <Adder />. Исправьте это, добавив следующее:

Типовые события

Теперь давайте посмотрим, как иметь события с проверкой типов. Мы хотим, чтобы сумматор выдавал событие changeSign при нажатии любого из четырех знаков. Этого можно достичь с помощью componentFactoryOf, задокументированного здесь. Начните с обновления App.tsx:

<Adder /> снова ошибка: Property 'onChangeSign' does not exist on type '({ props: .... Это потому, что мы передаем опору, которую Adder не ожидает.

Добавьте в Adder.tsx следующее:

Теперь ошибка исчезла. Попробуйте изменить подпись changeSign(sign: Sign) на changeSign(sign: Number) - TS предупреждает, что параметр имеет неправильный тип, очень круто. Подробнее про componentFactoryOf здесь.

Две последние вещи для завершения компонента Adder.tsx. Сначала добавьте следующий интерфейс вверху и функцию data:

Наконец, давайте добавим функцию render для Adder.tsx. В этом нет ничего особенного, поэтому я не буду вдаваться в подробности.

Одно небольшое предостережение: мы определяем интерфейс событий как onChangeSign, но мы генерируем changeSign.

Чтобы приложение выглядело немного лучше, вот несколько CSS. Создайте components/adder.css и вставьте в следующее:

Затем выполните import './adder.css' в верхней части Adder.tsx. Теперь страница выглядит так:

Давайте добавим Vuex и заставим кнопки работать.

Добавление хранилища Typesafe Vuex

Следующим шагом для приложения является добавление (несколько) безопасного магазина Vuex. Создайте папку store внутри src, затем внутри store создайте index.ts и calculation.ts. Внутри store/index.ts добавьте следующее:

Ничего особенно интересного - мы просто определяем новое хранилище Veux и передаем модуль calculation, который мы собираемся сделать сейчас. В calculation.ts добавить следующее:

Мы определяем модуль calculation со значениями left и right в состоянии. Импортируйте его в main.ts:

Теперь давайте воспользуемся этими значениями в приложении. Обновить App.tsx:

Нам нужно набрать (this.$store.state as IState), чтобы получить проверку типов в модулях магазина. Существуют и другие альтернативы, которые позволят вам выполнить проверку типов без преобразования this.$state в IState, но я использовал этот шаблон, и пока он мне понравился.

Добавление мутации

Добавим мутацию. Целью будет сохранить selectedSign в состоянии и обновить его с помощью мутации. Обновление calculation.ts:

Мы добавили SET_SIGN мутацию. Тип state вмешивается, поскольку мы перешли от ICalculationState к Module, когда объявили модуль вычислений. Мы можем использовать новую мутацию в App.tsx:

Мы не выполняем никакой проверки типов обработчика или полезной нагрузки commit. Я все еще ищу решения этой проблемы. Есть несколько решений, но ни одно из них не кажется достаточно чистым или требует определенного уровня абстракции, который меня не устраивает. Я надеюсь, что сам Vuex сможет развиваться, чтобы в будущем предлагать лучший опыт работы с TS. Я предложу свое решение в следующей статье.

Давай закончим приложение. Обновите App.tsx окончательным кодом, который включает свойство компьютера result, чтобы вычислить значение на основе знака:

Теперь приложение выглядит так:

Щелчок по знакам обновляет result на основе вычислений.

Улучшения и заключение

Эта статья демонстрирует:

  • создание компонентов Vue с использованием tsx
  • Типичный реквизит и мероприятия
  • Типовая безопасность для this.$store с помощью интерфейса

Некоторые улучшения, о которых я хотел бы рассказать в следующей статье:

  • Типизированные геттеры, фиксация (мутация) и отправка (действие)

Исходный код этой статьи доступен здесь. Изначально опубликовано в моем личном блоге.