Types utilitaires
INFO
Cette page ne liste que quelques types d'utilitaires couramment utilisés et dont l'utilisation peut nécessiter une explication. Pour une liste complète des types exportés, consultez le code source.
PropType<T>
Utilisé pour annoter une prop avec des types plus avancés lors de l'utilisation de déclarations de props à l'exécution.
Exemple :
tsimport type { PropType } from 'vue' interface Book { title: string author: string year: number } export default { props: { book: { // fournit un type plus spécifique à `Object`. type: Object as PropType<Book>, required: true } } }
Voir aussi : Guide - Typer les props des composants
ComponentCustomProperties
Utilisé pour augmenter le type de l'instance du composant afin de prendre en charge les propriétés globales personnalisées.
Exemple :
tsimport axios from 'axios' declare module 'vue' { interface ComponentCustomProperties { $http: typeof axios $translate: (key: string) => string } }
TIP
Les augmentations doivent être placées dans un fichier module
.ts
ou.d.ts
. Consultez le placement des annotations de types pour plus de détails.Voir aussi : Guide - Augmenter les propriétés globales
ComponentCustomOptions
Utilisé pour augmenter le type des options du composant afin de prendre en charge les options personnalisées.
Exemple :
tsimport { Route } from 'vue-router' declare module 'vue' { interface ComponentCustomOptions { beforeRouteEnter?(to: any, from: any, next: () => void): void } }
TIP
Les augmentations doivent être placées dans un fichier module
.ts
ou.d.ts
. Consultez le placement des annotations de types pour plus de détails.Voir aussi : Guide - Augmenter les options personnalisées
ComponentCustomProps
Utilisé pour augmenter les props TSX autorisées afin d'utiliser des props non déclarées sur des éléments TSX.
Exemple :
tsdeclare module 'vue' { interface ComponentCustomProps { hello?: string } } export {}
tsx// fonctionne maintenant même si hello n'est pas une prop déclarée <MyComponent hello="world" />
TIP
Les augmentations doivent être placées dans un fichier module
.ts
ou.d.ts
. Consultez le placement des annotations de types pour plus de détails.
CSSProperties
Utilisé pour augmenter les valeurs autorisées dans les liaisons de propriétés de style.
Exemple :
Permet l'utilisation de n'importe quelle propriété CSS personnalisée
tsdeclare module 'vue' { interface CSSProperties { [key: `--${string}`]: string } }
tsx<div style={ { '--bg-color': 'blue' } }>
html<div :style="{ '--bg-color': 'blue' }">
TIP
Les augmentations doivent être placées dans un fichier module .ts
ou .d.ts
. Consultez le placement des annotations de types pour plus de détails.
Voir aussi
Les balises <style>
des composants monofichiers permettent de lier les valeurs CSS à l'état dynamique des composants via la fonction CSS v-bind
. Cela permet d'obtenir des propriétés personnalisées sans augmentation de type.