ออบเจ็ค ในภาษา TypeScript
ออบเจ็ค (Object literal) คือออบเจ็คที่เก็บข้อมูลในรูปแบบของ Key/Value หรือที่เรียกว่า Plain object ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับการใช้งานออบเจ็คประเภทนี้ในภาษา TypeScript และการใช้คำสั่ง type
เพื่อกำหนดประเภทข้อมูลให้กับออบเจ็ค นี่เป็นเนื้อหาในบทนี้
- การประกาศออบเจ็ค
- การเข้าถึงและอ่านค่าในเจ็ค
- การกำหนด Key แบบไดนามิกส์
- การสร้างประเภทข้อมูลของออบเจ็ค
- เมธอดจากคลาส Object
การประกาศออบเจ็ค
ออบเจ็ค เป็นประเภทข้อมูลแบบโครงสร้างที่เก็บข้อมูลในรูปแบบของ Key/Value โดยที่ Key ของออบเจ็คจะเป็น String ส่วน Value สามารถเป็นข้อมูลประเภทใดๆ ก็ได้ในภาษา TypeScript นี่เป็นรูปแบบของการประกาศออบเจ็คในภาษา TypeScript
let objectName: objectType = {
key1: value1,
key2: value2,
...
};
ในรูปแบบการประกาศ objectName
เป็นชื่อตัวแปรของออบเจ็ค ตามด้วย objectType
ที่เป็นชื่อประเภทข้อมูลของออบเจ็คที่เรากำหนดขึ้น และภายในวงเล็บปีกกา {}
เป็นการระบุค่าของออบเจ็คซึ่งจะประกอบไปด้วยคู่ของ Key และ Value โดยค่าของออบเจ็คนี้สามารถมีจำนวนเท่าไรก็ได้ และแต่ละค่าจะถูกคั่นด้วยเครื่องหมายคอมมา (,
)
ต่อไปเรามาลองใช้งานออบเจ็คในการเก็บข้อมูลกัน นี่เป็นตัวอย่างการประกาศออบเจ็คเพื่อเก็บข้อมูลของผู้ใช้ (User) ที่ประกอบไปด้วยรหัส ชื่อ และวันเกิด ในภาษา TypeScript
let user: object = {
id: 1,
name: "Marcus",
dateOfBirth: new Date("1988-03-12")
};
console.log(user);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
{ id: 1, name: 'Marcus', dateOfBirth: 1988-03-12T00:00:00.000Z }
ในตัวอย่างนี้ เราได้ประกาศออบเจ็ค user
ที่ประกอบไปด้วยข้อมูลสามค่า ได้แก่ id
ที่เป็นรหัสประจำตัว name
ที่เป็นชื่อ และ dateOfBirth
เป็นออบเจ็คของวันที่ที่เก็บวันเกิด การกำหนด Key ให้กับออบเจ็คจะเหมือนการประกาศชื่อของตัวแปร โดยหากมีหลายคำจะทำในรูปแบบ camelCase
object
เป็นประเภทข้อมูลสำหรับออบเจ็ค Literal นี่สามารใช้สำหรับเก็บออบเจ็คที่มีโครงสร้างเป็นแบบไหนก็ได้ อย่างไรก็ตาม เราสามารถใช้ประเภทข้อมูลที่กำหนดเองได้ เช่น ประเภทข้อมูลที่สร้างจากคำสั่ง type
หรือ interface
เพื่อควบคุมโครงสร้างที่ออบเจ็คสามารถมีได้
และอย่างที่เราได้บอกไปก่อนหน้าว่า Key ของออบเจ็คในภาษา TypeScript นั้นจะเป็น String เสมอ ดังนั้นการกำหนด Key ให้กับออบเจ็คเราสามารถทำมันโดยใช้ String literal ได้ ยกตัวอย่างเช่น
let user: object = {
"id": 1,
"name": "Marcus",
"dateOfBirth": new Date("1988-03-12")
};
นี่ให้ผลลัพธ์การทำงานที่เหมือนกัน แต่โดยทั่วไปแล้วเรามักใช้การกำหนด Key ในรูปแบบแรกเนื่องจากมันสะดวกและรวดเร็วกว่าการใช้ String literal ที่จะต้องมีเครื่องหมาย Double quote ด้วยเสมอ อย่างไรก็ตาม วิธีนี้จะถูกใช้หาก Key ประกอบไปด้วยค่าอื่นที่ไม่อนุญาติสำหรับการประกาศตัวแปร ยกตัวอย่างเช่น
let scores: object = {
"John Smith": 80,
"Thomas Baker": 65,
"Jennifer Harris": 26
};
นี่เป็นผลลัพธ์ของโปรแกรม
{ 'John Smith': 80, 'Thomas Baker': 65, 'Jennifer Harris': 26 }
ในตัวอย่างนี้ เนื่องจากออบเจ็ค scores
ใช้สำหรับเก็บคะแนนโดยใช้ชื่อเป็น Key ดังนั้นมันจึงหลีกเลี่ยงไม่ได้ที่เราจะต้องกำหนด Key ด้วย String literal นี่สามารถพบได้ทั่วไปในการเขียนโปรแกรม การใช้ String literal ทำเราสามารถใช้ตัวอักษรใดๆ ที่สามารถกำหนดเป็นค่าของ String ได้
การเข้าถึงและอ่านค่าในเจ็ค
ในตัวอย่างที่ผ่านมาเป็นเพียงการประกาศออบเจ็คเท่านั้น และมันยังไม่ได้ถูกนำไปใช้งานอย่างอื่นนอกจากแสดงออกผลทางหน้าจอ ในตัวอย่างต่อไป เรามาทำการดำเนินการพื้นฐานเกี่ยวกับออบเจ็ค นั่นคือการกำหนดค่าและอ่านค่าในออบเจ็คผ่านทาง Key ของมัน
let song: object = {
name: "Brooklyn Boy",
artist: "Jeremy Zucker",
year: 2021
};
console.log(`Song: ${song.name}`);
console.log(`Artist: ${song.artist}`);
console.log(`Year: ${song.year}`);
song.year = 2025;
console.log(`Changed year: ${song.year}`);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Song: Brooklyn Boy
Artist: Jeremy Zucker
Year: 2021
Changed year: 2025
ในตัวอย่างนี้ เราได้ประกาศออบเจ็ค song
ที่เก็บข้อมูลเกี่ยวกับเพลงที่มีชื่อของเพลง ชื่อของศิลปิน และปีที่เผยแพร่ เราได้เข้าถึงค่าของออบเจ็คผ่าน Key ของมันเพื่อนำมาแสดงผลและเปลี่ยนแปลงค่าภายในออบเจ็ค คุณสามารถจินตนาการได้ว่า song.year
เป็นเหมือนตัวแปร แต่มันอยู่ภายในออบเจ็คที่ต้องใช้งานในรูปแบบ object.key
เท่านั้นเอง
ในตอนนี้คุณเห็นแล้วว่าการใช้ออบเจ็คทำให้เราเก็บข้อมูลหลายค่าไว้ในตัวแปรเดียวได้ นี่ทำให้การส่งข้อมูลไปยังฟังก์ชันจะใช้เพียงพารามิเตอร์เดียว จากตัวอย่างที่ผ่านมาหากไม่ใช้ออบเจ็คเราจะต้องเก็บแต่ละค่าแยกกันในแต่ละตัวแปร ยกตัวอย่างเช่น
let songName: string = "Brooklyn Boy";
let songArtist: string = "Jeremy Zucker";
let releaseYear: number = 2021;
ดังนั้นจะเห็นว่าการเลือกเก็บข้อมูลเป็นออบเจ็คจะเป็นระเบียบและสะดวกกว่าในการเขียนโปรแกรม
การกำหนด Key แบบไดนามิกส์
ในการอ้างถึง Key ของออบเจ็คสามารถทำได้แบบไดนามิกส์ที่เรียกว่า Computed property นี่เป็นประโยชน์เมื่อ Key เป็นค่าที่ได้จากการคำนวณในขณะที่โปรแกรมทำงาน การกำหนด Key ทำได้ในรูปแบบ [keyName]
โดยที่ keyName
เป็นค่าจาก String literal หรือตัวแปรของ String นี่เป็นตัวอย่าง
const key1 = "name";
const key2 = "department";
let employee: object = {
[key1]: "Ethan",
[key2]: "Engineering"
};
console.log("Using static keys");
console.log(`Name: ${employee.name}`);
console.log(`Department: ${employee.department}`);
console.log("\nUsing dynamic keys");
console.log(`Name: ${employee[key1]}`);
console.log(`Department: ${employee[key2]}`);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Using static keys
Name: Ethan
Department: Engineering
Using dynamic keys
Name: Ethan
Department: Engineering
ในตัวอย่างนี้ เราได้สร้างออบเจ็คของพนักงาน employee
ที่ประกอบไปด้วยสอง Property สำหรับเก็บชื่อและแผนกของพนักงานในบริษัทแห่งหนึ่ง โดยการกำหนดคีย์ให้กับออบเจ็คนั้นทำในรูปแบบของ Computed property ที่ใช้ค่าจากตัวแปร key1
และ key2
สำหรับเป็นคีย์ของชื่อและแผนกตามลำดับ
console.log("Using static keys");
console.log(`Name: ${employee.name}`);
console.log(`Department: ${employee.department}`);
นี่เป็นการใช้งานคีย์เพื่อเข้าถึงค่าในออบเจ็คในรูปแบบปกติ (object.key
) แม้ว่าทั้งสอง Property จะถูกกำหนดด้วยวิธี Computed property แต่มันก็สามารถเข้าถึงในรูปแบบปกติได้
console.log("\nUsing dynamic keys");
console.log(`Name: ${employee[key1]}`);
console.log(`Department: ${employee[key2]}`);
นอกจากนี้เราสามารถเข้าถึงค่าใน Property ของออบเจ็คในรูปแบบของไดนามิกส์คีย์ได้โดยการใช้ค่าของคีย์จากในตัวแปร key1
และ key2
ซึ่งได้ผลลัพธ์เช่นเดียวกัน การเข้าถึงค่าแบบไดนามิกส์จะทำในรูปแบบ object[key]
ซึ่งสามารถใช้เพื่อเปลี่ยนแปลงค่าหรืออ่านค่าได้
การสร้างประเภทข้อมูลของออบเจ็ค
ออบเจ็ค Literal มีประเภทข้อมูลเป็น object
ที่เก็บออบเจ็คที่มีโครงสร้างเป็นแบบไหนก็ได้ อย่างไรก็ตาม เราสามารถใช้คำสั่ง type
เพื่อกำหนดโครงสร้างให้กับออบเจ็คได้ นี่จะทำให้เราสามารถกำหนด Property ที่ออบเจ็คสามารถมี และประเภทข้อมูลที่แต่ละ Property สามารถมีได้
ในตอนนี้ลองมาสร้างประเภทข้อมูลให้กับออบเจ็ค user
ที่ได้แสดงไปในตัวอย่างแรกของบทให้มีโครงสร้างที่แคบลงแทนที่จะเป็น object
นี่เป็นตัวอย่างของโปรแกรม
type userType = {
id: number,
name: string,
dateOfBirth: Date
};
let user: userType = {
id: 1,
name: "Marcus",
dateOfBirth: new Date("1988-03-12")
};
ในตัวอย่างนี้ เราได้ใช้คำสั่ง type
เพื่อสร้างประเภทข้อมูลให้กับออบเจ็คโดย userType
เป็นชื่อที่ถูกกำหนดขึ้นสำหรับใช้อ้างถึงประเภทข้อมูลดังกล่าว โดยประเภทข้อมูลนี้หมายความว่าออบเจ็คที่นำมันไปใช้งานจะมีสาม Property และต้องมีประเภทข้อมูลตามที่ระบุไว้
ตอนนี้เรามาลองเปลี่ยนค่า id
ของออบเจ็ค user
ให้เป็นข้อมูลประเภทอื่นที่ไม่ใช่ตัวเลข และมาดูว่านี่จะเกิดอะไรขึ้นเมื่อเราคอมไพล์และรันโปรแกรม
let user: userType = {
id: "123",
name: "Marcus",
dateOfBirth: new Date("1988-03-12")
};
นี่เป็นข้อผิดพลาดที่จะได้รับเมื่อรันโปรแกรม
type.ts:8:5 - error TS2322: Type 'string' is not assignable to type 'number'.
ข้อผิดพลาดนี้หมายความว่า "123"
ที่มีประเภทข้อมูลเป็น String ไม่สามารถกำหนดให้กับ id
ที่มีประเภทข้อมูลเป็นตัวเลขได้ และคล้ายกันนี้ Property บนออบเจ็คจะต้องมีเท่ากับที่กำหนดไว้เท่านั้น ไม่สามารถมีขาดหรือเกินได้ และนี่เป็นวิธีที่เราควบคุมโครงสร้างให้กับออบเจ็คในภาษา TypeScript
คล้ายกันนี้ คุณสามารถใช้คำสั่ง interface
สำหรับประเภทข้อมูลให้กับออบเจ็ค Literal ได้ซึ่งมีคุณสมบัติบางอย่างเพิ่มเติมเข้ามาจากคำสั่ง type
คุณจะได้เรียนรู้เกี่ยวกับมันในบทของ Interface ในภาษา TypeScript
เมธอดจากคลาส Object
คลาส Object มีเมธอดที่เราสามารถใช้สำหรับจัดการกับออบเจ็ค Literal ได้ แม้ว่ามันจะมีเมธอดเป็นจำนวนมาก แต่เราจะแนะนำเมธอดพื้นฐานที่ใช้งานบ่อยในภาษา TypeScript มาดูตัวอย่างการใช้งานเมธอดสำหรับวนอ่านค่าในออบเจ็ค
let country: object = {
name: "Thailand",
code: "TH",
population: 69950850
};
console.log(Object.keys(country));
console.log(Object.values(country));
console.log(Object.entries(country));
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
[ 'name', 'code', 'population' ]
[ 'Thailand', 'TH', 69950850 ]
[
[ 'name', 'Thailand' ],
[ 'code', 'TH' ],
[ 'population', 69950850 ]
]
ในตัวอย่างนี้ เป็นการใช้งานสามเมธอดสำหรับอ่านข้อมูลในออบเจ็ค เมธอด Object.keys
ส่งค่ากลับเป็นอาเรย์ของ Key ของออบเจ็ค เมธอด Object.values
ส่งค่ากลับเป็นอาเรย์ของค่าในออบเจ็ค และสุดท้ายเมธอด Object.entries
ส่งค่ากลับเป็นคู่ของ Key/Value ในรูปแบบของอาเรย์ ซึ่งอาเรย์ที่ส่งค่ากลับโดยเมธอดเหล่านี้เป็น Enumerable object ที่สามารถวนรอบได้ด้วยคำสั่งวนซ้ำ
อีกเมธอดหนึ่งที่เรามักจะใช้งานก็คือเมธอด Object.assign
มันใช้สำหรับคัดลอก Property และค่าจากอีกออบเจ็คหนึ่งไปยังออบเจ็คหนึ่ง ในการใช้งานเมธอดนี้ออบเจ็คปลายทางจะต้องมีประเภทข้อมูลเป็น object เท่านั้น นี่เป็นตัวอย่างการใช้งาน
let source: object = {
a: 1,
b: 2
};
let target: object = {
c: 3,
d: 4
};
let result: object = Object.assign(target, source);
console.log("source", source);
console.log("target", target);
console.log("result", result);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
source { a: 1, b: 2 }
target { c: 3, d: 4, a: 1, b: 2 }
result { c: 3, d: 4, a: 1, b: 2 }
นี่เป็นการใช้เมธอด Object.assign
เพื่อคัดลอกข้อมูลจากออบเจ็ค source
ไปยังออบเจ็ค target
เมธอดจะเปลี่ยนแปลงค่าในออบเจ็คปลายทางโดยตรงและมันส่งค่ากลับเป็นออบเจ็คใหม่ result
ที่มีผลลัพธ์เหมือนกับออบเจ็คปลายทาง นั่นหมายความว่าเราสามารถใช้มันสำหรับคัดลอก (Clone) ออบเจ็คได้ซึ่งออบเจ็คที่ถูกคัดลอกก็คือ result
นั่นเอง
ในบทนี้ คุณได้เรียนรู้การประกาศและใช้งานออบเจ็ค Literal ในภาษา TypeScript ที่เก็บข้อมูลในรูปแบบ Key/Value นอกจากนี้ เราได้พูดถึงการสร้างประเภทข้อมูลด้วยคำสั่ง type
เพื่อกำหนดโครงสร้างของออบเจ็คให้เฉพาะเจาะจงมากขึ้น และเราได้แนะนำการใช้งานเมธอดจากคลาส Object เบื้องต้น