Class (2)

Search…
Class (2)
Encapsulation
คลาสใน JavaScript, TypeScript ก็รองรับการตั้งค่า Access เหมือนกับภาษาทั่วๆ ไป เพื่อใช้ซ่อนข้อมูลจากคลาสอื่นๆ ได้ คีย์เวิร์ดที่ใช้คือ public protected และ private
Public Access
การตั้งค่าของตัวแปรและเมธอดเป็น public จะมีผลให้สามารถเรียกใช้จากข้างนอกได้
1
class Dog {
2
  public name: string // ใช้ได้ทั้งใน ​Class และเรียกจากนอก Class
3
  
4
  public bark() {
5
    console.log("Woof!")
6
  }
7
}
8
​
9
const d = new Dog()
10
d.name = "Doge"
11
d.bark() // Woof!
Copied!
ปกติถ้าไม่กำหนด Access ใดๆ เลย จะถือว่าเป็น public โดยอัตโนมัติ เราจึงไม่เห็นคนใช้ public กันเท่าไร
Protected Access
สำหรับ protected จะไม่สามารถเรียกจากภายนอกได้ แต่ถ้าเกิดการสร้าง Subclass ด้วยการใช้ extend จะสามารถใช้ภายใน Subclass ได้
1
class Dog {
2
  protected color: string = "white" // color จะใช้ได้แค่ภายใน Class และ Subclass
3
  
4
  printColor() {
5
    console.log(`This dog is ${this.color}`)
6
  }
7
}
8
​
9
class MyDog extends Dog {
10
  printColor() {
11
    console.log(`My dog is ${this.color}, and he's cute!`)
12
  }
13
}
14
​
15
const d = new Dog()
16
d.color // ❌ เรียกใช้ไม่ได้ เพราะเป็น protected  
17
d.printColor() // This dog is white
18
​
19
const e = new MyDog()
20
e.printColor() // My dog is white, and he's cute!
Copied!
Private Access
ถ้าเป็น private ตัวแปรและเมธอดจะใช้ได้แค่ภายในคลาสนั้นเท่านั้น Subclass ก็ไม่สามารถใช้ได้
1
class Brain {
2
  private cellCount: number // cellCount จะใช้ได้แค่ใน Class นี้
3
  
4
  constructor(c: number) {
5
    this.cellCount = c
6
  }
7
​
8
  countCells() {
9
    console.log(`The brain has ${this.cellCount} cells`) // ✅
10
  }
11
}
12
​
13
const brain = new Brain(84000)
14
console.log(brain.cellCount) // ❌ ไม่สามารถเรียกใช้ cellCount จากภายนอกคลาสได้
15
​
16
class BigBrain extends Brain {
17
  doubleCells() {
18
    // ❌ ไม่สามารถเรียกใช้ cellCount จาก Subclass ได้
19
    this.cellCount = this.cellCount * 2
20
  }
21
}
22
​
23
​
Copied!
Static Members
การตั้งตัวแปรและเมธอดให้เป็น static จะทำให้สามารถเรียกใช้ได้จากคลาสนั้นโดยตรง โดยไม่ต้องสร้าง Object ด้วย new ก่อน วิธีนี้เหมาะกับการสร้างค่าคงที่หรือเมธอดที่ไม่ต้องใช้ค่าใน Object
1
class Tweet {
2
  static charLimit = 280
3
  message: string
4
  
5
  static charLimitMessage() {
6
    return `Character limit is ${Tweet.charLimit}` // เรียกใช้จากในคลาส
7
  }
8
​
9
  constructor(message: string) {
10
    if (message.length > Tweet.charLimit) { // เรียกใช้จาก Constructor
11
      throw new Error(Tweet.charLimitMessage())
12
    }
13
​
14
    this.message = message
15
  }
16
}
17
​
18
Tweet.charLimit // เรียกใช้จากภายนอกคลาส
Copied!
Generic Classes
เช่นเดียวกับ Interface เราสามารถใช้ Generic กับคลาสได้ ข้อแตกต่างคือการทำเป็นคลาสเราจะ Infer Type ด้วย Constructor Method ได้เลย
1
// เขียนแบบ Class
2
class Package<T> {
3
  contents: T
4
  
5
  constructor(value: T) { // Infer จาก value ที่นำเข้ามา
6
    this.contents = value
7
  }
8
}
9
​
10
const pkgObject = new Package("มันคือแป้ง") // T เป็น string จากการ Infer
11
​
12
// เขียนแบบ Interface
13
interface Package<T> {
14
  contents: T
15
}
16
​
17
const pkgInterface: Package<string> = { contents: "มันคือแป้ง" } // ต้องกำหนด T เอง
Copied!
เรื่องของคลาสยังมีอีกเยอะ แต่ขอไปศืกษาเพิ่มก่อนนะ (เนื้อหาเรื่องคลาสทั้งสองตอนครอบคลุมการใช้งานและการอ่านโค้ดของคนอื่นได้พอประมาณ ถ้าต้องการดูเนื้อหาท้ังหมดสามารถดูได้จาก TypeScript Handbook)
Class (1)
ลองเขียนเว็บง่าย ๆ ด้วย TypeScript
Last modified 10mo ago
Copy link
Contents
Encapsulation
Static Members
Generic Classes