การเขียนโปรแกรมเชิงวัตถุ (OOP) ด้วย Typescript

Typescript เป็นชุดที่เหนือกว่าของ Javascript ซึ่งมีทุกสิ่งที่ Javascript มีบวกกับไวยากรณ์เพิ่มเติม มันคือภาษาที่พิมพ์ ดังนั้นการเขียนโปรแกรมเชิงวัตถุคืออะไร?

การเขียนโปรแกรมเชิงวัตถุเป็นกระบวนทัศน์การเขียนโปรแกรมที่จัดระเบียบโค้ดเป็นอ็อบเจ็กต์ที่เป็นคลาสอินสแตนซ์ มีแนวคิดหลักอยู่ 6 ประการ ได้แก่

1. คลาส: คลาสทำหน้าที่เป็นพิมพ์เขียวหรือเทมเพลตสำหรับการสร้างวัตถุ พวกเขากำหนดคุณสมบัติและพฤติกรรมที่วัตถุของคลาสนั้นจะมี
2. วัตถุ: วัตถุเป็นตัวอย่างของคลาส พวกเขาเป็นตัวแทนของแต่ละหน่วยงานที่มีสถานะและพฤติกรรมที่เป็นเอกลักษณ์ของตนเอง แต่ละอ็อบเจ็กต์มีชุดค่าคุณสมบัติของตัวเองที่กำหนดไว้ในคลาส
3. การห่อหุ้ม: การห่อหุ้มเป็นวิธีหนึ่งในการจำกัดการเข้าถึงโดยตรงไปยังส่วนประกอบบางส่วนของวัตถุ ช่วยให้สามารถซ่อนข้อมูลและปกป้องสถานะภายในของวัตถุจากการเข้าถึงโดยตรงจากส่วนอื่น ๆ ของโปรแกรม
4. การสืบทอด: การสืบทอดอนุญาตให้คลาสสืบทอดคุณสมบัติและวิธีการจากคลาสอื่น สร้างความสัมพันธ์ระหว่างพ่อแม่และลูกระหว่างคลาส โดยที่คลาสลูก (คลาสย่อย) สามารถสืบทอดและขยายคุณลักษณะและพฤติกรรมของคลาสพาเรนต์ (ซูเปอร์คลาส)
5. พหุมอร์ฟิซึม:พหุมอร์ฟิซึมเป็นแนวคิดที่อ้างถึงความสามารถของตัวแปร ฟังก์ชัน หรือวัตถุที่จะมีรูปแบบต่างๆ ได้
6. นามธรรม: นามธรรมคือกระบวนการซ่อนรายละเอียดภายในของแอปพลิเคชันจากโลกภายนอก นามธรรมใช้เพื่ออธิบายสิ่งต่าง ๆ ในรูปแบบง่ายๆ

ทฤษฎีพอแล้ว เมื่อพิจารณาบล็อกโค้ดด้านล่าง ให้เรากำหนดฟิลด์คลาสง่ายๆ และเพิ่มสมาชิกบางส่วนลงไป คุณสมบัติ x และ y เป็นหมายเลขประเภท ดังนั้นหากเรากำหนดสตริงประเภทให้กับอย่างใดอย่างหนึ่งของ x หรือ y เราจะ สร้างข้อผิดพลาดประเภท 'สตริง' ไม่สามารถกำหนดให้พิมพ์ 'หมายเลข' นี่เป็นหนึ่งในข้อดีของ typescript ซึ่งช่วยรักษาโค้ดของเราให้อยู่ในการตรวจสอบและรับประกันความสม่ำเสมอ

class Calculation {
  x: number;
  y: number;

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}
 
const cal = new Calculation ();
cal.x = 0;
cal.y = "0"; // this will generate an error of type string is not 
             // assignable to type string

เมื่อพิจารณาบล็อกโค้ดด้านล่าง ฟิลด์อาจขึ้นต้นด้วยตัวแก้ไข อ่านอย่างเดียว ซึ่งจะป้องกันการกำหนดหรือแก้ไขฟิลด์ภายนอกตัวสร้าง เมธอด err จะสร้างข้อผิดพลาดเนื่องจากคุณสมบัติ z อ่านอย่างเดียว จึงไม่สามารถแก้ไขได้

class Calculation {
  x: number;
  y: number;
  readonly z: number = 10;

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  err() {
      this.z = 20; //this will generate an error
    }
}
 
const cal = new Calculation();
cal.x = 0;
cal.y = 0;

ตัวสร้าง

ตัวสร้างคลาสคล้ายกับฟังก์ชัน คุณสามารถเพิ่มพารามิเตอร์ด้วยคำอธิบายประกอบประเภท คุณยังสามารถให้ค่าเริ่มต้นได้ และยังสามารถโอเวอร์โหลดได้อีกด้วย บล็อกโค้ดแสดงความคิดเห็น //OVERLOADED เป็นตัวอย่างของตัวสร้างที่โอเวอร์โหลด

class Point {
  x: number;
  y: number;
  readonly z: number = 10;

//x and y has a default value of 5 here
  constructor(x = 5, y = 5) { 
    this.x = x;
    this.y = y;
  }

  err() {
      this.z = 20; //this will generate an error
    }
}
 
const cal= new Calculation();
cal.x = 0;
cal.y = 0;


//OVERLOADED
// an overloaded constructor will look something like this
class Calculation {
  // Overloads
  constructor(x: number, y: string);
  constructor(s: string);
  constructor(xs: any, y?: any) {
    // TBD
  }
}

การโทรขั้นสูง

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

class Constant{
  k = 4;
}
 
class Calculation extends Constant{
  constructor() {
     console.log(this.k) //this will generate an error
    // 'super' must be called before accessing 'this' in the constructor
    // of a derived class.
    super();
  }
}

วิธีการ

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

class Calculation {
  x = 10;
  y = 10;
 
//if anything other than a number is returned, typescript will inform you
  addition(x, y): number{
    return x + y; 
  }
}

ตัวรับและผู้ตั้งค่า

คลาสยังสามารถมี ตัวเข้าถึงหมายความว่าอย่างไร หากคุณต้องการเข้าถึงค่าหรือคุณสมบัติบางอย่าง หรือตั้งค่าหรือให้ค่าคุณสมบัติจากคลาส คุณสามารถทำได้ผ่าน Getters และ Setters

หมายเหตุ:Typescript มีการหักเงินบางส่วนใน ตัวเข้าถึงซึ่งรวมถึง:

• หากเรามี get แต่ไม่มีคุณสมบัติ set ดังนั้น คุณสมบัติ get จะถูกตั้งค่าเป็น อ่านอย่างเดียว โดยอัตโนมัติ
• หากไม่ได้ระบุประเภทของ ตัวเซ็ต มันจะถูกอนุมานโดยอัตโนมัติจากการส่งคืนของ ตัวรับ
• getters และ setterต้องมีสมาชิกที่มองเห็นได้เหมือนกัน นั่นคือ หาก getter เป็นแบบสาธารณะหรือส่วนตัว setter จะต้อง เป็นสาธารณะหรือส่วนตัวด้วย

class Calculate {
  _PI = 3.142;
  x: 10;
  get constantPI() {
    return this._PI;
  }
  set setX(value) {
    this.x= value;
  }
}

มรดกทางชนชั้น

เช่นเดียวกับภาษาการเขียนโปรแกรมอื่นๆ คลาสใน Javascript สามารถสืบทอดมาจากคลาสแม่ได้ และสามารถทำได้โดยใช้คำหลัก นำไปใช้งาน

ใช้ประโยค

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

interface Person {
  name: string;
  age: number;
}

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

หมายเหตุ:เมื่อเราใช้ส่วนคำสั่ง implement ใน TypeScript นั่นหมายความว่าคลาสมีแนวโน้มที่จะปฏิบัติตามกฎที่ระบุโดยอินเทอร์เฟซ อย่างไรก็ตาม สิ่งสำคัญคือต้องเข้าใจว่าการใช้ นำไปใช้ ไม่ได้เปลี่ยนคลาสหรือเมธอดจริงๆ มันเป็นเพียงวิธีการบอกว่าคลาสจะมีคุณสมบัติและเมธอดเดียวกันกับที่กำหนดไว้ในอินเทอร์เฟซ

interface GrandParents {
  Chidren(): void;
}
 
class Parents implements GrandParents{
  children() {
    console.log("John", "Alli");
  }
}
 
class GrandChild implements GrandParents{
// Class 'GrandChild 'incorrectly implements interface 'GrandParents'.
// Property 'children' is missing in type 'GrandChild' 
// but required in type 'GrandParents'.
  child() {
    console.log("Doe");
  }
}

ขยายประโยค

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

จากตัวอย่างโค้ดด้านล่าง เราจะเห็นคลาส Dog ที่สืบทอดมาจากสัตว์และยังมีคุณสมบัติของวูฟของตัวเองอีกด้วย

class Animal {
  move() {
    console.log("Moving along!");
  }
}
 
class Dog extends Animal {
  woof(times: number) {
    for (let i = 0; i < times; i++) {
      console.log("woof!");
    }
  }
}
 
const dog = new Dog();
// Base class method
dog.move();
// Derived class method
dog.woof(3);

วิธีการแทนที่

ฉันจะอธิบายสิ่งนี้ด้วยตรรกะง่ายๆ สมมติว่าเรามีคลาสพื้นฐาน Animal ที่มีเมธอด makeSound และคลาสที่ได้รับหรือคลาสย่อยของ Dog วิธีการแทนที่ คือเมื่อคลาส Dog จัดเตรียมเวอร์ชันของตัวเอง makeSound เนื่องจากสัตว์ทุกตัวมีเสียงไม่เหมือนกัน และกระบวนการนี้คือวิธีที่คลาสที่ได้รับหรือคลาสย่อยแทนที่คุณสมบัติและวิธีการของคลาสฐานหรือคลาสพาเรนต์

เมื่อดูโค้ดด้านล่าง คลาสพื้นฐานจะมีเมธอดการทักทาย และคลาสที่ได้รับสืบทอดวิธีการทักทายและแทนที่มันโดยการตั้งค่าตามตรรกะของมันเอง สิ่งสำคัญคือคลาสที่ได้รับจะต้องปฏิบัติตามสัญญาคลาสพื้นฐาน โปรดจำไว้ว่าเป็นเรื่องปกติมาก (และถูกกฎหมายเสมอ!) ในการอ้างถึงอินสแตนซ์คลาสที่ได้รับผ่านการอ้างอิงคลาสพื้นฐาน:

class Base {
  greet() {
    console.log("Hello, world!");
  }
}
 
class Derived extends Base {
  greet(name?: string) {
    if (name === undefined) {
      super.greet();
    } else {
      console.log(`Hello, ${name.toUpperCase()}`);
    }
  }
}
 
const dog = new Derived();
dog.greet();
dog.greet("reader");

การเปิดเผยข้อมูลสมาชิก

นี่เป็นตรรกะการห่อหุ้มโดยทั่วไป Typescript ใช้ตรรกะนี้เพื่อป้องกันไม่ให้วิธีการและคุณสมบัติบางอย่างพร้อมใช้งานหรือไม่อยู่นอกคลาส

สาธารณะ

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

class Animal{
  public makeSound() {
    console.log("make sound");
  }
}
const dog= new Animal();
dog.makeSound();

ป้องกัน

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

class Animal {
  protected name: string;

  constructor(name: string) {
    this.name = name;
  }

  protected makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  public bark() {
    console.log(`${this.name} barks loudly!`);
    this.makeSound();
  }
}

const dog = new Dog("Buddy");
dog.bark(); // Output: Buddy barks loudly!
            //         Buddy makes a sound.

ส่วนตัว

private ก็เหมือนกับการป้องกัน แต่จะไม่อนุญาตให้คุณสมบัติหรือเมธอดแท็กใด ๆ ใช้ร่วมกับคลาสย่อยได้ แต่จะใช้ได้เฉพาะกับสมาชิกเท่านั้น

class Animal {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  private sleep() {
    console.log(`${this.name} is sleeping.`);
  }

  public wakeUp() {
    console.log(`${this.name} wakes up.`);
    this.sleep(); // Private method called within the class
  }

  public makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

const animal = new Animal("Lion");
animal.wakeUp(); // Output: Lion wakes up. Lion is sleeping.
animal.makeSound(); // Output: Lion makes a sound.
// animal.name will generate an error, as it'a private property

บทสรุป

มีอะไรอีกมากมายให้เรียนรู้เกี่ยวกับ OOP ใน Typescript เอกสารของ Typescript เป็นสถานที่ที่ดีในการเรียนรู้เพิ่มเติมเกี่ยวกับ OOP คลิก LINK เพื่ออ่านเพิ่มเติม

การสนับสนุนของคุณเป็นสิ่งสำคัญมากสำหรับฉัน หากคุณชอบเรื่องราวนี้และต้องการสนับสนุนฉัน โปรดปรบมือให้ฉันด้วย นอกจากนี้ หากคุณต้องการเชื่อมต่อกับฉันผ่านทาง "LinkedIn", "Twitter" หรือ "GitHub" อย่าลังเลที่จะติดต่อเรา