คลาสและออบเจ็ค ในภาษา TypeScript

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

• คลาสคืออะไร
• การสร้างคลาส
• การสร้างออบเจ็ค
• คอนสตรัคเตอร์

คลาสคืออะไร

คลาส (Classes) คือแม่แบบที่ใช้สำหรับสร้างออบเจ็ค คลาสประกอบไปด้วยการกำหนดแอททริบิวต์และเมธอดที่ออบเจ็คจะมี โดยมันสามารถนำไปสร้างออบเจ็คได้เป็นจำนวนมาก และนี่เองเป็นแนวคิดของการนำโค้ดกลับมาใช้ซ้ำ (Code-reuse) นอกจากนี้ คลาสสามารถนำไปสืบทอดเพื่อเพิ่มเติมความสามารถที่เรียกว่าการสืบทอดคลาส (Inheritance)

เมื่อคลาสถูกนำไปสร้างออบเจ็ค เราเรียกออบเจ็คที่สร้างมาจากคลาสว่าเป็น Instance หรือตัวแปรของคลาส ออบเจ็คจะมีข้อมูลแอททริบิวต์และเมธอดการทำงานตามที่กำหนดโดยคลาส และแต่ละออบเจ็คจะมีสถานะของข้อมูลและการทำงานเป็นของมันเอง นี่ทำให้คลาสหนึ่งสามารถนำไปสร้างหลายออบเจ็คได้

นอกจากนี้ คลาสยังมีคุณสมบัติอื่นๆ ที่ช่วยให้การเขียนโปรแกรมง่ายและสะดวกมากขึ้น เช่น การสืบทอดคลาส หรือการกำหนดแอททริบิวส์และเมธอดเป็นแบบ Static เป็นต้น นี่เป็นคุณสมบัติพื้นฐานของการเขียนโปรแกรมเชิงวัตถุ แต่เราจะไม่ได้ครอบคลุมถึงมันในบทเรียนนี้

การสร้างคลาส

คลาสสามารถสร้างได้อย่างง่ายดายด้วยการใช้งานคำสั่ง class นี่เป็นรูปแบบการสร้างคลาสในภาษา TypeScript

class NameOfClass {
    // member declarations
}

ในการสร้างคลาสเราจะใช้คำสั่ง class ตามด้วยชื่อของคลาส NameOfClass โดยการตั้งชื่อของคลาสจะเหมือนกับตัวแปรและเมธอด แต่ตัวอักษรตัวแรกของคลาสมักจะเริ่มต้นด้วยตัวพิมพ์ใหม่แทนเพื่อทำให้มันแยกแยะจากออบเจ็คอื่นๆ ได้ง่ายขึ้น

จากนั้นภายในบล็อคของคลาสระหว่าง {} จะเป็นการกำหนดสมาชิกของคลาสที่ประกอบไปด้วยแอททริบิวต์และเมธอดที่คลาสจะมี โดยคลาสสามารถมีสมาชิกเหล่านี้่เป็นจำนวนเท่าไรก็ได้ ต่อไปมาเริ่มสร้างคลาสแรกของเราในภาษา TypeScript นี่เป็นคลาสของรูปสี่เหลี่ยม

class Rectangle {
    width: number;
    height: number;

    area(): number {
        return this.width * this.height;
    }
}

let rect: Rectangle = new Rectangle();
rect.width = 3;
rect.height = 4;

console.log(`Area of rect: ${rect.area()}`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Area of rect: 12

ในตัวอย่างนี้ เราได้สร้างคลาส Rectangle ซึ่งเป็นคลาสของรูปสี่เหลี่ยมผืนผ้า คลาสนี้ประกอบไปด้วยสมาชิกที่เป็นแอททริบิวต์สองตัวคือ width และ height สำหรับเก็บความยาวและความสูงของรูปสี่เหลี่ยม และหนึ่งสมาชิกที่เป็นเมธอด area ที่ใช้สำหรับคำนวณหาพื้นที่ของรูปสี่เหลี่ยมจากความยาวและความสูงของสี่เหลี่ยม

let rect: Rectangle = new Rectangle();

หลังจากที่คลาสถูกสร้างแล้วเราสามารถนำมันไปสร้างออบเจ็ค เพื่อสร้างออบเจ็คจากคลาส Rectangle เราเรียกใช้งานคลาสโดยใส่คำสั่ง new ที่หน้าชื่อของคลาส นี่จะสร้างออบเจ็คหรือเรียกว่า Instance ของคลาส ในตอนนี้จะเห็นว่าประเภทข้่อมูลของตัวแปรจะเป็นชื่อของคลาส Rectangle

rect.width = 3;
rect.height = 4;

แอททริบิวต์ของออบเจ็คสามารถเข้าถึงได้ผ่านตัวแปรออบเจ็คตามด้วยเครื่องหมายจุด (.) และตามด้วยชื่อของแอททริบิวต์ ในตัวอย่างนี้ เป็นการกำหนดค่าให้กับแอททริบิวต์บนออบเจ็ค rect ซึ่งเป็นความยาวและความสูงตามลำดับ

console.log(`Area of rect: ${rect.area()}`);

จากนั้นเป็นการเรียกใช้งานเมธอด area สำหรับหาพื้นที่ของออบเจ็ค rect โดยเมธอดนี้จะส่งค่ากลับเป็นพื้นที่ที่คำนวณมาจากความยาวคูณกับความสูงที่เราได้กำหนดค่าไปก่อนหน้านี้

การสร้างออบเจ็ค

เมื่อคลาสถูกประกาศแล้วมันสามารถนำไปสร้างออบเจ็คได้ และอย่างที่กล่าวไปในตอนต้น หนึ่งคลาสสามารถนำไปสร้างออบเจ็คเป็นจำนวนมากได้ มาดูการใช้งานในตัวอย่างนี้ ที่เป็นการสร้างคลาสเพื่อไปสร้างหลายออบเจ็คของบุคคล

class Person {
    firstName: string;
    lastName: string;
    occupation: string;

    getName(): string {
        return this.firstName + " " + this.lastName;
    }

    getInfo(): string {
        return `${this.getName()} is a ${this.occupation}.`;
    }
}

let p1: Person = new Person();
p1.firstName = "Mateo";
p1.lastName = "Cristo";
p1.occupation = "Music producer";

let p2: Person = new Person();
p2.firstName = "Robert";
p2.lastName = "Williams";
p2.occupation = "Teacher";

console.log(p1.getInfo());
console.log(p2.getInfo());

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Mateo Cristo is a Music producer.
Robert Williams is a Teacher.

ในตัวอย่างนี้ เราสร้างคลาส Person ซึ่งเป็นคลาสของบุคคลที่ประกอบไปด้วยสามแอททริบิวต์สำหรับเก็บชื่อ นามสกุล และอาชีพของบุคคล นอกจากนี้คลาสยังประกอบไปด้วยสองเมธอด สำหรับรับเอาชื่อแบบเต็มและกล่าวคำแนะนำเกี่ยวกับข้อมูลของบุคคลออกทางหน้าจอ

let p1: Person = new Person();
p1.firstName = "Mateo";
p1.lastName = "Cristo";
p1.occupation = "Music producer";

let p2: Person = new Person();
p2.firstName = "Robert";
p2.lastName = "Williams";
p2.occupation = "Teacher"

สิ่งที่เราต้องการแสดงให้คุณเห็นในตัวอย่างนี้คือในตอนที่มันถูกนำไปสร้างเป็นออบเจ็็ค ในตัวอย่างเราได้สร้างสองออบเจ็คของบุคคลจากคลาส Person แต่ละออบเจ็คเป็นการแสดงถึงคนสองคนที่มีชื่อและอาชีพที่แตกต่างกัน เราได้กำหนดค่าให้กับทั้งสามแอททริบิวต์สำหรับแต่ละออบเจ็ค

console.log(p1.getInfo());
console.log(p2.getInfo());

จากนั้นเรียกใช้เมธอด getInfo บนออบเจ็คทั้งสอง นี่จะส่งค่ากลับเป็นคำกล่าวแนะนำของแต่ละบุคคลตามข้อมูลที่ถูกกำหนดให้กับแต่ละออบเจ็ค จะเห็นว่าแต่ละออบเจ็คนั้นมีสถานะของข้อมูลเป็นของมันเองและมีการทำงานเป็นอิสระจากกัน

getName(): string {
    return this.firstName + " " + this.lastName;
}

getInfo(): string {
    return `${this.getName()} is a ${this.occupation}.`;
}

ในเมธอด getName และ getInfo สังเกตว่าการเข้าถึงแอททริบิวต์และเมธอดภายในคลาสจะถูกนำหน้าด้วยคำสั่ง this เสมอ นี่เป็นข้อบังคับโดยไวยากรณ์ของภาษาที่จะต้องทำสำหรับการอ้างถึงสมาชิกภายในคลาสเดียวกัน โดยคำสั่ง this หมายถึงออบเจ็คปัจจุบันที่บริบทของโปรแกรมกำลังทำงานอยู่

คอนสตรัคเตอร์

คอนสตรัคเตอร์ (Constructor) เป็นเมธอดพิเศษที่จะถูกเรียกใช้งานตอนที่ออบเจ็คถูกสร้าง คอนสตรัคเตอร์จะไม่มีการส่งค่ากลับ มันมักจะถูกใช้สำหรับกำหนดค่าเริ่มต้นให้กับออบเจ็ค คอนสตรัคเตอร์จะต้องมีชื่อเป็น constructor เสมอ และเนื่องจากมันเป็นเมธอดทำให้สามารถมีพารามิเตอร์ได้

จากตัวอย่างแรกสำหรับคลาส Rectangle นั้น เรามาสร้างคลาสนี้อีกครั้ง แต่ในครั้งนี้เราจะกำหนดคอนสตรัคเตอร์ให้กับคลาสด้วยเพื่อให้กำหนดค่าเริ่มต้นให้กับออบเจ็ค นี่เป็นตัวยอย่างของโปรแกรม

class Rectangle {
    width: number;
    height: number;

    constructor(width: number, height: number) {
        console.log("constructor has been called.");
        this.width = width;
        this.height = height;
    }

    area(): number {
        return this.width * this.height;
    }
}

let rect1: Rectangle = new Rectangle(3, 4);
let rect2: Rectangle = new Rectangle(6, 5);

console.log(`Area of rect1: ${rect1.area()}`);
console.log(`Area of rect2: ${rect2.area()}`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Area of rect1: 12
Area of rect2: 30

ในตัวอย่างนี้ มันเป็นคลาสเดียวกันในตัวอย่างแรกนั้นคือคลาส Rectangle แต่ในครั้งนี้เราประกาศมันพร้อมกับคอนสตรัคเตอร์ด้วยเพื่อใช้ในการกำหนดค่าเริ่มต้นในตอนที่ออบเจ็คถูกสร้าง

constructor(width: number, height: number) {
    console.log("constructor has been called.");
    this.width = width;
    this.height = height;
}

นี่เป็นคอนสตรัคเตอร์ของคลาสที่จะต้องมีชื่อเป็น constructor และมันจะถูกเรียกใช้งานในตอนที่ออบเจ็คถูกสร้างด้วยคำสั่ง new คอนสตรัคเตอร์นี้มีสองพารามิเตอร์ที่เป็นความยาวและความสูงของรูปสี่เหลี่ยม และเราได้คัดลอกค่าของมันให้กับแอททริบิวต์ width และ height ของออบเจ็ค

let rect1: Rectangle = new Rectangle(3, 4);
let rect2: Rectangle = new Rectangle(6, 5);

นี่จะส่งผลกับการใช้งานในตอนสร้างออบเจ็ค เนื่องจากคลาสนี้ประกอบไปด้วยคอนสตรัคเตอร์ที่มีสองพารามิเตอร์ ดังนั้นค่าที่ถูกส่งในตอนสร้างออบเจ็คจะได้รับโดยคอนสตรัคเตอร์ และจะถูกใช้สำหรับกำหนดค่าเริ่มต้นให้กับออบเจ็ค

จะเห็นว่าการใช้งานคอนสตรัคเตอร์ทำให้เราสามารถกำหนดค่าเริ่มต้นให้กับออบเจ็คได้ทันทีในตอนที่มันถูกสร้าง โดยที่ไม่ต้องทำมันในภายหลังผ่านทางตัวแปรของออบเจ็คเหมือนกับตัวอย่างที่ผ่านมา

ในบทนี้ คุณได้เรียนรู้เกี่ยวคลาสในภาษา TypeScript เราได้พูดถึงวิธีการสร้างคลาสและการนำไปสร้างเป็นออบเจ็ค นี่เป็นแนวคิดพื้นฐานที่สุดของการเขียนโปรแกรมเชิงวัตถุ นอกจากนี้ เราได้พูดถึงคอนสตรัคเตอร์ซึ่งเป็นเมธอดพิเศษที่จะถูกเรียกใช้งานในตอนที่ออบเจ็คถูกสร้าง