Vue Academy · บทเรียน

การกำหนดชนิดให้คอมโพสิเบิลและรีฟ

Ref , ComputedRef , ค่าที่คืนจากคอมโพสิเบิลแบบมีชนิด และ MaybeRef

การกำหนดชนิดให้คอมโพสิเบิลและรีฟ เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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 ซึ่งแกะค่าจากรีฟและเรียกใช้ฟังก์ชันตัวอ่านค่าได้ด้วย วิธีนี้เป็นวิธีที่แนะนำสำหรับปรับอินพุต 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<T>() เมื่อค่าเริ่มต้นไม่เพียงพอ
Ref<T> และ ComputedRef<T> ใช้กำกับรีฟและค่าที่คำนวณแล้ว
กำหนดชนิดข้อมูลให้ค่าที่คอมโพสเซเบิลส่งคืนเพื่อสร้างสัญญาที่ชัดเจน
MaybeRef<T> + unref()/toValue() รองรับอินพุตที่ยืดหยุ่น

คำถามที่พบบ่อย

บทเรียน “การกำหนดชนิดให้คอมโพสิเบิลและรีฟ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การกำหนดชนิดให้คอมโพสิเบิลและรีฟ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดชนิดให้คอมโพสิเบิลและรีฟ”

Ref , ComputedRef , ค่าที่คืนจากคอมโพสิเบิลแบบมีชนิด และ MaybeRef คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การกำหนดชนิดให้คอมโพสิเบิลและรีฟ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การตั้งค่า TypeScript ในโปรเจกต์ Vue
Props และ Emits แบบมีชนิดด้วย defineProps/defineEmits
การกำหนดชนิดให้คอมโพสิเบิลและรีฟ
คอมโพเนนต์ Vue แบบ Generic

← กลับไปที่ Vue Academy