Lesson 1: Introduction to Vue3 and TypeScript Flashcards
const message: string = "Hello Vue3!"; console.log(message);
โค้ดนี้ประกาศตัวแปร message ที่มีประเภทข้อมูลเป็น string และแสดงข้อความ “Hello Vue3!” บนคอนโซล
const num: number = 10; const result: string = num.toFixed(2);
โค้ดนี้จะเกิดข้อผิดพลาดเนื่องจาก result ถูกกำหนดให้เป็น string แต่ num.toFixed(2) คืนค่าประเภท string ซึ่งไม่ตรงกับการกำหนด
Vue CLI คืออะไร?
Vue CLI เป็นเครื่องมือที่ใช้ในการสร้างและตั้งค่าโปรเจค Vue อย่างรวดเร็ว รวมถึงรองรับ TypeScript และการตั้งค่าที่ซับซ้อนต่างๆ
อะไรคือ Composition API ใน Vue3?
Composition API เป็นวิธีการใหม่ในการจัดการกับโค้ดที่ใช้ร่วมกันใน Vue3 ช่วยให้โค้ดมีความยืดหยุ่นและเรียบง่ายขึ้นเมื่อเทียบกับ Options API
import { ref } from ‘vue’;
export default {
setup() {
const count = ref<number>(0);
return { count };
}
};</number>
โค้ดนี้ใช้ Composition API โดยสร้างตัวแปร count ด้วย ref ที่มีประเภทเป็น number และคืนค่า count เพื่อใช้ในเทมเพลต
let isDone: boolean = false;
โค้ดนี้ประกาศตัวแปร isDone ที่มีประเภทข้อมูลเป็น boolean และกำหนดค่าเริ่มต้นเป็น false
const user: { name: string, age: number } = { name: ‘John’, age: 30 };
โค้ดนี้ประกาศตัวแปร user ซึ่งเป็นออบเจกต์ที่มีชื่อ (name) เป็น string และอายุ (age) เป็น number
อะไรคือ Ref ใน Vue3?
Ref ใน Vue3 ใช้เพื่อสร้างตัวแปรที่มีการติดตามการเปลี่ยนแปลงค่า ทำให้การเปลี่ยนแปลงค่านั้นมีผลกับ DOM โดยตรง
const greet = (name: string): string => {
return Hello, ${name}!
;
};
ฟังก์ชัน greet รับพารามิเตอร์ name ที่เป็น string และคืนค่าข้อความทักทายพร้อมกับชื่อที่ได้รับ
อะไรคือ setup ใน Vue3?
setup เป็นฟังก์ชันพิเศษที่ใช้ใน Composition API สำหรับการกำหนดค่าต่างๆ ของคอมโพเนนต์ก่อนการเรนเดอร์
import { ref } from ‘vue’;
export default {
setup() {
const message = ref<string>('Hello Vue3!');
return { message };
}
};</string>
โค้ดนี้ใช้ Composition API เพื่อสร้างตัวแปร message ที่ใช้ ref และมีประเภทเป็น string โดยมีค่าเริ่มต้นเป็น ‘Hello Vue3!’
type User = {
name: string;
age: number;
};
โค้ดนี้สร้าง type ชื่อ User ซึ่งเป็นออบเจกต์ที่มี name เป็น string และ age เป็น number
การใช้ ref กับ number ใน Vue3 TypeScript ทำอย่างไร?
คุณสามารถใช้ ref<number> เพื่อสร้างตัวแปรที่มีการติดตามค่าแบบ number ใน Composition API</number>
Vue3 รองรับการใช้ TypeScript ได้อย่างไร?
Vue3 รองรับ TypeScript โดยมีการบูรณาการ API ที่ใช้ TypeScript ได้อย่างสมบูรณ์ เช่น การใช้ ref, computed, และ watch กับ TypeScript
อะไรคือ ref ใน Vue3 และทำงานอย่างไร?
ref เป็นวิธีการประกาศตัวแปรใน Composition API เพื่อให้ Vue สามารถติดตามการเปลี่ยนแปลงของตัวแปรนั้น และทำการอัปเดต DOM เมื่อค่ามีการเปลี่ยนแปลง