Vue Academy · Pelajaran

Mengetik Composable dan Ref

Ref , ComputedRef , nilai kembalian bertipe dari composable, serta MaybeRef .

Mengetik Composable dan Ref adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Mengetik API Komposisi

Fungsi komposabel hanyalah fungsi, dan referensi hanyalah wadah bertipe. Menambahkan tipe eksplisit membuat fungsi komposabel Anda aman digunakan serta memberi pemanggil pelengkapan otomatis yang lengkap.

Tipe ref yang Disimpulkan

Sering kali TypeScript menyimpulkan tipe ref dari nilai awalnya. ref(0) otomatis menjadi Ref<number>.

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

Generik ref Eksplisit

Jika nilai awal tidak dapat menyatakan tipe lengkap—misalnya nilai yang dimulai sebagai null tetapi kemudian menjadi objek—berikan generik secara eksplisit.

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

Tipe Ref

Ref<T> menjelaskan ref yang dapat ditulis, dengan .value bertipe T. Gunakan tipe ini untuk memberi anotasi pada variabel atau parameter fungsi yang menerima ref.

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

Tipe ComputedRef

computed mengembalikan ComputedRef<T> yang hanya dapat dibaca. Gunakan tipe ini saat memberi anotasi pada fungsi komposabel yang mengembalikan nilai computed.

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

Mengetik Nilai Kembalian Komposabel

Beri anotasi pada bentuk kembalian agar pengguna mengetahui dengan tepat apa yang mereka dapatkan. Tipe kembalian eksplisit juga mendokumentasikan fungsi komposabel tersebut.

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

Membiarkan Inferensi Bekerja

Sering kali Anda dapat menghilangkan tipe kembalian eksplisit dan membiarkan TypeScript menyimpulkannya. Tambahkan tipe eksplisit hanya jika Anda menginginkan kontrak publik yang stabil.

MaybeRef untuk Masukan Fleksibel

MaybeRef<T> berarti nilai yang dapat berupa T biasa atau Ref<T>. Ini memungkinkan fungsi komposabel menerima salah satu bentuk tersebut.

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

Membuka Bungkus dengan unref

unref(x) mengembalikan x.value jika x adalah ref, atau mengembalikan x itu sendiri jika bukan. Padukan dengan MaybeRef untuk menormalkan masukan.

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

toValue: Pembantu Modern

Vue 3.3 menambahkan toValue, yang membuka bungkus ref dan memanggil fungsi getter. Ini adalah cara yang disarankan untuk menormalkan masukan MaybeRefOrGetter.

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

Mengetik Objek Reaktif

reactive menyimpulkan tipe objek secara langsung—tidak diperlukan .value. Untuk pengetikan eksplisit, beri anotasi pada variabel dengan antarmuka objek.

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

Pemeriksaan Singkat

Uji pengetahuan Anda tentang pengetikan fungsi komposabel dan ref.

Ringkasan

Anda telah belajar mengetik API Komposisi:

ref menyimpulkan tipe; gunakan ref<T>() jika nilai awal tidak memadai.
Ref<T> dan ComputedRef<T> memberi anotasi pada ref dan computed.
Ketik nilai kembalian fungsi komposabel untuk menghasilkan kontrak yang jelas.
MaybeRef<T> + unref()/toValue() menerima masukan yang fleksibel.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengetik Composable dan Ref” gratis?

Ya — teks lengkap “Mengetik Composable dan Ref” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mengetik Composable dan Ref”?

Ref , ComputedRef , nilai kembalian bertipe dari composable, serta MaybeRef . Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Mengetik Composable dan Ref” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Menyiapkan TypeScript dalam Proyek Vue
Props dan Emits Bertipe dengan defineProps/defineEmits
Mengetik Composable dan Ref
Komponen Vue Generik

← Kembali ke Vue Academy