Как писать компоненты на основе классов с помощью Vue.js и TypeScript

Введение

Vue.js 2 поддерживает компоненты в стиле классов. Если вы пришли из Angular (2+), вы, вероятно, знакомы с шаблоном написания компонентов в виде классов, использующих свойства и декораторы для описания более сложных частей вашего компонента.

Самое большое преимущество компонентов в стиле классов по сравнению со стандартными компонентами Vue.js заключается в том, что они делают более ясным, где this фактически указывает в скомпилированном компоненте, и позволяют использовать более краткий код.

В этой статье вы познакомитесь с использованием vue-class-component и vue-property-decorator для поддержки TypeScript в компонентах на основе классов Vue.js.

Предпосылки

Чтобы следовать этой статье, вам понадобятся:

• Node.js установлен локально, что можно сделать, следуя инструкциям по установке Node.js и созданию локальной среды разработки.
• Некоторое знакомство с компонентами одного файла.
• Некоторое знакомство с соглашениями TypeScript.

Это руководство было проверено с помощью Node v15.1.0, npm v6.14.8, Vue.js v2.6.11, TypeScript v3.9.3, @vue/cli v4.5.0, vue-class-component v7.2.3 и vue-property-decorator v8.4.2.

Шаг 1 — Настройка проекта

Вам потребуется установить vue-class-component и vue-property-decorator.

Вы можете использовать @vue/cli для создания нового проекта Vue.js:

npx @vue/cli create vue-typescript-example

Для целей этого руководства конфигурация потребует:

@vue/-plugin-typescript установит typescript, vue-class-component и vue-property-decorator.

Затем перейдите в каталог проекта:

cd vue-typescript-example

На данный момент у вас есть проект Vue.js, настроенный для компонентов TypeScript и стиля класса.

Шаг 2 — Написание однофайлового компонента с помощью TypeScript

Компонент класса — это класс TypeScript, который расширяет объект Vue. В однофайловых компонентах убедитесь, что вы установили язык <script> на ts и экспортируете класс как default.

Откройте App.vue в редакторе кода и создайте этот пример однофайлового компонента с помощью TypeScript:

<template>
  <div>
    <label>Update myDataProperty
      <input :value="myDataProperty" @input="updateMyProperty($event)"/>
    </label>
    <div>{{ myDataProperty }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  // Data property
  myDataProperty: string = 'Data Property'

  // Component method
  updateMyProperty ($event: { target: { value: string } }) {
    this.myDataProperty = $event.target.value
  }
}
</script>

Обратите внимание, что свойства данных определяются непосредственно в классе и методах.

Это возможно благодаря декоратору @Component(componentConfig). Он преобразует класс в формат, понятный Vue.js в процессе компиляции.

На этом этапе, если бы вы скомпилировали и наблюдали за своим приложением в браузере, вам было бы представлено поле ввода и слово Data Property. При взаимодействии с полем ввода myDataProperty будет обновляться и отражать внесенные изменения.

Шаг 3 — Использование свойств компонента

Используя декоратор @Prop(config) из vue-property-decorator, вы можете объявлять входные свойства почти так же, как свойства данных.

Вот пример на TypeScript, который принимает exampleProperty свойство компонента со значением по умолчанию Input Property:

<template>
  <div>{{ exampleProperty }}</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  @Prop({ default: 'Input Property' })
  exampleProperty!: string
}
</script>

В JavaScript это эквивалентно:

export default {
  props: {
    exampleProperty: {
      type: String,
      default: 'Input Property'
    }
  }
}

На этом этапе, если бы вы скомпилировали и просмотрели свое приложение в браузере, вам было бы представлено сообщение: Input Property.

Шаг 4 — Использование вычисляемых свойств

Вычисляемые свойства записываются как геттеры и сеттеры в классе.

Вот пример на TypeScript, который получает с myComputedProp и возвращает случайное число:

<template>
  <div>{{ myComputedProp }}</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  get myComputedProp() {
    return Math.random()
  }
}
</script>

В JavaScript это эквивалентно:

export default {
  computed: {
    myComputedProp() {
      return Math.random()
    }
  }
}

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

Шаг 5 — Использование наблюдателей

Наблюдатели могут быть созданы с помощью декоратора @Watch(propertyString, config).

Вот пример на TypeScript, который отслеживает, когда myWatchedProperty запускает onPropertyChanged:

<template>
  <div>
    <label>Update myWatchedProperty
      <input :value="myWatchedProperty" @input="updateMyProperty($event)"/>
    </label>
    <div>{{ myWatchedPropertyStatus }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  myWatchedProperty: string = 'Watched Property'
  myWatchedPropertyStatus: string = ''

  @Watch('myWatchedProperty')
  onPropertyChanged(value: string, oldValue: string) {
    this.myWatchedPropertyStatus = 'Watched Property Changed'
  }

  updateMyProperty ($event: { target: { value: string } }) {
    this.myWatchedProperty = $event.target.value
  }
}
</script>

В JavaScript это эквивалентно:

export default {
  data() {
    return {
      myWatchedProperty: null
    }
  }

  methods: {
    onPropertyChanged(value, oldValue) {
      // ...
    }
  }

  watch: {
    myWatchedProperty: {
      handler: 'onPropertyChanged',
      immediate: false,
      deep: true
    }
  }
}

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

Заключение

В этой статье вы узнали, как использовать vue-class-component и vue-property-decorator для поддержки TypeScript в компонентах на основе классов Vue.js.

В этой статье представлены @Component, get и set. Полный список объявлений, доступных в vue-class-component, см. в официальной документации.

В этой статье также представлены @Prop и @Watch. Полный список декораторов, доступных в vue-property-decorator, см. в официальной документации.

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