Passer au contenu

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 :

    ts
    import 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.

ComponentCustomOptions

Utilisé pour augmenter le type des options du composant afin de prendre en charge 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 :

    ts
    declare 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

    ts
    declare 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.

Types utilitairesa chargé