યુટિલિટી ટાઇપ્સ (Utility Types) ​

PropType<T> ​

Runtime props declarations ઉપયોગ કરતી વખતે prop ને વધુ advanced types સાથે annotate કરવા માટે ઉપયોગ થાય છે.

• ઉદાહરણ (Example)

  ts

  import type { PropType } from 'vue'
  
  interface Book {
    title: string
    author: string
    year: number
  }
  
  export default {
    props: {
      book: {
        // `Object` ને વધુ ચોક્કસ type provide કરો
        type: Object as PropType<Book>,
        required: true
      }
    }
  }

• આ પણ જુઓ ગાઇડ - ઘટક Props ટાઇપ કરવા

MaybeRef<T> ​

• માત્ર 3.3+ માં સપોર્ટેડ

T | Ref<T> માટે Alias. Composables ના arguments annotate કરવા માટે ઉપયોગી.

MaybeRefOrGetter<T> ​

• માત્ર 3.3+ માં સપોર્ટેડ

T | Ref<T> | (() => T) માટે Alias. Composables ના arguments annotate કરવા માટે ઉપયોગી.

ExtractPropTypes<T> ​

Runtime props options object માંથી prop types extract કરો. Extracted types internal facing છે - i.e. ઘટક દ્વારા received resolved props. આનો અર્થ એ છે કે boolean props અને default values ધરાવતા props હંમેશા defined છે, ભલે તેઓ required ન હોય.

Public facing props extract કરવા, i.e. parent ને pass કરવાની મંજૂરી હોય તેવા props, 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> ​

• માત્ર 3.3+ માં સપોર્ટેડ

Runtime props options object માંથી prop types extract કરો. Extracted types public facing છે - i.e. parent ને pass કરવાની મંજૂરી હોય તેવા props.

• ઉદાહરણ (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 ​

Custom global properties ને support કરવા માટે ઘટક ઇન્સ્ટન્સ type ને augment કરવા ઉપયોગ થાય છે.

• ઉદાહરણ (Example)

  ts

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

  TIP

  Augmentations module .ts અથવા .d.ts file માં placed હોવા જોઈએ. વધુ વિગત માટે Type Augmentation Placement જુઓ.

• આ પણ જુઓ ગાઇડ - ગ્લોબલ Properties Augment કરવી

ComponentCustomOptions ​

Custom options ને support કરવા માટે ઘટક options type ને augment કરવા ઉપયોગ થાય છે.

• ઉદાહરણ (Example)

  ts

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

  TIP

  Augmentations module .ts અથવા .d.ts file માં placed હોવા જોઈએ. વધુ વિગત માટે Type Augmentation Placement જુઓ.

• આ પણ જુઓ ગાઇડ - Custom Options Augment કરવી

ComponentCustomProps ​

TSX elements પર non-declared props ઉપયોગ કરવા માટે allowed TSX props ને augment કરવા ઉપયોગ થાય છે.

• ઉદાહરણ (Example)

  ts

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

  tsx

  // હવે કામ કરે છે ભલે hello declared prop ન હોય
  <MyComponent hello="world" />

  TIP

  Augmentations module .ts અથવા .d.ts file માં placed હોવા જોઈએ. વધુ વિગત માટે Type Augmentation Placement જુઓ.

CSSProperties ​

Style property bindings માં allowed values ને augment કરવા ઉપયોગ થાય છે.

• ઉદાહરણ (Example)

  કોઈપણ 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>