Comment écrire des composants basés sur des classes avec Vue.js et TypeScript

Introduction

Vue.js 2 prend en charge les composants de style classe. Si vous venez d'un milieu angulaire (2+), vous connaissez probablement le modèle d'écriture de composants en tant que classes utilisant des propriétés et des décorateurs pour décrire des parties plus complexes de votre composant.

Le plus grand avantage des composants de style classe par rapport aux composants Vue.js standard est qu'ils indiquent plus clairement où cela pointe réellement dans le composant compilé et permettent un code plus concis.

Dans cet article, vous serez initié à l'utilisation de vue-class-component et vue-property-decorator pour prendre en charge TypeScript dans les composants basés sur les classes Vue.js.

Conditions préalables

Pour suivre cet article, vous aurez besoin de :

Node.js installé localement, ce que vous pouvez faire en suivant Comment installer Node.js et créer un environnement de développement local.
Une certaine familiarité avec la configuration d'un projet Vue.js et les composants de fichier unique .
Une certaine familiarité avec les conventions TypeScript.

Ce tutoriel a été vérifié avec 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 et vue-property-decorator v8.4.2.

Étape 1 - Configuration du projet

Vous aurez besoin de vue-class-component et vue-property-decorator installés.

Vous pouvez utiliser @vue/cli pour créer un nouveau projet Vue.js :

npx @vue/cli create vue-typescript-example

Pour les besoins de ce tutoriel, la configuration nécessitera :

Rapide	Option
`Please pick a preset`	`Manually select features`
`Check the features needed for your project`	`TypeScript`
`Use class-style component syntax?`	`Yes`

@vue/-plugin-typescript installera typescript, vue-class-component et vue-property-decorator.

Ensuite, accédez au répertoire du projet :

cd vue-typescript-example

À ce stade, vous avez un projet Vue.js configuré pour les composants TypeScript et de style classe.

Étape 2 - Écrire un composant à fichier unique avec TypeScript

Un composant de classe est un TypeScript class qui extends l'objet Vue. Dans les composants à fichier unique, assurez-vous de définir le langage <script> sur ts et d'exporter la classe sous default.

Ouvrez App.vue dans votre éditeur de code et créez cet exemple de composant à fichier unique avec TypeScript :

src/App.vue

<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>

Notez que les propriétés des données sont définies directement sur la classe et les méthodes.

Le décorateur @Component(componentConfig) est ce qui rend cela possible. Il transforme la classe dans un format que Vue.js peut comprendre pendant le processus de compilation.

À ce stade, si vous deviez compiler et observer votre application dans un navigateur, un champ de saisie et le mot Data Property vous seraient présentés. En interagissant avec le champ de saisie, myDataProperty sera mis à jour et reflétera les modifications apportées.

Étape 3 - Utilisation des accessoires de composant

Grâce à l'utilisation du décorateur @Prop(config) de vue-property-decorator, vous pouvez déclarer des propriétés d'entrée de la même manière que les propriétés de données.

Voici un exemple dans TypeScript qui prend un accessoire de composant exampleProperty avec la valeur par défaut de 'Input Property' :

src/App.vue

<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>

En JavaScript, cela équivaut à :

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

À ce stade, si vous deviez compiler et observer votre application dans un navigateur, le message suivant s'afficherait : Input Property.

Étape 4 - Utilisation des propriétés calculées

Les propriétés calculées sont écrites sous la forme getters et setters sur la classe.

Voici un exemple en TypeScript qui getsa myComputedProp et renvoie un nombre aléatoire :

src/App.vue

<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>

En JavaScript, cela équivaut à :

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

À ce stade, si vous deviez compiler et observer votre application dans un navigateur, un nombre aléatoire vous serait présenté.

Étape 5 - Utilisation des observateurs

Les observateurs peuvent être créés avec le décorateur @Watch(propertyString, config).

Voici un exemple dans TypeScript qui surveille lorsque myWatchedProperty déclenche onPropertyChanged :

src/App.vue

<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>

En JavaScript, cela équivaut à :

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

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

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

À ce stade, si vous deviez compiler et observer votre application dans un navigateur, un champ de saisie vous serait présenté. La modification de la valeur d'entrée affichera le message Watched Property Changed.

Conclusion

Dans cet article, vous avez appris à utiliser vue-class-component et vue-property-decorator pour prendre en charge TypeScript dans les composants basés sur les classes Vue.js.

Cet article a présenté @Component, get et set. Pour une liste complète des déclarations disponibles à partir de vue-class-component, consultez la documentation officielle.

Cet article a également présenté @Prop et @Watch. Pour une liste complète des décorateurs disponibles sur vue-property-decorator, consultez la documentation officielle.

Si vous souhaitez en savoir plus sur TypeScript, consultez notre page de rubrique TypeScript pour des exercices et des projets de programmation.