Valider des props avec Vue.js

La déclaration des « props » avec Vue.js peut inclure plus que la simple définition des données transmises du composant parent au composant enfant. Voyons comment une validation plus complexe est déclarée.

Photo par Andrew Moca sur Unsplash

Lorsque j’ai écrit sur la fonctionnalité Vue concernant les props avec TypeScript, je n’ai présenté qu’un exemple simple où les props étaient des primitives.

Mais qu’en est-il des types de référence ? Et qu’en est-il de la validation des props ? Et l’utilisation de la syntaxe TypeScript dans ce contexte ?

Dans les exemples ci-dessous, je n’utilise que l’API Composition.

Avec JavaScript, cela ressemblerait à ceci :

defineProps({
  type: {
    // vous définissez d'abord votre règle de validation,
    // ci-dessous, les `validValues` sont représentées par un tableau de chaînes de caractères.
    // voir https://vuejs.org/guide/components/props.html#prop-validation
    validator(value) {
      const validValues = [
        "primary",
        "ghost",
        "dashed",
        "link",
        "text",
        "default",
      ];
      // si la valeur fournie existe dans le tableau des valeurs valides,
      // alors la prop est acceptée.
      return validValues.includes(value);
    },
    // omettre ce qui suit si la prop est obligatoire et n'a pas de valeur par défaut.
    default() {
      return "default";
    },
  },
});

With TypeScript, it’d look like this:

import { PropType } from "vue";
defineProps({
  type: {
    // PropType est utilisé pour annoter une propriété avec des
    // types plus avancés lors de la déclaration de props à
    // l'exécution.
    type: String as PropType<
      "primary" | "ghost" | "dashed" | "link" | "text" | "default"
    >,
    default: "default",
    validator: (prop: string) =>
      ["primary", "ghost", "dashed", "link", "text", "default"].includes(prop),
  },
});

Crédits à :

• @webfansplz qui a construit le site web Vue.js challenges app et m’a mis au défi de trouver la solution sur la validation des props.
• Orbis sur cette réponse Stackoverflow