Vue Academy · درس

كتابة أنواع Composables وRefs

‏Ref وComputedRef ، وقيمة الإرجاع المكتوبة الأنواع من Composables، وMaybeRef

كتابة أنواع Composables وRefs درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

تحديد أنواع Composition API

الوحدات القابلة لإعادة الاستخدام ليست سوى دوال، والمراجع ليست سوى حاويات محددة النوع. وتؤدي إضافة أنواع صريحة إلى جعل الوحدات آمنة عند استخدامها، كما تمنح المستدعين إكمالًا تلقائيًا كاملًا.

الأنواع المستنتجة للمراجع

في معظم الحالات، يستنتج TypeScript نوع المرجع من قيمته الأولية. فمثلًا، تصبح ref(0) تلقائيًا من النوع Ref<number>.

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

الأنواع العامة الصريحة للمراجع

عندما لا تعبّر القيمة الأولية عن النوع الكامل — مثل قيمة تبدأ بـnull ثم تصبح كائنًا — مرّروا نوعًا عامًا صريحًا.

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

نوع Ref

يصف Ref<T> مرجعًا قابلًا للكتابة تكون قيمة .value فيه من النوع T. استخدموه لتحديد أنواع المتغيرات أو معاملات الدوال التي تستقبل مراجع.

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

نوع ComputedRef

تعيد computed قيمة ComputedRef<T> للقراءة فقط. استخدموا هذا النوع عند تحديد نوع وحدة قابلة لإعادة الاستخدام تُعيد قيمًا محسوبة.

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

تحديد نوع القيمة المعادة من وحدة قابلة لإعادة الاستخدام

حدّدوا شكل القيمة المعادة حتى يرى المستهلكون ما يحصلون عليه بالضبط. كما توثّق القيمة المعادة المحددة صراحةً الوحدة القابلة لإعادة الاستخدام.

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

السماح للاستنتاج بالعمل

غالبًا ما يمكنكم حذف نوع القيمة المعادة صراحةً وترك TypeScript يستنتجه. أضيفوا نوعًا صريحًا فقط عندما تريدون عقدًا عامًا ثابتًا.

MaybeRef للمدخلات المرنة

يعني MaybeRef<T> أن القيمة قد تكون T عادية أو Ref<T>. ويسمح ذلك للوحدات القابلة لإعادة الاستخدام بقبول أيٍّ من الصيغتين.

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

إزالة التغليف باستخدام unref

تعيد unref(x) القيمة x.value إذا كان x مرجعًا، وإلا فتعيد x نفسها. اقرنوها مع MaybeRef لتوحيد شكل المدخل.

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

toValue: المساعد الحديث

أضافت Vue 3.3 الدالة toValue، التي تزيل التغليف عن المراجع وتستدعي دوال getter. وهي الطريقة المفضّلة لتوحيد مدخلات MaybeRefOrGetter.

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

تحديد أنواع الكائنات التفاعلية

تستنتج reactive نوع الكائن مباشرةً — ولا حاجة إلى .value. ولتحديد النوع صراحةً، حدّدوا نوع المتغير باستخدام واجهة الكائن.

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

اختبار سريع

اختبروا معرفتكم بتحديد أنواع الوحدات القابلة لإعادة الاستخدام والمراجع.

مراجعة

لقد تعلّمتم تحديد أنواع Composition API:

يستنتج ref الأنواع؛ استخدموا ref<T>() عندما لا تكفي القيمة الأولية.
تحدّد Ref<T> وComputedRef<T> أنواع المراجع والقيم المحسوبة.
حدّدوا أنواع القيم المعادة من الوحدات القابلة لإعادة الاستخدام لوضع عقد واضح.
تقبل MaybeRef<T> + unref()/toValue() مدخلات مرنة.

الأسئلة الشائعة

هل درس «كتابة أنواع Composables وRefs» مجاني؟

نعم — نص درس «كتابة أنواع Composables وRefs» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «كتابة أنواع Composables وRefs»؟

‏Ref وComputedRef ، وقيمة الإرجاع المكتوبة الأنواع من Composables، وMaybeRef تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «كتابة أنواع Composables وRefs»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

إعداد TypeScript في مشاريع Vue
خصائص Props وEmits مكتوبة الأنواع باستخدام defineProps/defineEmits
كتابة أنواع Composables وRefs
مكوّنات Vue العامة

← العودة إلى Vue Academy