Kullanım Türleri

Kullanım Türleri

bilgi

Bu sayfa, kullanımında açıklamaya ihtiyaç duyabilecek birkaç yaygın kullanılan kullanım türünü listelemektedir. Tüm dışa aktarılan türlerin tam listesi için kaynak koduna bakın.

PropType

Runtime props deklarasyonları kullanırken bir prop'u daha karmaşık türlerle belirtmek için kullanılır.

• Örnek

  import type { PropType } from 'vue'
  
  interface Book {
    title: string
    author: string
    year: number
  }
  
  export default {
    props: {
      book: {
        // `Object` için daha spesifik bir tür sağlayın
        type: Object as PropType<Book>,
        required: true
      }
    }
  }

• Ayrıca bakınız Rehber - Bileşen Props'unu Türlendirme

MaybeRef

• Sadece 3.3+ sürümlerinde desteklenir.

T | Ref için bir takma ad. Kompozitler için argümanları belirtmekte faydalıdır.

MaybeRefOrGetter

• Sadece 3.3+ sürümlerinde desteklenir.

T | Ref | (() => T) için bir takma ad. Kompozitler için argümanları belirtmekte faydalıdır.

ExtractPropTypes

Runtime props seçenek nesnesinden prop türlerini çıkarır. Çıkarılan türler içsel olarak tanımlıdır - yani, bileşen tarafından alınan çözümlenmiş props'lardır. Bu, boolean props ve varsayılan değerlere sahip props'ların her zaman tanımlı olduğu anlamına gelir, hatta gerekli olmasalar bile.

Genel kullanıcıya açık props'ları çıkarmak için, yani, ebeveynin geçmesine izin verilen props'ları çıkarmak için ExtractPublicPropTypes kullanın.

• Örnek

  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

• Sadece 3.3+ sürümlerinde desteklenir.

Runtime props seçenek nesnesinden prop türlerini çıkarır. Çıkarılan türler genel kullanıma açıktır - yani, ebeveynin geçmesine izin verilen props'lardır.

• Örnek

  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

Özel genel özellikleri desteklemek için bileşen örneği türünü geliştirmek için kullanılır.

• Örnek

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

  Geliştirmeler bir .ts veya .d.ts modül dosyasında yer almalıdır. Daha fazla ayrıntı için Tür Geliştirme Yerleşimi sayfasına bakın.

• Ayrıca bakınız Rehber - Küresel Özellikleri Geliştirme

ComponentCustomOptions

Özel seçenekleri desteklemek için bileşen seçenek türünü geliştirmek için kullanılır.

• Örnek

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

  Geliştirmeler bir .ts veya .d.ts modül dosyasında yer almalıdır. Daha fazla ayrıntı için Tür Geliştirme Yerleşimi sayfasına bakın.

• Ayrıca bakınız Rehber - Özel Seçenekleri Geliştirme

ComponentCustomProps

Tanımlanmamış props'ları TSX öğeleri üzerinde kullanabilmek için izin verilen TSX props'larını artırmak için kullanılır.

• Örnek

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

  // artık hello tanımlı bir prop olmasa bile çalışır
  <MyComponent hello="world" />
  ipucu

  Geliştirmeler bir .ts veya .d.ts modül dosyasında yer almalıdır. Daha fazla ayrıntı için Tür Geliştirme Yerleşimi sayfasına bakın.

CSSProperties

Stil özellik bağlamalarında izin verilen değerleri artırmak için kullanılır.

• Örnek

  Herhangi bir özel CSS özelliğine izin verin

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

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

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

ipucu

Geliştirmeler bir .ts veya .d.ts modül dosyasında yer almalıdır. Daha fazla ayrıntı için Tür Geliştirme Yerleşimi sayfasına bakın.

Ayrıca bakınız

SFC `` etiketleri, dinamik bileşen durumuna bağlı olarak CSS değerlerini bağlama desteği sunar ve bu, tür artırımı olmaksızın özel özellikler oluşturulmasını sağlar.

• CSS'de v-bind()