Utility Types ​

PropType<T> ​

রানটাইম প্রপ ডিক্লেয়ার ব্যবহার করার সময় আরও উন্নত ধরনের সহ একটি প্রপ টীকা করতে ব্যবহৃত হয়।

• উদাহরন

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

T | এর এলিয়াস রেফারেন্স<T>। Composables এর আর্গুমেন্ট টীকা করার জন্য দরকারী।

• শুধুমাত্র 3.3+ এ সমর্থিত।

MaybeRefOrGetter<T> ​

T | এর এলিয়াস রেফারেন্স<T>। Composables এর আর্গুমেন্ট টীকা করার জন্য দরকারী।

• শুধুমাত্র 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> ​

রানটাইম প্রপ অপশন অবজেক্ট থেকে প্রপ টাইপগুলি বের করুন। এক্সট্রাক্টেড টাইপগুলি পাবলিক ফেসিং - যেমন প্রপস যা প্যারেন্টকে পাস করার অনুমতি দেওয়া হয়েছে৷

• শুধুমাত্র 3.3+ এ সমর্থিত।

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

কাস্টম গ্লোবাল প্রোপার্টি সমর্থন করার জন্য কম্পোনেন্ট ইন্সট্যান্স টাইপ বৃদ্ধি ব্যবহৃত হয়।

• উদাহরন

  ts

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

  TIP

  অগমেন্টেশনগুলি অবশ্যই একটি মডিউল .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
    }
  }

  TIP

  অগমেন্টেশনগুলি অবশ্যই একটি মডিউল .ts বা .d.ts ফাইলে স্থাপন করতে হবে। আরো বিস্তারিত জানার জন্য Type Augmentation Placement দেখুন।

• আরো দেখুন Guide - Augmenting Custom Options

ComponentCustomProps ​

TSX ইলিমেন্টগুলিতে অ-ঘোষিত প্রপগুলি ব্যবহার করার জন্য অনুমোদিত TSX প্রপগুলিকে বৃদ্ধি করতে ব্যবহৃত হয়৷

• উদাহরন

  ts

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

  tsx

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

  TIP

  অগমেন্টেশনগুলি অবশ্যই একটি মডিউল .ts বা .d.ts ফাইলে স্থাপন করতে হবে। আরো বিস্তারিত জানার জন্য Type Augmentation Placement দেখুন।

CSSProperties ​

স্টাইল প্রোপার্টি বাইন্ডিং এর এ্যালাউড ভ্যালু বৃদ্ধি করতে ব্যবহৃত হয়।

• উদাহরন

  যেকোন কাস্টম সিএসএস প্রপার্টির এ্যালাউ করুন।

  ts

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

  tsx

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

  html

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