От автора: сегодня поговорим о преимуществах взаимодействия Vue JS TypeScript. В последние годы TypeScript, несомненно, стал весьма популярным. Все больше разработчиков в веб-индустрии стремятся использовать языки cо статическими типами, и с выпуском в 2016 году Angular 2 эта тенденция только усилилась.
Когда я начал писать приложения Angular с помощью TypeScript, я подумал, что это здорово. Мне нравились системы проверки статического типа, и мне нравилось сохранять шаблон за пределами файла TypeScript, что давало мне разделение слоев логики и представления. К сожалению, мне не понравился тот факт, что Angular требует значительной настройки, не говоря уже о том, что нам нужно было сделать три или четыре разные вещи для создания одного компонента. Для меня это было слишком затратно по времени.
До этого я использовал VueJS для создания одностраничных приложений, и мне это нравилось. Я всегда хотел иметь возможность принести TypeScript в VueJS, и поэтому начал исследования!
Теперь я нашел много руководств, в которых объяснялось, как TypeScript можно использовать с VueJS, но многие из них фокусировались на однофайловых компонентах. Что, на мой взгляд, подходит для использования только с JavaScript, но мне очень понравилось, как Angular мог сохранять шаблон в HTML-файле.
@Component({ selector: 'my-dashboard', templateUrl: 'dashboard.component.html',
})
export class DashboardComponent {}Когда я подумал, что мне не повезло, я нашел решение всех проблем. Удивительная команда VueJS недавно выпустила Vue CLI 3 — он намного упростил процесс написания приложений TypeScript с VueJS! Давайте рассмотрим, как настроить приложение VueJS с помощью TypeScript.
Установите Vue CLI
Первым шагом является установка Vue CLI, для этого просто запустите одну из следующих команд (в зависимости от того, какой инструмент вы используете).
npm install -g @vue/cli # OR yarn global add @vue/cli
После этого вы можете проверить правильность установки, выполнив vue -version. Должно отобразиться что-то вроде 3.0.1.
Создайте проект TypeScript
Новый инструмент Vue CLI позволяет легко создавать новые проекты с помощью TypeScript. Чтобы начать работу, просто запустите vue create my-app. Затем вас попросят выбрать пресет. С помощью клавиш со стрелками выберите «Manually select features».
Затем вам просто нужно выбрать параметры TypeScript и Babel. Ниже вы можете видеть, что я также выбрал некоторые дополнительные функции.
После этого вас спросят, хотите ли вы использовать «class-style component syntax». Вам нужно выбрать этот вариант.
Затем задайте остальные настройки, чтобы они выглядели как на изображении ниже.
Теперь инструмент Vue CLI установит все зависимости и настроит проект.
Добавьте дополнительные зависимости
Чтобы достичь нужного результата, есть несколько дополнительных зависимостей, которые нам необходимо установить. Вы можете установить их, выполнив одну из следующих команд.
npm install --save vue-template-loader webpack-stream # OR yarn add vue-template-loader webpack-stream
Теперь вы можете запустить yarn serve, чтобы просмотреть свое текущее приложение.
Использование классов TypeScript вместо однофайловых компонентов
Затем нам нужно избавиться от необходимости использования файлов .vue и вместо этого использовать классы TypeScript. В каталоге компонентов вы увидите файл HelloWorld.vue. Мы собираемся воссоздать его с помощью класса TypeScript.
Поэтому сначала создайте новый файл в каталоге компонентов и назовите его HelloWorld.ts. Мы добавим для начала работы следующий шаблон.
import { Component, Vue } from 'vue-property-decorator'; @Component
export default class HelloWorld extends Vue { }Это даст нам готовый к использованию пустой компонент. Первое, что нам нужно сделать, это получить внешний .html-файл для уровня представления компонента. Для этого создайте новый файл hello-world.html. Вы можете разместить его в любом месте, но для целей демонстрации я поместил его в ту же папку, что и наш компонент.
Теперь нам нужно скопировать представление из компонента HelloWorld.vue в новый файл hello-world.html. Поэтому наш файл теперь должен выглядеть так.
<div class="hello"> <h1>{{ msg }}</h1> <p> For guide and recipes on how to configure / customize this project,<br> check out the <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. </p> <h3>Installed CLI Plugins</h3> <ul> <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li> </ul> <h3>Essential Links</h3> <ul> <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> </ul> <h3>Ecosystem</h3> <ul> <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> </ul> </div>Итак, как нам использовать этот файл шаблона в классе HelloWorld.ts? Дополнительные зависимости, которые мы установили, позволяют использовать другой декоратор, WithRender. Это дает нам возможность импортировать HTML-файл и сообщить компоненту Vue использовать наш файл для рендеринга. Добавив это в наш файл TypeScript, мы получим следующее:
import { Component, Vue } from 'vue-property-decorator';
import WithRender from './hello-world.html'; @WithRender
@Component
export default class HelloWorld extends Vue { }Теперь нам нужно подключить Vue Router, чтобы использовать наш новый класс TypeScript вместо файла HelloWorld.vue. Для этого откройте файл views/Home.vue. На практике вам также нужно будет создать класс TypeScript для этого компонента, но для этого руководства мы просто его отредактируем.
Внутри файла измените оператор импорта, чтобы вместо него использовать файл TypeScript. Поэтому мы изменим следующую строку:
import HelloWorld from '@/components/HelloWorld.vue'
на
import HelloWorld from '@/components/HelloWorld.ts';
Однако, если вы сейчас перейдете в браузер, вы увидите, что выдается ошибка. В терминале мы получаем:
Cannot find module './hello-world.html'
Это связано с тем, что TypeScript не умеет обрабатывать файлы .html. Поэтому нам нужно добавить файл shim. Для этого в папке src создайте файл shims-html.d.ts. Вставьте в него следующий код, чтобы ваш файл выглядел следующим образом:
declare module '*.html' { import Vue, { ComponentOptions, FunctionalComponentOptions } from 'vue' interface WithRender { <V extends Vue, U extends ComponentOptions<V> | FunctionalComponentOptions>(options: U): U <V extends typeof Vue>(component: V): V } const withRender: WithRender export default withRender
}Теперь нам нужно обновить файл tsconfig.json, чтобы TypeScript знал, что нужно загружать файлы .html. Добавьте следующую строку в массив include: «src/**/*.html». Он должен выглядеть примерно так:
... "include": [ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx", "src/**/*.html" ], ...
Наконец, нам нужно добавить настраиваемую конфигурацию webpack в процессе сборки, чтобы сообщить Vue передать файл html через свой компилятор шаблонов. Для этого в корне проекта создайте файл vue.config.js и добавьте в него следующий код:
module.exports = { configureWebpack: { module: { rules: [ { test: /.html$/, loader: "vue-template-loader", exclude: /index.html/ } ] } }
}Далее нам нужно перезапустить процесс компиляции, чтобы TypeScript загрузил изменения. Закройте текущий процесс терминала и снова запустите одну из следующих команд.
npm run serve # OR yarn serve
Теперь вы должны увидеть загрузку приложения, как было раньше, но на этот раз используется файл класса TypeScript и файл шаблона html.
Последнее, что вы могли заметить, это то, что свойства данных msg больше не существует. Итак, давайте добавим его сейчас. В файле HelloWorld.ts добавьте следующее свойство:
public msg: string = 'I am using TypeScript classes with Vue!';
Если вы сейчас вернетесь в браузер, вы должны увидеть, что это отображается на странице.
Вот и все, что вам нужно, теперь вы можете создавать свое приложение с помощью Vue, но с использованием классов TypeScript и файлов html-шаблонов. Хотя некоторые люди могут не согласиться с этим подходом и утверждать, что вы должны использовать только файлы .vue, я нахожу этот подход эффективным, особенно когда некоторые файлы становятся очень длинными.
Это первая часть серии. В следующей статье я рассмотрю подробнее записи VueJS-приложений с использованием TypeScript и методов объяснения, атрибутов данных, реквизитов, дочерних компонентов и т. д.!
Автор: George Hanson
Источник: https://dev.to/
Редакция: Команда webformyself.