Skip to content

Utility Types

INFO

This page only lists a few commonly used utility types that may need explanation for their usage. For a full list of exported types, consult the source code.

PropType<T>

Used to annotate a prop with more advanced types when using runtime props declarations.

  • Example

    ts
    import type { PropType } from 'vue'
    
    interface Book {
      title: string
      author: string
      year: number
    }
    
    export default {
      props: {
        book: {
          // provide more specific type to `Object`
          type: Object as PropType<Book>,
          required: true
        }
      }
    }
  • See also Guide - Typing Component Props

MaybeRef<T>

  • Only supported in 3.3+

Alias for T | Ref<T>. Useful for annotating arguments of Composables.

MaybeRefOrGetter<T>

  • Only supported in 3.3+

Alias for T | Ref<T> | (() => T). Useful for annotating arguments of Composables.

ExtractPropTypes<T>

Extract prop types from a runtime props options object. The extracted types are internal facing - i.e. the resolved props received by the component. This means boolean props and props with default values are always defined, even if they are not required.

To extract public facing props, i.e. props that the parent is allowed to pass, use ExtractPublicPropTypes.

  • Example

    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>

  • Only supported in 3.3+

Extract prop types from a runtime props options object. The extracted types are public facing - i.e. the props that the parent is allowed to pass.

  • Example

    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

Used to augment the component instance type to support custom global properties.

ComponentCustomOptions

Used to augment the component options type to support custom options.

  • Example

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

    TIP

    Augmentations must be placed in a module .ts or .d.ts file. See Type Augmentation Placement for more details.

  • See also Guide - Augmenting Custom Options

ComponentCustomProps

Used to augment allowed TSX props in order to use non-declared props on TSX elements.

  • Example

    ts
    declare module 'vue' {
      interface ComponentCustomProps {
        hello?: string
      }
    }
    
    export {}
    tsx
    // now works even if hello is not a declared prop
    <MyComponent hello="world" />

    TIP

    Augmentations must be placed in a module .ts or .d.ts file. See Type Augmentation Placement for more details.

CSSProperties

Used to augment allowed values in style property bindings.

  • Example

    Allow any custom CSS property

    ts
    declare module 'vue' {
      interface CSSProperties {
        [key: `--${string}`]: string
      }
    }
    tsx
    <div style={ { '--bg-color': 'blue' } }>
    html
    <div :style="{ '--bg-color': 'blue' }"></div>

TIP

Augmentations must be placed in a module .ts or .d.ts file. See Type Augmentation Placement for more details.

See also

SFC <style> tags support linking CSS values to dynamic component state using the v-bind CSS function. This allows for custom properties without type augmentation.

Utility Types has loaded