Создание приложений VueJS с использованием TypeScript

Создание приложений VueJS с использованием TypeScript

От автора: сегодня поговорим о преимуществах взаимодействия Vue JS TypeScript. В последние годы TypeScript, несомненно, стал весьма популярным. Все больше разработчиков в веб-индустрии стремятся использовать языки cо статическими типами, и с выпуском в 2016 году Angular 2 эта тенденция только усилилась.

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

До этого я использовал VueJS для создания одностраничных приложений, и мне это нравилось. Я всегда хотел иметь возможность принести TypeScript в VueJS, и поэтому начал исследования!

Теперь я нашел много руководств, в которых объяснялось, как TypeScript можно использовать с VueJS, но многие из них фокусировались на однофайловых компонентах. Что, на мой взгляд, подходит для использования только с JavaScript, но мне очень понравилось, как Angular мог сохранять шаблон в HTML-файле.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Когда я подумал, что мне не повезло, я нашел решение всех проблем. Удивительная команда VueJS недавно выпустила Vue CLI 3 — он намного упростил процесс написания приложений TypeScript с VueJS! Давайте рассмотрим, как настроить приложение VueJS с помощью TypeScript.

Установите Vue CLI

Первым шагом является установка 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 установит все зависимости и настроит проект.

Добавьте дополнительные зависимости

Чтобы достичь нужного результата, есть несколько дополнительных зависимостей, которые нам необходимо установить. Вы можете установить их, выполнив одну из следующих команд.

Теперь вы можете запустить yarn serve, чтобы просмотреть свое текущее приложение.

Использование классов TypeScript вместо однофайловых компонентов

Затем нам нужно избавиться от необходимости использования файлов .vue и вместо этого использовать классы TypeScript. В каталоге компонентов вы увидите файл HelloWorld.vue. Мы собираемся воссоздать его с помощью класса TypeScript.

Поэтому сначала создайте новый файл в каталоге компонентов и назовите его HelloWorld.ts. Мы добавим для начала работы следующий шаблон.

Это даст нам готовый к использованию пустой компонент. Первое, что нам нужно сделать, это получить внешний .html-файл для уровня представления компонента. Для этого создайте новый файл hello-world.html. Вы можете разместить его в любом месте, но для целей демонстрации я поместил его в ту же папку, что и наш компонент.

Теперь нам нужно скопировать представление из компонента HelloWorld.vue в новый файл hello-world.html. Поэтому наш файл теперь должен выглядеть так.

Итак, как нам использовать этот файл шаблона в классе HelloWorld.ts? Дополнительные зависимости, которые мы установили, позволяют использовать другой декоратор, WithRender. Это дает нам возможность импортировать HTML-файл и сообщить компоненту Vue использовать наш файл для рендеринга. Добавив это в наш файл TypeScript, мы получим следующее:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Теперь нам нужно подключить Vue Router, чтобы использовать наш новый класс TypeScript вместо файла HelloWorld.vue. Для этого откройте файл views/Home.vue. На практике вам также нужно будет создать класс TypeScript для этого компонента, но для этого руководства мы просто его отредактируем.

Внутри файла измените оператор импорта, чтобы вместо него использовать файл TypeScript. Поэтому мы изменим следующую строку:

на

Однако, если вы сейчас перейдете в браузер, вы увидите, что выдается ошибка. В терминале мы получаем:

Это связано с тем, что TypeScript не умеет обрабатывать файлы .html. Поэтому нам нужно добавить файл shim. Для этого в папке src создайте файл shims-html.d.ts. Вставьте в него следующий код, чтобы ваш файл выглядел следующим образом:

Теперь нам нужно обновить файл tsconfig.json, чтобы TypeScript знал, что нужно загружать файлы .html. Добавьте следующую строку в массив include: «src/**/*.html». Он должен выглядеть примерно так:

Наконец, нам нужно добавить настраиваемую конфигурацию webpack в процессе сборки, чтобы сообщить Vue передать файл html через свой компилятор шаблонов. Для этого в корне проекта создайте файл vue.config.js и добавьте в него следующий код:

Далее нам нужно перезапустить процесс компиляции, чтобы TypeScript загрузил изменения. Закройте текущий процесс терминала и снова запустите одну из следующих команд.

Теперь вы должны увидеть загрузку приложения, как было раньше, но на этот раз используется файл класса TypeScript и файл шаблона html.

Последнее, что вы могли заметить, это то, что свойства данных msg больше не существует. Итак, давайте добавим его сейчас. В файле HelloWorld.ts добавьте следующее свойство:

Если вы сейчас вернетесь в браузер, вы должны увидеть, что это отображается на странице.

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

Это первая часть серии. В следующей статье я рассмотрю подробнее записи VueJS-приложений с использованием TypeScript и методов объяснения, атрибутов данных, реквизитов, дочерних компонентов и т. д.!

Автор: George Hanson

Источник: https://dev.to/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree