RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://vuejs.org/api/utility-types below:

Website Navigation

Utility Types | Vue.js

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.

Example

ts

import axios from 'axios'

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

See also Guide - Augmenting 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
  }
}

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" />

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>