Class (1)
คอนเซปท์ของ Class นั้นเป็นเหมือนกับตัวต้นแบบในการสร้าง Object ขึ้นมา เราสามารถนำ Class ไปใช้ประโยชน์ได้หลายทาง เช่นการแบ่งแยกประเภทข้อมูล หรือกำหนดลักษณะและความสามารถของ Object ที่จะสร้างขึ้นมาได้ ตัวอย่างยอดนิยมของ Class เช่น Car ที่สร้าง Object ต่างๆ ที่มีลักษณะไม่เหมือนกัน เช่นยี่ห้อรถ สี ความเร็ว นำ้หนัก เป็นต้น
JavaScript นั้นมีการใช้คีย์เวิร์ด Class มาตั้งแต่ ES2015 (หรือ ES6) และ TypeScript ก็เพิ่มความสามารถต่างๆ ให้กับตัว Class เพื่อรองรับการใช้ Type และ Interface ด้วย

การสร้าง Class

Syntax การสร้าง Class จะคล้ายกับการประกาศ Interface ดังนี้
1
class Car {
2
year: number
3
color: "green" | "red" | "blue"
4
}
5
6
const c = new Car() // สร้างด้วยคีย์เวิร์ด new
7
c.year = 2560 // อ่านหรือเขียน year ได้ ตาม type ที่กำหนด
8
c.color = "red"
Copied!
ถ้าต้องการให้ Field มีค่าเริ่มต้น ให้ Assign ค่าได้เลยด้านหลัง Field นั้น
1
class Car {
2
year: number = 2540 // ให้ค่าเริ่มต้นของ year เป็น 2540
3
color: "green" | "red" | "blue"
4
}
5
6
const c = new Car()
7
console.log(c.year) // 2540
Copied!
หรือถ้าอยากกำหนดค่าเองตั้งแต่ตอน Initialize (new) ให้สร้าง constructor ด้านใน Class
1
class Car {
2
year: number
3
color: "green" | "red" | "blue"
4
5
constructor(year = 2540, color = "green") { // ตั้งค่าเริ่มต้นของ year และ color
6
this.year = year // ใช้ this เพื่อเซ็ตค่าใน Object
7
this.color = color
8
}
9
}
10
11
const c = new Car()
12
console.log(c.year) // 2540
13
console.log(c.color) // green
14
15
const d = new Car(2549, "blue")
16
console.log(d.year) // 2549
17
console.log(d.color) // blue
Copied!

Method

อันที่จริงแล้ว constructor ก็เป็น Method หนึ่ง เพียงแต่ว่ามันจะถูกเรียกเมื่อเราสร้าง Object ใหม่เท่านั้น การสร้าง Method จึงมีลักษณะเหมือนกับการสร้าง Constructor เลย แล้วเรียกใช้หลังจากที่สร้าง Object แล้ว
1
class Car {
2
color: string
3
4
constructor(color = "ดำ") {
5
this.color = color
6
}
7
8
// ประกาศ Method printColor เพื่อ log ค่าสีออกมาใน console
9
printColor() {
10
console.log(`รถคันนี้สี${this.color}`) // ใช้ this เพื่อดึงค่าใน Object ออกมา
11
}
12
13
// ประกาศ Method isColor เพื่อเช็คว่าสีรถตรงกับ input หรือไม่ โดยจะ Return boolean
14
isColor(colorInput: string): boolean {
15
return this.color == colorInput
16
}
17
18
// ประกาศ Method changeColor ไว้เปลี่ยนสีรถ
19
changeColor(newColor: string) {
20
this.color = newColor
21
}
22
}
23
24
const car = new Car("ชมพู")
25
26
car.printColor() // รถคันนี้สีชมพู
27
28
console.log(car.isColor("ดำ")) // false
29
console.log(car.isColor("ชมพู")) // true
30
31
car.changeColor("แดง")
32
car.printColor() // รถคันนี้สีแดง
Copied!

Readonly

เราสามารถใช้คีย์เวิร์ด readonly เพื่อทำให้ค่าตัวแปรใน Object ไม่สามารถแก้ไขได้หลังจากที่รัน constructor เสร็จแล้ว
1
class Car {
2
readonly color: string // ให้ color เป็น readonly
3
4
constructor(color = "ขาว") {
5
this.color = color
6
}
7
8
// ❌ Method changeColor ไม่สามารถใช้ได้เพราะ color เป็น readonly ไปแล้ว
9
changeColor(newColor: string) {
10
this.color = newColor
11
}
12
}
13
14
const car = new Car("ชมพู") // ✅
15
car.color = "แดง" // ❌ แก้ไข color ด้วยการ assign ไม่ได้
Copied!

สร้าง Class ที่ Implement ตัว Interface

การใช้ Interface จะทำให้เราสร้าง Class ตามรูปแบบที่กำหนดใน Interface ได้ เพื่อการันตีว่าอย่างน้อย Class ของเรามีทั้ง Field และ Method ครบตาม Interface นั้นๆ โดยใช้คีย์เวิร์ด implements
1
interface WithColor {
2
color: string
3
changeColor: (newColor: string) => void
4
}
5
6
class Car implements WithColor { // กำหนดให้ Car ต้อง implement ตาม WithColor
7
year: number
8
}
9
// ❌ Error : ขาด Field color และ Method changeColor()
10
11
12
class DoYouLikeMyCar implements WithColor {
13
year: number = 2563
14
color: string = "ดำ"
15
16
changeColor(newColor: string) {
17
this.color = newColor
18
}
19
}
20
// ✅
Copied!
การใช้ implements จะเหมาะกับกรณีเช่น เราขึ้นโครงด้วยการออกแบบ Interface ไว้ก่อน แล้วค่อยทำการเขียนโค้ดการใช้งานตามทีหลัง

สร้าง Class ที่ Extend อีก Class หนึ่ง

เมื่อเราได้สร้าง Class ขึ้นมาแล้ว อาจพบว่ามีการใช้โค้ดซำ้กันบ้าง
1
class Car {
2
color: string = "ดำ"
3
year: number = 2563
4
5
changeColor(newColor: string) {
6
this.color = newColor
7
}
8
9
printYear() {
10
console.log(this.year)
11
}
12
}
13
14
class Shirt {
15
color: string = "ดำ"
16
size: "S" | "M" | "L" = "M"
17
18
changeColor(newColor: string) {
19
this.color = newColor
20
}
21
}
Copied!
จะเห็นได้ว่าทั้งสอง Class นั้นมี Field color และ Method changeColor เหมือนกัน เราสามารถดึงโค้ดส่วนที่ซำ้ออกมาเป็น Class ใหม่ได้ แล้วใช้ extends เพื่อนำทั้ง Field และ Method มาใช้ (เป็นการ Refactor แบบหนึ่ง)
1
class WithColor {
2
color: string = "ดำ"
3
4
changeColor(newColor: string) {
5
this.color = newColor
6
}
7
}
8
9
class Car extends WithColor {
10
year: number = 2563
11
12
printYear() {
13
console.log(this.year)
14
}
15
}
16
17
class Shirt extends WithColor {
18
size: "S" | "M" | "L" = "M"
19
color: string = "ขาว" // เปลี่ยนค่า Default เป็นสีขาว
20
}
21
22
const car = new Car()
23
car.changeColor("แดง")
24
console.log(car)
25
// Car: {
26
// "color": "แดง",
27
// "year": 2563
28
// }
29
30
const shirt = new Shirt()
31
console.log(shirt)
32
// Shirt: {
33
// "color": "ขาว",
34
// "size": "M"
35
// }
Copied!
To be continued
Last modified 10mo ago