อาร์เรย์ของออบเจ็กต์ใน TypeScript

อาร์เรย์ใน TypeScript สามารถบรรจุได้ไม่เพียงแต่ข้อมูลพื้นฐาน (primitives) แต่ยังรวมถึงออบเจ็กต์ของประเภทที่กำหนดไว้ด้วย มาดูตัวอย่างวิธีการทำงานกับอาร์เรย์ดังกล่าว

อาร์เรย์ของผู้ใช้

สมมติว่าเรามีอินเทอร์เฟซที่กำหนดผู้ใช้:

interface User {
	name: string,
	age: number
}

ประกาศอาร์เรย์ โดยระบุประเภทของเนื้อหาเป็นออบเจ็กต์ของผู้ใช้ (นั่นคือออบเจ็กต์ที่ใช้อินเทอร์เฟซของเรา):

let arr: User[] = [];

เติมข้อมูลประเภทที่ระบุลงในอาร์เรย์ของเรา:

arr.push({name: 'john', age: 30});
arr.push({name: 'eric', age: 40});

อาร์เรย์ของวันที่

ประกาศอาร์เรย์ที่เก็บอาร์เรย์ของวันที่:

let arr: Date[] = [];

เติมวันที่ลงในอาร์เรย์นี้:

arr.push(new Date(2030, 11, 31));
arr.push(new Date(2020, 11, 31));

อาร์เรย์ขององค์ประกอบ DOM

ประกาศอาร์เรย์ที่มีองค์ประกอบ DOM อยู่ภายใน:

let arr: HTMLElement[] = [];

เติมข้อมูลลงในอาร์เรย์ของเรา:

let lst: NodeList = document.querySelectorAll('div');
let arr: HTMLElement[] = Array.from(lst);

โจทย์ฝึกปฏิบัติ

สร้างอาร์เรย์ที่มีสมาชิกเป็นนิพจน์ปกติ (Regular Expressions)

สร้างอาร์เรย์ที่มีสมาชิกเป็นพรอมิส (Promises)

สร้างอินเทอร์เฟซที่อธิบายพนักงาน สร้างอาร์เรย์ที่ประกอบด้วยออบเจ็กต์ของพนักงานเหล่านี้