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

MaybeRef<T>

Alias pour T | Ref<T>. Utile pour annoter les arguments des Composables.

  • Pris en charge uniquement dans la version 3.3+.

MaybeRefOrGetter<T>

Alias pour T | Ref<T> | (() => T). Utile pour annoter les arguments des Composables.

  • Pris en charge uniquement dans la version 3.3+.

ExtractPropTypes<T>

Extrait les types de props à partir d'un objet d'options de props au moment de l'exécution. Les types extraits sont destinés à un usage interne, c'est-à-dire les props résolues reçues par le composant. Cela signifie que les props booléennes et les props avec des valeurs par défaut sont toujours définies, même si elles ne sont pas obligatoires.

Pour extraire les props destinées à être utilisées publiquement, c'est-à-dire les props que le composant parent est autorisé à transmettre, utilisez ExtractPublicPropTypes.

  • Exemple

    ts
    const propsOptions = {
      foo: String,
      bar: Boolean,
      baz: {
        type: Number,
        required: true
      },
      qux: {
        type: Number,
        default: 1
      }
    } as const
    
    type Props = ExtractPropTypes<typeof propsOptions>
    // {
    //   foo?: string,
    //   bar: boolean,
    //   baz: number,
    //   qux: number
    // }

ExtractPublicPropTypes<T>

Extrait les types de props à partir d'un objet d'options de props. Les types extraits sont destinés à un usage public, c'est-à-dire les props que le parent est autorisé à transmettre.

  • Exemple

    ts
    const propsOptions = {
      foo: String,
      bar: Boolean,
      baz: {
        type: Number,
        required: true
      },
      qux: {
        type: Number,
        default: 1
      }
    } as const
    
    type Props = ExtractPublicPropTypes<typeof propsOptions>
    // {
    //   foo?: string,
    //   bar?: boolean,
    //   baz: number,
    //   qux?: number
    // }

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' }"></div>

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é