0Pricing
Vue Academy · Ders

Composable'ları ve Ref'leri Türlendirme

Ref , ComputedRef , composable'lardan türü belirlenmiş dönüş ve MaybeRef .

Composable'ları ve Ref'leri Türlendirme, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Composition API'nin Türlerini Belirleme

Composables yalnızca işlevlerden, ref'ler ise yalnızca tür bilgili kapsayıcılardan oluşur. Açık türler eklemek, composable'larınızın güvenle kullanılmasını sağlar ve çağıranlara tam otomatik tamamlama sunar.

Çıkarılan ref Türleri

Çoğu zaman TypeScript, bir ref'in türünü başlangıç değerinden çıkarır. ref(0) otomatik olarak bir Ref<number> olur.

import { ref } from 'vue'
const count = ref(0)        // Ref<number>
const name = ref('Coddy')  // Ref<string>

Açık ref Genel Türleri

Başlangıç değeri tam türü ifade edemediğinde, örneğin null ile başlayıp bir nesneye dönüşen bir değerde, açık bir genel tür aktarın.

interface User { id: number; name: string }
const user = ref<User | null>(null)

Ref Türü

Ref<T>, .value özelliği T türünde olan yazılabilir bir ref'i tanımlar. Ref alan değişkenlere veya işlev parametrelerine tür açıklaması eklemek için kullanın.

import type { Ref } from 'vue'
function useDouble(n: Ref<number>) {
  return computed(() => n.value * 2)
}

ComputedRef Türü

computed, salt okunur bir ComputedRef<T> döndürür. Hesaplanmış değerler döndüren bir composable'a tür açıklaması eklerken bu türü kullanın.

import type { ComputedRef } from 'vue'
const doubled: ComputedRef<number> = computed(() => count.value * 2)

Bir Composable'ın Dönüş Türünü Belirleme

Tüketicilerin tam olarak ne alacağını görebilmesi için dönüş yapısını açıklayın. Açık bir dönüş türü, composable'ı ayrıca belgelendirir.

import { ref, type Ref } from 'vue'
function useCounter(): { count: Ref<number>; increment: () => void } {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}

Tür Çıkarımını Kullanma

Çoğu durumda açık dönüş türünü kaldırıp TypeScript'in türü çıkarmasına izin verebilirsiniz. Açık türü yalnızca kararlı bir genel sözleşme istediğinizde ekleyin.

Esnek Girdiler için MaybeRef

MaybeRef<T>, düz bir T veya bir Ref<T> olabilen bir değer anlamına gelir. Composable'ların her iki biçimi de kabul etmesini sağlar.

import type { MaybeRef } from 'vue'
function useGreeting(name: MaybeRef<string>) {
  // name could be 'Coddy' or ref('Coddy')
}

unref ile Sarmalı Açma

unref(x), x bir ref ise x.value değerini, değilse doğrudan x'i döndürür. Girdiyi normalleştirmek için bunu MaybeRef ile birlikte kullanın.

import { unref, type MaybeRef } from 'vue'
function useGreeting(name: MaybeRef<string>) {
  const text = unref(name) // always a string
  return 'Hello ' + text
}

toValue: Modern Yardımcı

Vue 3.3, ref'lerin ve alıcı işlevlerin sarmalını açan toValue işlevini ekledi. MaybeRefOrGetter girdilerini normalleştirmenin tercih edilen yolu budur.

import { toValue, type MaybeRefOrGetter } from 'vue'
function useLen(input: MaybeRefOrGetter<string>) {
  return computed(() => toValue(input).length)
}

Reaktif Nesnelerin Türlerini Belirleme

reactive, nesne türünü doğrudan çıkarır; .value kullanmanız gerekmez. Açık tür belirtmek için değişkene nesne arayüzüyle tür açıklaması ekleyin.

import { reactive } from 'vue'
interface State { count: number; name: string }
const state: State = reactive({ count: 0, name: '' })

Hızlı Sınama

Composable'ların ve ref'lerin türlerini belirleme konusundaki bilginizi sınayın.

Özet

Composition API'nin türlerini belirlemeyi öğrendiniz:

  • ref türleri çıkarır; başlangıç değeri yetersiz olduğunda ref<T>() kullanın.
  • Ref<T> ve ComputedRef<T>, ref'lere ve hesaplanmış değerlere tür açıklaması ekler.
  • Açık bir sözleşme için composable dönüşlerinin türünü belirleyin.
  • MaybeRef<T> + unref()/toValue(), esnek girdileri kabul eder.

Sıkça Sorulan Sorular

“Composable'ları ve Ref'leri Türlendirme” dersi ücretsiz mi?

Evet — “Composable'ları ve Ref'leri Türlendirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Composable'ları ve Ref'leri Türlendirme” dersinde ne öğreneceğim?

Ref , ComputedRef , composable'lardan türü belirlenmiş dönüş ve MaybeRef . Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Composable'ları ve Ref'leri Türlendirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Vue Projelerinde TypeScript Kurulumu
  2. defineProps/defineEmits ile Türü Belirlenmiş Props ve Emit'ler
  3. Composable'ları ve Ref'leri Türlendirme
  4. Genel Amaçlı Vue Bileşenleri
← Vue Academy Sayfasına Dön