Lesson 2: Advanced Vue3 with TypeScript

Question 1

interface User {
name: string;
age: number;
}

Answer 1

โค้ดนี้สร้าง interface ชื่อ User ที่กำหนดให้มี name เป็น string และ age เป็น number

Question 2

const user: User = { name: ‘Alice’, age: 30 };

Answer 2

โค้ดนี้สร้างตัวแปร user ที่เป็นประเภท User ซึ่งมีค่า name เป็น ‘Alice’ และ age เป็น 30

Question 3

const getUser = (id: number): Promise<User> => {
return fetch(`/api/users/${id}`).then(res => res.json());
};</User>

Answer 3

ฟังก์ชันนี้คืนค่า Promise ที่ประกอบด้วยข้อมูลผู้ใช้ที่เป็นประเภท User โดยรับ id เป็นพารามิเตอร์

Question 4

อะไรคือ computed properties ใน Vue3?

Answer 4

computed properties เป็นฟังก์ชันที่ใช้เพื่อคำนวณค่าแบบ reactive และจะถูกเรียกใช้งานใหม่เมื่อค่าที่ใช้คำนวณมีการเปลี่ยนแปลง

Question 5

import { ref, computed } from ‘vue’;

const price = ref(100);
const quantity = ref(2);
const total = computed(() => price.value * quantity.value);

Answer 5

โค้ดนี้ใช้ computed property ในการคำนวณค่า total ซึ่งเป็นผลคูณของ price และ quantity แบบ reactive

Question 6

อะไรคือความแตกต่างระหว่าง ref และ reactive ใน Vue3?

Answer 6

ref ใช้สำหรับค่าที่เป็นสเกลาร์ (เช่น string, number) และ reactive ใช้สำหรับออบเจกต์หรืออาร์เรย์เพื่อทำให้ทุกฟิลด์ของออบเจกต์นั้นเป็น reactive