Introduction

Dans cet article je souhaite faire une petite introduction à l’utilisation de Typescript dans Vue à l’aide de la libraire vue-property-decorator.

Cet article suppose que vous avez un minimum de connaissances sur VueJS, si ce n’est pas le cas je vous invite à lire cette brève introduction à VueJS sur la doc officielle.

Création d’un projet de test

On va utiliser le client vue pour créer un projet avec Typescript pré configuré.

$ vue create exampleProject
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

...

Validez le reste des étapes et vous aurez un projet Vue configuré pour être utilisé avec typescript.

Voyons comment utiliser typescript avec vue js en comparant avec une utilisation basique du framework.

Création de composant

Voici comment on crée un composant de type Hello World sur vue sans typescript :

<template>
  <div>Hello {{name}}</div>
</template>

<script>
export default {
  data() {
    return {
      name: "Joe"
    };
  }
};
</script>

Avec Typescript ça donne :

<template>
  <div>Hello {{name}}</div>
</template>

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

@Component
export default class HelloWorld extends Vue {
  name: string = "Joe";
}
</script>

Notre composant est maintenant représenté par une classe, vous remarquerez aussi le decorator (annotation) @Component, elle va faire en sorte que Vue interprète la classe en tant que composant.

maintenant qu’on a créé notre premier composant, voyons voir comment on peut l’utiliser.

Réactivité de l’état interne (data)

pour déclarer une propriété réactive sur vue on fait normalement comme ça :

export default {
  data() {
    return {
      someVariable1: 0,
      someVariable2: undefined
    };
  }
};

on a déclaré ici 2 variables réactives :
someVariable1 : initialisée par 0
someVariable2: initialisée par undefined;

voyons maintenant le code équivalent sous typescript.

@Component
export class Example extends Vue {
  someVariable1: number = 0;
  someVariable2: string | null = null; // undefined va déclarer une variable non réactive
}

veuillez noter qu’il faut assigner null au lieu de undefined pour déclarer une variable réactive.

Props

On va prendre comme exemple un simple composant qui affiche un hello world :

<template>
  <div>Hello {{ name }}</div>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        default: "Joe"
      }
    }
  };
</script>

Avec typescript ça donne :

<template>
  <div>Hello {{name}}</div>
</template>

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

  @Component
  export default class Hello extends Vue {
    @Prop({ default: "Joe" })
    name: string;
  }
</script>

à noter que les deux composants seront utilisés de la même façon :

<Hello name="Jim" />

Remarque :

Si vous utilisez visual studio code avec l’extension Vetur, vous aurez une alerte car name n’est pas initialisée, pour corriger vous pouvez faire comme ça :

@Prop({ default: "Joe" })
name: string | null = null;

on déclare ici une prop nommées name acceptant les types string ou null et initialisée par null, on est obligée ici d’ajouter null à la déclaration car on ne peut pas assigner directement un null sur une variable de type string.

Cycle de vie

Vue permet de réagir aux différentes étapes du cycle de vie d’un composant à l’aide de hooks, je vous invite à visiter la doc officielle sur le sujet pour plus de détails [https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks]

Voici un exemple avec Vue:

<script>
  export default {
    mounted() {
      console.log("Mounted!");
    },
    updated() {
      console.log("Updated!");
    }
  };
</script>

Equivalent avec Typescript :

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

  @Component
  export default class TodoList extends Vue {
    mounted() {
      console.log("Mounted!");
    }
    updated() {
      console.log("Updated!");
    }
  }
</script>

Conclusion

Je trouve l’intégration de Typescript avec VueJS en utilisant vue-property-decorator très élégante, elle permet une création facile de composants vue.

sachez qu’il est possible de cohabiter des composants écrit en Vue normal (vanilla javascript) et des composants Typescript, ce qui peut permettre une introduction en douceur à Typescript pour les gens qui ont peur de sauter le pas.