- แนะนำเบื้องต้นเกี่ยวกับอินเทอร์เฟซ
- เจาะลึกคลาส TypeScript
- คลาสนามธรรม (Abstract Classes) และการเชื่อมต่อ (Interfaces) กับคลาส
ในโลกของการเขียนโปรแกรมเชิงวัตถุ (OOP) แนวคิดของอินเทอร์เฟซและคลาสมีบทบาทสำคัญในการจัดโครงสร้างและกำหนดวัตถุที่คุณทำงานด้วย TypeScript ในฐานะที่เป็น superset ของ JavaScript ที่ตัวแปรแบบสแตติก แนะนำเครื่องมืออันทรงพลังเหล่านี้เพื่อช่วยให้นักพัฒนาทำเว็บและทำแอพที่แข็งแกร่ง ปรับขนาดได้ และบำรุงรักษาได้ บทนี้จะสำรวจสาระสำคัญของอินเทอร์เฟซและคลาสใน TypeScript ซึ่งอาจเป็นประโยชน์อย่างยิ่งเมื่อทำเว็บ TypeScript หรือทำแอพที่ซับซ้อน
1. แนะนำเบื้องต้นเกี่ยวกับอินเทอร์เฟซ
อินเทอร์เฟซใน TypeScript เป็นวิธีที่มีประสิทธิภาพในการกำหนดสัญญาสำหรับโครงสร้างที่ซับซ้อน อินเทอร์เฟซสามารถใช้เพื่ออธิบายรูปร่างของวัตถุ ทำหน้าที่เป็นพิมพ์เขียวที่รับรองว่าวัตถุสอดคล้องกับโครงสร้างเฉพาะ
interface User {
id: number;
name: string;
}
let user: User = {
id: 1,
name: 'John Doe'
};ในตัวอย่างข้างต้น เราได้กำหนด อินเทอ ร์ User เฟซที่ต้องการให้ User อ็อบเจ็กต์ใดๆ มี id ประเภท number และ name ประเภท string นี่เป็นตัวอย่างง่ายๆ แต่อินเทอร์เฟซอาจซับซ้อนกว่านี้มาก โดยระบุคุณสมบัติทางเลือก คุณสมบัติแบบอ่านอย่างเดียว ประเภทฟังก์ชัน และประเภทที่จัดทำดัชนีได้ และอื่นๆ
ส่วนต่อประสานใน TypeScript เป็นโครงสร้างเวลาพัฒนา – ไม่ได้คอมไพล์เป็นโค้ด JavaScript ใดๆ ซึ่งหมายความว่าพวกเขาเสนอวิธีการบังคับใช้การตรวจสอบประเภทในขณะคอมไพล์โดยไม่ต้องเพิ่มโอเวอร์เฮดรันไทม์ ซึ่งอาจเป็นประโยชน์อย่างยิ่งเมื่อคุณสร้างแอปด้วย TypeScript
2. เจาะลึกคลาส TypeScript
JavaScript ES6 นำเสนอแนวคิดของคลาส แต่ TypeScript ก้าวไปอีกขั้นโดยเพิ่มคุณสมบัติเพิ่มเติมจากภาษาเชิงวัตถุแบบดั้งเดิม เช่น ตัวดัดแปลงการเข้าถึงและอินเทอร์เฟซ
ใน TypeScript คลาสจะสรุปข้อมูลและฟังก์ชันที่ดำเนินการกับข้อมูลนั้น พิจารณาตัวอย่างต่อไปนี้:
class Person {
name: string;
constructor(name: string) {
this.name = name;
}
greet() {
return `Hello, ${this.name}`;
}
}
let john = new Person('John');
console.log(john.greet()); // Outputs: Hello, Johnใน Person คลาสด้านบน name เป็นคุณสมบัติและ greet เป็นเมธอด เป็น constructor วิธีพิเศษในการสร้างและเริ่มต้นวัตถุ
TypeScript แนะนำตัวดัดแปลงการเข้าถึงซึ่งระบุความสามารถในการเข้าถึงของสมาชิกคลาส ตัวดัดแปลงการเข้าถึงมีสามประเภท: public, private, protected และ โดยค่าเริ่มต้น สมาชิกทั้งหมดจะเป็น public
class Person {
public name: string;
private age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
public greet() {
return `Hello, ${this.name}`;
}
private getAge() {
return this.age;
}
}
let john = new Person('John', 30);
console.log(john.greet()); // Outputs: Hello, John
console.log(john.getAge()); // Error: Property 'getAge' is private and only accessible within class 'Person'.ในตัวอย่างด้านบน name และ greet เป็น public เพื่อให้สามารถเข้าถึงได้จากทุกที่ age และ getAgeare private ดังนั้นจึงสามารถเข้าถึงได้จากภายใน Person คลาสเท่านั้น
3. คลาสนามธรรม (Abstract Classes) และการเชื่อมต่อ (Interfaces) กับคลาส
คลาสนามธรรมเป็นคลาสพื้นฐานที่คลาสอื่นอาจได้รับมา พวกเขาอาจไม่ได้รับการยกตัวอย่างโดยตรง คลาสนามธรรมอาจมีรายละเอียดการใช้งานสำหรับสมาชิกไม่เหมือนกับอินเทอร์เฟซ คีย์เวิร์ดนามธรรมใช้เพื่อกำหนดคลาสนามธรรมรวมถึงเมธอดนามธรรมภายในคลาสนามธรรม
abstract class Animal {
abstract makeSound(): void;
move(): void {
console.log('Moving along!');
}
}ใน Animal คลาสนามธรรม makeSound เป็นวิธีการนามธรรมที่ไม่มีการใช้งาน คลาสใด ๆ ที่ขยาย Animalจะต้องมีการดำเนินการสำหรับ makeSound แต่ move เป็นวิธีการที่เป็นรูปธรรมและมีการนำไปใช้จริง สามารถเรียกได้โดยตรงจากอินสแตนซ์ของคลาสย่อย
class Dog extends Animal {
makeSound() {
console.log('Woof! Woof!');
}
}
let dog = new Dog();
dog.makeSound(); // Outputs: Woof! Woof!
dog.move(); // Outputs: Moving along!ใน Dog คลาสซึ่งขยายออกไป Animal เรามีการดำเนินการ makeSound สำหรับ เรายังสามารถเรียกใช้ move อินสแตนซ์ของ โดยตรง Dog แม้ว่าเราจะไม่ได้กำหนดไว้ใน Dog คลาส ก็ตาม
สามารถใช้อินเทอร์เฟซร่วมกับคลาสเพื่อบังคับใช้สัญญาบางอย่างได้ ตัวอย่างเช่น คลาสที่ใช้อินเทอร์เฟซต้องกำหนดคุณสมบัติของอินเทอร์เฟซทั้งหมด
interface Flyable {
altitude: number;
fly(height: number): void;
}
class Bird implements Flyable {
altitude = 0;
fly(height: number) {
this.altitude += height;
console.log(`Flying at altitude: ${this.altitude}`);
}
}
let bird = new Bird();
bird.fly(100); // Outputs: Flying at altitude: 100ในตัวอย่างข้างต้น Bird ใช้ Flyable อินเทอร์เฟซ หมายความว่า Bird ต้องกำหนด altitude คุณสมบัติและ fly วิธีการ หาก Bird ไม่ได้กำหนดสิ่งเหล่านี้ TypeScript จะทำให้เกิดข้อผิดพลาดในการรวบรวม
ด้วยการรวมอินเทอร์เฟซเข้ากับคลาส ทำให้ TypeScript นำเสนอโครงสร้างที่แข็งแกร่งที่สามารถช่วยคุณพัฒนาแอปพลิเคชันที่แข็งแกร่ง ปรับขนาดได้ และบำรุงรักษาได้ ไม่ว่าคุณกำลังทำเว็บ TypeScript ทำแอพ หรือพัฒนาระบบระดับองค์กรที่ซับซ้อน การทำความเข้าใจและใช้อินเทอร์เฟซและคลาสอย่างมีประสิทธิภาพเป็นสิ่งสำคัญ
ในบทต่อๆ ไป เราจะเจาะลึกเข้าไปในโลกของประเภททั่วไปและประเภทขั้นสูงใน TypeScript ตลอดจนวิธีการทำงานกับโมดูลต่างๆ นี่คือแนวคิดหลักอื่นๆ ที่จะช่วยให้คุณพัฒนาทักษะทำเว็บ TypeScript และทำแอพที่มีประสิทธิภาพและบำรุงรักษาได้มากขึ้น