Types delle Utility. ​

PropType<T> ​

Viene utilizzato per annotare una prop con tipi più avanzati quando si utilizzano dichiarazioni di prop runtime.

• Esempio

  ts

  import type { PropType } from 'vue'
  
  interface Book {
    title: string
    author: string
    year: number
  }
  
  export default {
    props: {
      book: {
        // fornisce un type più specifico rispetto a `Object`
        type: Object as PropType<Book>,
        required: true
      }
    }
  }

• Guarda anche Guida - Tipizzare le Props dei Componenti

MaybeRef<T> ​

Alias per T | Ref<T>. Utile per annotare gli argomenti dei Composables.

• Supportato solo dalla versione 3.3+.

MaybeRefOrGetter<T> ​

Alias per T | Ref<T> | (() => T). Utile per annotare gli argomenti dei Composables.

• Supportato solo dalla versione 3.3+.

ExtractPropTypes<T> ​

Estrae i type delle prop dall'oggetto delle opzioni delle prop a runtime. I tipi estratti sono interni - ovvero le props risolte ricevute dal componente. Ciò significa che le props booleane e le props con valori predefiniti sono sempre definite, anche se non sono richieste.

Per estrarre le props esterne, ovvero le props che il componente genitore è autorizzato a passare, utilizza ExtractPublicPropTypes.

• Esempio

  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> ​

Estrae i type delle prop dall'oggetto delle opzioni delle prop a runtime. I tipi estratti sono rivolti all'esterno - ovvero le props che il componente genitore è autorizzato a passare.

• Esempio

  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 ​

Viene utilizzato per estendere il type dell'istanza del componente al fine di supportare proprietà globali personalizzate.

• Esempio

  ts

  import axios from 'axios'
  
  declare module 'vue' {
    interface ComponentCustomProperties {
      $http: typeof axios
      $translate: (key: string) => string
    }
  }

  TIP

  Le estensioni devono essere inserite in un file di modulo .ts o .d.ts. Per ulteriori dettagli, consulta Posizionamento delle Estensioni dei Type.

• Guarda anche Guide - Augmenting Global Properties

ComponentCustomOptions ​

Viene utilizzata per estendere il type delle opzioni del componente al fine di supportare opzioni personalizzate.

• Esempio

  ts

  import { Route } from 'vue-router'
  
  declare module 'vue' {
    interface ComponentCustomOptions {
      beforeRouteEnter?(to: any, from: any, next: () => void): void
    }
  }

  TIP

  Le estensioni devono essere inserite in un file di modulo .ts o .d.ts. Per ulteriori dettagli, consulta Posizionamento delle Estensioni dei Type.

• Guarda anche Guide - Augmenting Custom Options

ComponentCustomProps ​

Viene utilizzata per estendere le proprietà consentite TSX al fine di utilizzare proprietà non dichiarate negli elementi TSX.

• Esempio

  ts

  declare module 'vue' {
    interface ComponentCustomProps {
      hello?: string
    }
  }
  
  export {}

  tsx

  // ora funziona anche se hello è una prop NON dichiarata
  <MyComponent hello="world" />

  TIP

  Le estensioni devono essere inserite in un file di modulo .ts o .d.ts. Per ulteriori dettagli, consulta Posizionamento delle Estensioni dei Type.

CSSProperties ​

Viene utilizzata per estendere i valori consentiti nei binding delle proprietà di stile.

• Esempio

  Permette qualsiasi proprietà CSS personalizzata.

  ts

  declare module 'vue' {
    interface CSSProperties {
      [key: `--${string}`]: string
    }
  }

  tsx

  <div style={ { '--bg-color': 'blue' } }>

  html

  <div :style="{ '--bg-color': 'blue' }"></div>