ออบเจ็ค ในภาษา TypeScript

5 February 2022

ออบเจ็ค (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 นี่เป็นตัวอย่าง

computed_property.ts
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 เบื้องต้น

บทความนี้เป็นประโยชน์หรือไม่? Yes · No