В сентябре прошлого года Эван Ю (создатель Vue.js) объявил о планах относительно следующей основной версии библиотеки. Vue 3.0 будет иметь улучшенный интерфейс для пользователей TypeScript, включая встроенную поддержку компонентов на основе классов и лучшую поддержку для вывода типов при написании кода.
Хорошая новость заключается в том, что вам не нужно ждать, пока выйдет версия 3.0 (прогнозируется на третий квартал 2019 года), чтобы начать писать приложения Vue на TypeScript. Инструмент командной строки Vue, Vue CLI, поставляется с вариантами запуска проектов с предварительно настроенным инструментом сборки TypeScript и включает официально поддерживаемый модуль компонента vue-class-component , позволяющий записывать компоненты Vue в виде классов TypeScript.
Эта статья предполагает некоторое знакомство как с Vue, так и с основами TypeScript. Давайте посмотрим, как вы можете начать использовать преимущества статической типизации и компонентов на основе классов в своем коде сегодня.
Запуск проекта Vue + TypeScript
Одним из препятствий для начала работы с TypeScript может быть настройка необходимых инструментов сборки. К счастью, Vue прикрыл нас Vue CLI . Мы можем использовать его, чтобы создать проект для нас с настроенным и готовым к работе компилятором TypeScript.
Давайте кратко рассмотрим создание нового проекта Vue с поддержкой TypeScript.
Из терминала / командной строки (и при условии, что у вас установлен Node.js), выполните следующую команду для глобальной установки Vue CLI:
npm install -g @vue/cli Далее, давайте создадим новый проект, указав название проекта:
vue create vue-typescript-demo
Это также будет имя подпапки, в которую установлен проект. Как только вы нажмете
Выберите ручной вариант, и вам будет предложен дополнительный набор параметров. Очевидно, что основной опцией является TypeScript, но вы также можете выбрать Vuex, так как позже мы рассмотрим некоторые специфичные для Vuex декораторы.
Выбрав параметры проекта, на следующем экране вас спросят, хотите ли вы использовать синтаксис компонента в стиле класса . Скажи да этому. Затем вас спросят, хотите ли вы использовать «Babel вместе с TypeScript для автоматически обнаруживаемых полизаполнений». Это хорошая идея для проектов, в которых вы будете поддерживать старые браузеры. Ответьте на оставшиеся вопросы, как считаете нужным, и процесс установки должен начаться.
Замечание по поддержке редактора / IDE
Многие редакторы кода и IDE теперь поддерживают TypeScript. Среди платных решений программное обеспечение JetBrains (например, WebStorm , PhpStorm ) имеет отличную поддержку как Vue, так и TypeScript. Если вы ищете бесплатную альтернативу, я рекомендую Microsoft Visual Studio Code : в сочетании с расширением Vetur он обеспечивает отличное автозаполнение и проверку типов.
Компоненты на основе классов
Давайте начнем с рассмотрения того, как писать компоненты Vue с использованием классов. Хотя эта функция не ограничивается TypeScript, использование основанных на классах компонентов помогает TS обеспечить лучшую проверку типов и, на мой взгляд, делает компоненты более чистыми и более удобными в обслуживании.
Давайте посмотрим на синтаксис. Если вы следовали предыдущему разделу и использовали Vue CLI для создания нового проекта, перейдите в каталог проекта, в подпапку src и откройте App.vue . Здесь нас интересует раздел <script> , поскольку он является единственной частью, которая отличается от стандартного однофайлового компонента Vue (SFC).
<script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import HelloWorld from './components/HelloWorld.vue'; @Component({ components: { HelloWorld, }, }) export default class App extends Vue {} </script>
Обратите внимание, что сам <script> имеет атрибут lang установленного ts . Это важно для инструментов сборки и вашего редактора, чтобы правильно интерпретировать код как TypeScript.
Чтобы объявить компонент на основе классов, вам нужно создать класс, который расширяет vue (здесь он импортируется из пакета vue-property-decorator , а не непосредственно из модуля vue).
Декларации класса должен предшествовать декоратор @Component :
@Component class MyComponent extends Vue {}
Как вы могли заметить в коде из компонента App.vue , декоратор также может принимать объект, который можно использовать для указания components , параметров и параметров filters для компонента:
@Component({ components: { MyChildComponent }, props: { id: { type: String, required: true } }, filters: { currencyFormatter } }) class MyComponent extends Vue {}
Свойства данных
При объявлении объектно-ориентированных компонентов вы будете знакомы с необходимостью объявлять свойства данных вашего компонента как функцию, которая возвращает объект данных:
{ data: () => ({ todos: [], }) }
… Тогда как с компонентами на основе классов мы можем объявить свойства данных как обычные свойства класса:
@Component class TodoList extends Vue { todos: []; }
Вычисленные свойства
Еще одним преимуществом использования классов в качестве компонентов является более чистый синтаксис для объявления вычисляемых свойств с использованием методов получения:
@Component class TodoList extends Vue { // ... get uncompletedTodos() { return this.todos.filter(todo => todo.done === false); } }
Аналогично, вы можете создавать доступные для записи вычисляемые свойства, используя метод установки:
set fullName(value: string) { let names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[names.length - 1]; }
методы
Методы компонента могут быть объявлены таким же чистым способом, как методы класса:
@Component class TodoList extends Vue { // ... addTodo(text) { this.todos.push({ text, done: false }); } }
На мой взгляд, простой синтаксис объявления методов, свойств данных и вычисляемых свойств делает написание и чтение основанных на классах компонентов более приятными, чем исходные объектно-ориентированные.
Декораторы
Мы можем пойти еще дальше, используя дополнительные декораторы, предоставляемые пакетом vue-property-decorator . Он предоставляет шесть дополнительных декораторов для создания компонентов на основе классов:
Давайте рассмотрим три из них, которые вы, вероятно, найдете наиболее полезными.
@Prop
Вместо передачи объекта конфигурации props в декоратор @Component вы можете использовать декоратор @Props для объявления ваших реквизитов в качестве свойств класса.
@Component class TodoItem extends Vue { @Prop todo; }
Как и в случае других декораторов, @Prop может принимать различные аргументы, включая тип, массив типов или объект параметров:
@Prop(String) name; @Prop([String, Null]) title; @Prop({ default: true }) showDetails;
При использовании с TypeScript вы должны ставить суффиксы в свои имена с помощью ненулевого оператора (!), Чтобы сообщить компилятору, что у пропа будет ненулевое значение (так как TS не знает, что эти значения будут переданы в компонент, когда он инициализирован):
@Prop(String) name!: string;
Обратите внимание, что, как показано выше, вполне нормально поместить декоратор и объявление свойства в одну строку, если хотите.
@Испускают
Еще один удобный декоратор — @Emit , позволяющий @Emit событие из любого метода класса. В выдаваемом событии будет использоваться имя метода (с преобразованием имен camelCase в kebab-case), если альтернативное имя события не передается декоратору.
Если метод возвращает значение, оно будет передано как полезная нагрузка события вместе с любыми аргументами, переданными методу.
@Emit() addTodo() { return this.newTodo; }
Приведенный выше код будет this.newTodo событие add-todo со значением this.newTodo в качестве полезной нагрузки.
@Часы
С этим декоратором легко и просто создавать наблюдателей. Он принимает два аргумента: имя наблюдаемого свойства и необязательный объект параметров.
@Watch('myProp') onMyPropChanged(val: string, oldVal: string) { // ... } @Watch('myObject', { immediate: true, deep: true }) onMyObjectChanged(val: MyObject, oldVal: MyObject) { }
Подводя итоги
Я надеюсь, что эта статья показала вам, что начинать писать свои приложения Vue на TypeScript не должно быть головной болью. Используя CLI для запуска новых проектов, вы можете быстро настроить необходимые инструменты сборки. Включенная поддержка основанных на классах компонентов и дополнительных декораторов позволит вам быстро написать чистый идиоматический TypeScript!
Хотите узнать Vue.js с нуля? Получите полную коллекцию книг Vue, охватывающих основы, проекты, советы и инструменты и многое другое с SitePoint Premium. Присоединяйтесь сейчас всего за $ 9 / месяц или попробуйте нашу 7-дневную бесплатную пробную версию .