В этой статье я расскажу о том, как я использую 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
с помощью интерфейса
Некоторые улучшения, о которых я хотел бы рассказать в следующей статье:
- Типизированные геттеры, фиксация (мутация) и отправка (действие)
Исходный код этой статьи доступен здесь. Изначально опубликовано в моем личном блоге.