Infraspeak решила перенести приложение, чтобы улучшить ремонтопригодность кода, производительность и UI / UX (узнайте больше об этом, прочитав Постепенный перенос устаревшего веб-приложения jQuery на Vue.js SPA, если вы еще этого не сделали).
В тот момент мы также приняли важное решение: использовать Typescript. Основная причина заключалась в том, что, поскольку наша кодовая база использует Javascript, ее сложнее поддерживать. Без знания параметров и типов какого-либо объекта код сложнее понять и более подвержен ошибкам.
После этого решения нам нужно было понять, какой для нас лучший подход к интеграции Typescript с Vue.js, поскольку этот фреймворк предлагает нам два больших подхода для этого. Вот почему я решил написать эту статью.
Но сначала давайте немного поговорим о Typescript.
Что такое машинописный текст?
Typescript, созданный Microsoft, представляет собой объектно-ориентированный язык программирования, расширяющий Javascript. Это добавляет некоторые новые функции в Javascript, такие как статическая типизация, аннотации типов и интерфейсы.
Как было сказано ранее, одним из преимуществ использования Typescript является аннотация типа. Это означает, что мы можем добавлять типы в переменные, параметры функций, возвращаемые значения и так далее, используя ключевое слово:<type>.
Иногда необязательно указывать тип, потому что Typescript может определять их автоматически. Например, если у нас есть переменная с присвоенным значением, тип переменной будет типом присвоенного значения.
Typescript предоставляет нам несколько типов по умолчанию, например: string, number, boolean, Array и т. Д., Но разработчики могут расширять и создавать новые типы.
Давайте посмотрим, как Typescript определяет типы:
Если мы переназначили имя переменной другому типу, отобразится ошибка:
Также можно добавить к переменной более одного типа. Это должно быть явно объявлено и не может быть выведено. Это называется Тип союза.
Все новые функции, которые предлагает Typescript, помогают нам предотвратить некоторые ошибки кодирования, потому что он дает нам предупреждения перед запуском (во время разработки).
Например, если у вас есть этот код в Javascript:
Это может быть проблемой, потому что кто-то может добавить строку где-нибудь в коде.
С машинописным текстом:
Примечание. Важно отметить, что браузеры и node.js не могут выполнять Typescript, поэтому его необходимо преобразовать (преобразовать) в Javascript.
Используйте Vue.js с Typescript
Vue.js поддерживает Typescript, поэтому, как я сказал ранее, мы сосредоточили свое решение на одном из двух подходов, которые у нас были для Vue.js:
- Используйте Vue.extend
- Использовать API на основе классов
Vue.extend
Этот подход является основным использованием Typescript. Vue.extend позволяет разработчикам иметь аннотацию типов и логический вывод. Из обоих подходов это больше всего похоже на версию Javascript:
Недостатком такого подхода является тип опоры. Как вы можете видеть в приведенном выше примере, мы определяем тип опоры следующим образом:
Потому что, если мы так заявим:
У нас будет ошибка ‘User’ only refers to a type, but is being used as a value here..
Это происходит потому, что это определение будет выполняться во время выполнения, а этот тип не существует, когда мы переносим его в Javascript, если только это не примитивный тип. Чтобы этого избежать, мы должны использовать PropType.
Используя PropType, мы отправляем тип объекта и объявляем его как интерфейс, который нам нужен.
API на основе классов
Такой подход позволяет нам иметь синтаксис в стиле классов в наших компонентах Vue. Для работы с этим подходом обязателен пакет Vue Class Component.
Это подход, который использует больше функций, таких как:
- Позволяет нам использовать функции ECMAScript, такие как наследование классов, декораторы и другие функции в наших компонентах Vue.
- Предоставляет нам декораторов и индивидуальных декораторов.
- Позволяет добавлять дополнительные хуки для Vue Router.
- Мы также можем
extendкласс компонента Vue и использоватьmixins.
Эти функции делают компоненты более удобными и понятными.
Чтобы получить максимальную отдачу от использования декораторов, поскольку компонент класса Vue не поддерживает все декораторы по умолчанию, пакет Vue Property Decorators является хорошим вариантом, хотя он и не разработан официальными разработчиками Vue. Этот пакет добавляет больше декораторов, таких как @Prop, @Watch, @Emit,, и многое другое в наш компонент Vue.
Как мы видели в приведенном выше примере, у нас есть:
readonlyв свойствеuser: это означает, что это свойство не может быть изменено в этом классе или возникает ошибка.
Vue.js также будет жаловаться во время выполнения при попытке изменить свойство.- восклицательный знак после свойства
user: это означает, что Vue инициализирует это свойство и является ненулевым значением, потому что в данном случае это необходимо. Если опора не требуется и не имеет значения по умолчанию, нам нужно использовать вопросительный знак вместо восклицательного знака.
Кроме того, у нас не было проблем с назначением типа реквизитам, потому что декоратор @Prop уже использует PropType за кадром.
Декораторы
Может быть, для кого-то декораторы - незнакомый термин. Причина может быть в том, что в Javascript эта функция все еще является предложением, но в Typescript она уже доступна. По умолчанию он недоступен, поэтому необходимо добавить "experimentalDecorators": true в tsconfig.json.
В Typescript декоратор позволяет нам включать функциональные возможности функции в объявление класса, метод класса, средство доступа к классу, свойство класса или параметр метода класса. Они идентифицируются по префиксу в виде знака (@).
В этом примере у нас есть два декоратора: @Component и @Prop, которые импортируются из декораторов свойств Vue.
Декоратор@Component, предоставляемый компонентом класса Vue для декораторов свойств Vue, обязателен для создания компонента в Vue с использованием подхода API на основе классов , поскольку этот декоратор указывает, что класс является компонентом Vue .
Если необходимо импортировать и зарегистрировать чужие компоненты, мы используем этот декоратор:
Преимущество использования декораторов заключается в том, что оно позволяет нам иметь более чистый код и повторно использовать один и тот же декоратор сколько угодно раз.
Также возможно использование Typescript и декораторов в Vuex. Один из способов - использовать пакет Модули класса Vuex. Это позволяет нам использовать декораторы @Module, @Mutation и @Action.
Именно такой подход мы используем в Infraspeak.
Заключение
Решение использовать Vue.js и Typescript с декораторами окончательно отвечает нашим основным потребностям в Infraspeak . К счастью, некоторые из наших коллег уже были знакомы с использованием API классов и декораторов, которые помогли нам интегрировать этот новый подходить быстрее, что приводит к гораздо более чистой и читаемой кодовой базе.
Использование TypeScript в больших кодовых базах или даже в небольших проектах может быть мощным инструментом, поскольку он может быть очень полезным для разработчиков при создании поддерживаемых и масштабируемых проектов с более надежной архитектурой и шаблонами.
В нашей дорожной карте есть план по переносу нашей текущей архитектуры с Vue 2 на Vue 3, который имеет встроенный Typescript. Но сначала мы должны быть уверены, что Vue 3 полностью поддерживает пакеты, которые мы в настоящее время используем, и планируем провести рефакторинг, чтобы разделить наш проект на более мелкие пакеты, чтобы обеспечить плавную интеграцию и проверку Vue 3.
Для получения дополнительной информации и подробностей, пожалуйста, посетите Typescript и Vue Docs… и следите за новостями в нашем блоге!
