Учебник по использованию TypeScript в приложении Vue.js.

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

Введение

Разработчики Vue.js, как правило, имеют возможность разрабатывать приложения либо на простом старом JavaScript, либо на его более строгом, безопасном для типов расширенном наборе TypeScript. Однако Vue 3.0 поставляется с расширенной поддержкой TypeScript, которая обеспечивает более простое, эффективное и надежное определение типов, что позволяет писать надежный код.

Проверка типов в приложении на основе Vue.js является центральной концепцией этой статьи. В этом руководстве мы рассмотрим руководство для начинающих по использованию TypeScript с Vue.js в наиболее распространенных случаях использования. Давайте уже начнем наше путешествие.

Предпосылки

Что вам понадобится для этого урока:

  1. Знание JavaScript.
  2. Node & NPM. Чтобы начать работу с проектом, вам необходимо установить Node v12.22.0 и NPM на локальном компьютере. Чтобы убедиться, что они установлены, выполните следующие команды в своем терминале:

node -v && npm --v

Диспетчер пакетов Node устанавливается вместе с Node и позволяет нам устанавливать различные зависимости приложений. Если они у вас не установлены, вы можете следовать инструкциям на официальном сайте Node.js.

3. Знание настройки проекта Vue.js.

Оглавление

Вот что мы рассмотрим сегодня:

  • Что такое TypeScript
  • Настройка проекта
  • Ссылка на ввод
  • Реактивный ввод
  • Реквизит для набора текста
  • Вычислено
  • Выдает
  • Ссылки на шаблон ввода
  • Введите Предоставить и внедрить
  • Ввод событий
  • Заключение

Что такое TypeScript?

Согласно Microsoft, TypeScript — это надмножество JavaScript, которое компилируется для чистого вывода JavaScript, понятного веб-браузерам и любому хосту. TypeScript позволяет строго контролировать типы переменных, чтобы код был чистым и чтобы кодовая база была более масштабируемой при создании крупномасштабных приложений JavaScript.

Настройка проекта

Vue.js обеспечивает первоклассную поддержку TypeScript, и vue-create остается лучшим способом начать работу с созданием проекта Vue.js с поддержкой TypeScript.

Давайте создадим проект для этого руководства и назовем его vue-typescript-sandbox, используя приведенную ниже команду:

vue create vue-typescript-sandbox

PS: Вы можете дать вашему проекту другое имя, если хотите.

При создании проекта вам задавали ряд вопросов. Для этого руководства давайте рассмотрим следующие конфигурации:

На данный момент у нас есть проект Vue.js, работающий на TypeScript.

Если вы посмотрите на файл App.vue или любой другой компонент с одним файлом в проекте, вы увидите, что он использует удивительный метод defineComponent(), который позволяет TypeScript правильно выводить типы внутри параметров компонента.

В папке проекта находятся три уникальных файла с расширением .ts:

  • Файл main.ts — это TypeScript-версия файла main.js в простом проекте JavaScript Vue.js.
  • Файл shims-vue.d.ts сообщает TypeScript, как понимать компоненты одного файла Vue.js.
  • Файл tsconfig.json содержит параметры конфигурации для компилятора TypeScript.

На этом этапе следующим шагом будет возврат объекта setup() в методе defineComponent() в App.vue, что позволит объявить реактивные состояния и сделать их доступными в шаблоне для различных демонстраций, как показано ниже. ниже:

Ссылка на ввод

Чтобы указать тип значения ссылки в проекте Vue.js-TypesScript, передайте общий аргумент при вызове ref():

Если ссылка не имеет начального значения, то аргумент универсального типа будет типом объединения, включающим undefined, как показано ниже:

const age = ref<number | undefined>();

Если вам нужно вывести тип из интерфейса или типа литерала объекта в том же файле, как показано ниже:

Реактивный ввод

Рекомендуемый способ указать тип для reactive() — использовать интерфейсы, как показано ниже:

Реквизит для набора текста

Предположим, мы создаем блог и нам нужно передать данные age и name, которые мы создали в App.vue, в другой файл Vue.js с другим макетом для представления сообщения в блоге. Использование реквизита придет нам на помощь.

Чтобы присвоить типы реквизитам в проекте Vue.js, нам нужно использовать приведение типов к свойству типа реквизита с помощью универсального элемента PropType Vue.js, импортированного из пакета vue:

Обновите App.vue для этой демонстрации, чтобы он стал:

Затем скопируйте/вставьте следующее в новый файл, созданный в папке components с именем PropsFile.vue, куда мы передаем наши реквизиты:

Но при работе с более сложным типом, таким как интерфейс, мы определяем типы, которые хотим использовать в интерфейсе, затем приводим свойство данных к этому интерфейсу и передаем интерфейс в качестве аргумента универсального типа PropType.

Вычислено

Для computed() тип выводится на основе значения геттера.

Предположим, цель состоит в том, чтобы объединить имя и фамилию в полное имя. В Vue.js мы можем добиться этого, как показано ниже:

В приведенной выше демонстрации, если мы попытаемся заменить string, скажем, типом number, мы получим ошибку: Нет перегрузки, соответствующей этому вызову, Аргумент типа '( ) =› строка» не может быть назначена параметру типа «ComputedGetter‹number›». Это связано с тем, что, как было сказано ранее, соответствующий тип вычисляемого свойства был выведен из начальных значений.

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

Выдает

Предположим, что в заданном проекте необходимо передать функцию close() от дочернего к родительскому, defineComponent() может сделать вывод о разрешенных событиях для функции emit, представленной в контексте установки:

Ссылки на шаблон ввода

Чтобы ввести ссылку шаблона с помощью Composition API, нам нужно объявить ссылку в setup() с тем же именем и обязательно учесть случай, когда ссылка имеет значение null. Это связано с тем, что ссылки на шаблоны имеют начальное значение null до тех пор, пока компонент не будет смонтирован.

Мы можем учесть это, установив ссылку шаблона на null, если элемент, на который указывает ссылка, еще не смонтирован, и используя необязательную цепочку или защиту типа при доступе к значению ссылки шаблона.

Демонстрация показана со следующими кодами:

Здесь мы видим, что используется явный аргумент универсального типа HTMLElement, который можно использовать для любой ссылки на шаблон. И как только компонент смонтирован, мы получаем доступ к событию click кнопки. Функция verify() используется в демонстрации, чтобы убедиться, что иллюстрация работает.

Введите Предоставить и внедрить

Чтобы включить типы для предоставленных/вставленных значений в проекте TypeScript-Vue.js, мы будем использовать интерфейс InjectionKey, который мы можем импортировать из пакета vue. Интерфейс InjectionKey — это универсальный тип, расширяющий Symbol, который можно использовать для синхронизации типа введенного значения между поставщиком и потребителем.

Идеально экспортировать символы в отдельный файл, чтобы их можно было импортировать в несколько компонентов, как показано ниже:

Ниже показана демонстрация ввода и ввода для конкретного продукта:

В папке src создайте файл с именем keys.ts:

Затем скопируйте/вставьте следующее в компонент провайдера:

Затем скопируйте/вставьте следующее в компонент инжектора:

Следует отметить, что функция inject всегда создает разрешенный тип в сочетании с undefined. Это происходит потому, что существует вероятность того, что инъекция еще не была разрешена. Теперь вам решать, как вы хотите справиться с этим.

Чтобы избавиться от undefined, вам нужно передать резервное значение функции inject. Удивительно то, что резервное значение также проверяется на тип:

Ввод событий

При работе с собственными событиями DOM в Vue.js Composition API мы можем включить ввод аргумента, который мы передаем обработчику событий, как показано ниже:

Объект event (без аннотации типа) неявно имеет тип any.

Чтобы узнать тип события заранее, вы можете сначала использовать кнопку для обработчика событий, чтобы зарегистрировать объект event, чтобы получить его тип. Вы увидите тип как конструктор для данного объекта события:

Заключение

В этом руководстве мы узнали, как применять TypeScript в проектах Vue.js в различных случаях использования, с которыми разработчик Vue.js может столкнуться во время разработки.

Если вы новичок в TypeScript, подождите! (Ха-ха! Это может быть довольно пугающим, как в случае со мной 🙈.) Путь TypeScript, который только начался для вас, вознаграждает вас и стоит затраченных усилий, поскольку он откроет совершенно новый мир опыта и преимуществ разработки. .

Самое приятное то, что TypeScript — это прогрессивный инструмент; вы можете делать это шаг за шагом, и, прежде чем вы это узнаете, он станет вашим новым любимым языком.

Если вы застряли при использовании TypeScript в своем проекте Vue.js, не стесняйтесь обращаться ко мне или загружать свой проект на Github для получения отзывов от других разработчиков! Здесь огромное и очень активное сообщество Vue.js!

Подпишитесь на меня, чтобы узнать больше о том, как лучше жить и работать. Спасибо.

Ресурсы

Документация по Vue.js

Документация по TypeScript

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.