Tipos de utilidades ​

PropType<T> ​

Se usa para anotar una prop con tipos más avanzados cuando se usan declaraciones de props en tiempo de ejecución.

• Ejemplo

  ts

  import { PropType } from 'vue'
  
  interface Book {
    title: string
    author: string
    year: number
  }
  
  export default {
    props: {
      book: {
        // provee un tipo más específico a `Object`.
        type: Object as PropType<Book>,
        required: true
      }
    }
  }

• Véase también Guía - Escritura de las Props de Componentes

MaybeRef<T> ​

Alias para T | Ref<T>. Útil para anotar argumentos de Composables.

• Sólo se admite en 3.3+.

MaybeRefOrGetter<T> ​

Alias para T | Ref<T> | (() => T). Útil para anotar argumentos de Composables.

• Sólo se admite en 3.3+.

ExtractPropTypes<T> ​

Extrae tipos de props de un objeto de opciones de props en tiempo de ejecución. Los tipos extraídos son de cara interna - es decir, las props resueltas recibidas por el componente. Esto significa que las props booleanas y las props con valores por defecto siempre se definen, incluso si no son necesarias.

Para extraer props públicas, es decir, props que el padre puede pasar, utiliza ExtractPublicPropTypes.

• Ejemplo

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

Extrae tipos de props de un objeto de opciones de props en tiempo de ejecución. Los tipos extraídos son de cara pública, es decir, las props que el padre tiene permitido pasar.

• Ejemplo

  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 ​

Se utiliza para aumentar el tipo de instancia del componente para admitir propiedades globales personalizadas.

• Ejemplo

  ts

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

  TIP

  Los aumentos deben colocarse en un archivo de módulo .ts o .d.ts. Consulta Ubicación del Aumento de Tipo para obtener más detalles.

• Véase también Guía - Aumento de las Propiedades Globales

ComponentCustomOptions ​

Se utiliza para aumentar el tipo de opciones del componente para admitir opciones personalizadas.

• Ejemplo

  ts

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

  TIP

  Los aumentos deben colocarse en un archivo de módulo .ts o .d.ts. Consulta Ubicación del Aumento de Tipo para obtener más detalles.

• Véase también Guía - Aumento de las Opciones Personalizadas

ComponentCustomProps ​

Se utiliza para aumentar las props TSX permitidas para usar props no declaradas en elementos TSX.

• Ejemplo

  ts

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

  tsx

  // ahora funciona incluso si hello no es una prop declarada
  <MyComponent hello="world" />

  TIP

  Los aumentos deben colocarse en un archivo de módulo .ts o .d.ts. Consulta Ubicación del Aumento de Tipo para obtener más detalles.

CSSProperties ​

Se utiliza para aumentar los valores permitidos en los enlaces de propiedades de estilo.

• Ejemplo

  Permitir cualquier propiedad CSS personalizada

  ts

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

  tsx

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

  html

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