تایپ‌های کاربردی ​

PropType<T> ​

برای یادداشت نویسی(annotate) یک پراپ با تایپ‌های پیشرفته‌تر (advanced types) هنگام استفاده از اعلامیه‌های پراپ‌های ران‌تایم استفاده می‌شود.

• مثال

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

• همچنین ببینید Guide - Typing Component Props

MaybeRef<T> ​

• فقط در 3.3+ پشتیبانی می‌شود.

نام مستعار برای T | Ref<T>‎. مفید برای حاشیه نویسی آرگومان‌های Composables.

MaybeRefOrGetter<T> ​

• فقط در 3.3+ پشتیبانی می‌شود.

نام مستعار برای T | Ref<T> | (() => T)‎. مفید برای حاشیه نویسی آرگومان‌های Composables.

ExtractPropTypes<T> ​

تایپ‌های پراپ را از یک آبجکت آپشن‌های پراپ‌ها ران‌تایم استخراج کنید. تایپ‌های استخراج‌شده رو به داخل هستند - یعنی پراپ‌های حل‌شده توسط کامپوننت دریافت شده. این بدان معناست که پایه‌های بولی و پایه‌های با مقادیر پیش‌فرض همیشه تعریف می‌شوند، حتی اگر مورد نیاز نباشند.

برای استخراج کردن پراپ‌های عمومی، به‌عنوان مثال‌ پراپ‌هایی که والد مجاز به عبور از آن‌ است، از ExtractPublicPropTypes استفاده کنید.

• مثال

  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+ پشتیبانی می‌شود.

تایپ‌های پراپ را از یک آبجکت آپشن‌های پراپ‌های ران‌تایم را استخراج کنید. تایپ‌های استخراج شده در معرض عموم قرار دارند - یعنی پراپ‌هایی که والد مجاز به عبور از آنها است.

• مثال

  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 ​

برای افزایش تایپ نمونه کامپوننت جهت پشتیبانی از پراپرتی‌های سراسری سفارشی استفاده می‌شود.

• مثال

  ts

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

  نکته

  افزایش‌ها باید در یک ماژول ‎.ts یا ‎.d.ts قرار گیرند. برای جزئیات بیشتر به Type Augmentation Placement مراجعه کنید.

• همچنین ببینید Guide - Augmenting Global Properties

ComponentCustomOptions ​

برای افزایش تایپ آپشن‌های کامپوننت جهت پشتیبانی از آپشن‌های سفارشی استفاده می‌شود.

• مثال

  ts

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

  نکته

  افزایش‌ها باید در یک ماژول ‎.ts یا ‎.d.ts قرار گیرند. برای جزئیات بیشتر به Type Augmentation Placement مراجعه کنید.

• همچنین ببینید Guide - Augmenting Custom Options

ComponentCustomProps ​

برای افزایش پراپ‌های مجاز TSX به منظور استفاده از پراپ‌های اعلام نشده (non-declared) در عناصر TSX استفاده می‌شود.

• مثال

  ts

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

  tsx

  // now works even if hello is not a declared prop
  <MyComponent hello="world" />

  نکته

  افزایش‌ها باید در یک ماژول ‎.ts یا ‎.d.ts قرار گیرند. برای جزئیات بیشتر به Type Augmentation Placement مراجعه کنید.

CSSProperties ​

برای افزایش مقادیر مجاز در پراپرتی‌های متصل کردن استایل استفاده می‌شود.

• مثال

  اجازه دادن به هر پراپرتی سفارشی CSS

  ts

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

  tsx

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

  html

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