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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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 à :
