Vue.js, TypeScript et données
Je suis toujours sur mon projet qui utilise le combo Vue.js + TypeScript en front. Aujourd’hui, je voulais remplir une data table avec des données reçues par appel à une API. Côté réception des données, aucun soucis, ils sont bien là. Par contre, pour l’affichage, ça été plus compliqué.
Voici à quoi ressemble la partie script de mon fichier .vue en cours d’édition.
export default {
mounted()
{
this.getAllPosts();
},
data()
{
return {
headers: [
{ text: 'ID', value: 'id' },
{ text: 'Title', value: 'title' },
],
posts: [] as Post[]
}
},
methods:
{
getAllPosts(): void
{
api.entities.posts.getAll().then((response) => { this.posts = response as Post[] });
}
}
};
L’affichage n’est pas important, pas plus que la moitié du code. Ce qui compte, c’est la méthode getAllPosts. Sauf que celle-ci ne fonctionnait pas. Impossible de savoir pourquoi, mais pour le compilateur, this.posts n’existe pas et je n’ai accès qu’à getAllPosts quand je fais this. + Ctrl+Space. Bizarre quand même !
De plus, impossible de comprendre pourquoi tous les codes sur Internet, si identiques, sont fonctionnels. Et mon frère me pose alors une question qui m’éclaire : « Mais ton code, c’est du JavaScript ou du TypeScript ? » Parce que oui, tous les codes que j’ai vu sont en JavaScript 100% standard. Alors il me dirige vers la documentation. Je note un léger changement par rapport à mon code.
import Vue, { VNode } from 'vue'
const Component = Vue.extend({
/* ... */
});
En fait, avec TypeScript, il y a deux solutions. Soit utiliser Vue.extend, soit à l’aide de décorateurs, pour créer des classes et non plus de simples objets.
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component
export default class Posts extends Vue {
/* ... */
}
Je vous invite à lire cet article qui donne quelques précisions à mes propos. En tout cas, Vue.js a un avantage, c’est d’avoir une documentation claire, propre et assez exhaustive. 
