Skip to content

Utility Types

INFO

এই পেইজটি শুধুমাত্র কয়েকটি সাধারণভাবে ব্যবহৃত ইউটিলিটি টাইপের লিস্ট করে যেগুলির ব্যবহারের জন্য ব্যাখ্যার প্রয়োজন হতে পারে। এক্সপোর্টেড করা টাইপের সম্পূর্ণ লিস্টের জন্য, source code দেখুন।

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>

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

  • উদাহরন

    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>

TIP

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

See also

SFC <style> ট্যাগগুলি v-bind CSS ফাংশন ব্যবহার করে CSS ভ্যালুগুলিকে ডাইনামিক কম্পোনেন্ট স্টেইটে লিঙ্ক করা সাপোর্ট করে। এটি টাইপ বৃদ্ধি ছাড়াই কাস্টম প্রোপার্টির জন্য এ্যালাউ করে।

Utility Types has loaded