الأنواع المساعدة (Typescript) ​

<PropType<T ​

يستخدم لتوصيف الخاصية بأنواع أكثر تقدما عند استخدام تصريحات الخاصيات في وقت التشغيل.

• مثال

  ts

  import type { PropType } from 'vue'
  
  interface Book {
    title: string
    author: string
    year: number
  }
  
  export default {
    props: {
      book: {
        // توفير نوع أكثر تحديدا لـ `Object`
        type: Object as PropType<Book>,
        required: true
      }
    }
  }

• اطلع أيضا على دليل - إضافة الأنواع لخاصيات المكون

<MaybeRef<T ​

اسم بديل لـ T | Ref<T>. مفيد لتوصيف الوسائط لـ الدوال التركيبية.

• مدعوم فقط في 3.3+

<MaybeRefOrGetter<T ​

اسم بديل لـ T | Ref<T> | (() => T). مفيد لتوصيف الوسائط لـ الدوال التركيبية.

• مدعوم فقط في 3.3+

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

تستخرج أنواع الخاصيات من كائن خيارات الخاصيات في وقت التشغيل. الأنواع المستخرجة هي الأنواع العامة - أي الخاصيات التي يسمح للأب بتمريرها.

• مثال

  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 مستقل. اطلع على مكان التوسيعات للمزيد من التفاصيل.

• اطلع أيضا على دليل - توسيع الخاصيات العامة

ComponentCustomOptions ​

يستخدم لتوسيع نوع خيارات المكون لدعم الخيارات المخصصة.

• مثال

  ts

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

  ملاحظة

  يجب وضع التوسيعات في ملف .ts أو .d.ts مستقل. اطلع على مكان التوسيعات للمزيد من التفاصيل.

• اطلع أيضا على دليل - توسيع الخيارات المخصصة

ComponentCustomProps ​

يستخدم لتوسيع الخاصيات المسموح بها في TSX من أجل استخدام الخاصيات غير المصرح بها على عناصر TSX.

• مثال

  ts

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

  tsx

  // يعمل الآن حتى لو لم يُصرح بـ hello كخاصية
  <MyComponent hello="world" />

  ملاحظة

  يجب وضع التوسيعات في ملف .ts أو .d.ts مستقل. اطلع على مكان التوسيعات للمزيد من التفاصيل.

CSSProperties ​

يستخدم لتوسيع القيم المسموح بها في ربط خاصية التنسيقات.

• مثال

  السماح بأي خاصية CSS مخصصة

  ts

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

  tsx

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

  html

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