Utility Types ​

PropType<T> ​

Runtime props e'lonlarini ishlatganda, prop'ni yanada rivojlangan tiplar bilan belgilash uchun ishlatiladi.

• Misol

  ts

  import type { PropType } from 'vue'
  
  interface Book {
    title: string
    author: string
    year: number
  }
  
  export default {
    props: {
      book: {
        // `Object`ga aniqroq tip ta'minlash
        type: Object as PropType<Book>,
        required: true
      }
    }
  }

• Qarang Guide - Typing Component Props

MaybeRef<T> ​

• Faqat 3.3+ versiyasida qo'llab-quvvatlanadi

T | Ref<T> uchun taxallus. Composables argumentlarini belgilash uchun foydali.

MaybeRefOrGetter<T> ​

• Faqat 3.3+ versiyasida qo'llab-quvvatlanadi

T | Ref<T> | (() => T) uchun taxallus. Composables argumentlarini belgilash uchun foydali.

ExtractPropTypes<T> ​

Runtime props opsiyalari ob'ektidan prop tiplarini ajratib oladi. Ajratilgan tiplar ichki tomonga yo'naltirilgan - ya'ni komponent tomonidan qabul qilingan hal qilingan propslar. Bu shuni anglatadiki, boolean propslar va default qiymatlarga ega propslar har doim aniqlangan, hatto ular talab qilinmasa ham.

Ota-ona o'tkazishga ruxsat berilgan public propslarni ajratib olish uchun ExtractPublicPropTypesni ishlating.

• Misol

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

• Faqat 3.3+ versiyasida qo'llab-quvvatlanadi

Runtime props opsiyalari ob'ektidan prop tiplarini ajratib oladi. Ajratilgan tiplar public tomonga yo'naltirilgan - ya'ni ota-ona o'tkazishga ruxsat berilgan propslar.

• Misol

  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 ​

Komponent instansiyasi tipini maxsus global xususiyatlarni qo'llab-quvvatlash uchun kengaytirish uchun ishlatiladi.

• Misol

  ts

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

  TIP

  Kengaytirishlar .ts yoki .d.ts modul faylida joylashgan bo'lishi kerak. Batafsil ma'lumot uchun Type Augmentation Placementni tekshiring.

• Qarang Guide - Augmenting Global Properties

ComponentCustomOptions ​

Komponent opsiyalari tipini maxsus opsiyalarni qo'llab-quvvatlash uchun kengaytirish uchun ishlatiladi.

• Misol

  ts

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

  TIP

  Kengaytirishlar .ts yoki .d.ts modul faylida joylashgan bo'lishi kerak. Batafsil ma'lumot uchun Type Augmentation Placementni tekshiring.

• Qarang Guide - Augmenting Custom Options

ComponentCustomProps ​

TSX elementlarida e'lon qilinmagan propslarni ishlatish uchun ruxsat berilgan TSX propslarini kengaytirish uchun ishlatiladi.

• Misol

  ts

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

  tsx

  // endi hello e'lon qilinmagan prop bo'lsa ham ishlaydi
  <MyComponent hello="world" />

  TIP

  Kengaytirishlar .ts yoki .d.ts modul faylida joylashgan bo'lishi kerak. Batafsil ma'lumot uchun Type Augmentation Placementni tekshiring.

CSSProperties ​

Style xususiyati bog'lanishlarida ruxsat berilgan qiymatlarni kengaytirish uchun ishlatiladi.

• Misol

  Har qanday maxsus CSS xususiyatiga ruxsat berish

  ts

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

  tsx

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

  html

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