นามแฝงชนิดข้อมูลและอินเทอร์เฟซ

ชื่อแทนชนิดข้อมูลและอินเทอร์เฟซ

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

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

ตัวอย่าง:

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

type Point = {
  x: number;
  y: number;
};

let point: Point = { x: 10, y: 20 };
console.log(point); 
// Output: { x: 10, y: 20 }

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

ตัวอย่าง:

งาน: สร้างอินเทอร์เฟซสำหรับโพรไฟล์ผู้ใช้ และใช้ชื่อนั้นกำหนดตัวแปร

interface Point {
  x: number;
  y: number;
}

let point: Point = { x: 5, y: 15 };
console.log(point); 
// Output: { x: 5, y: 15 }

ชื่อแทนชนิดข้อมูลและอินเทอร์เฟซมีคุณสมบัติบางอย่างร่วมกัน:

• ทั้งสองแบบสามารถอธิบายโครงสร้างของออบเจ็กต์ได้
• ทั้งสองแบบสามารถใช้กำหนดชนิดข้อมูลของฟังก์ชันได้
• ทั้งสองแบบรองรับการขยายชนิดข้อมูลอื่น

ตัวอย่าง: ชนิดข้อมูลของฟังก์ชัน:

งาน: กำหนดทั้งชื่อแทนชนิดข้อมูลและอินเทอร์เฟซสำหรับฟังก์ชัน แล้วนำไปใช้

type Add = (a: number, b: number) => number;
interface Subtract {
  (a: number, b: number): number;
}

let add: Add = (x, y) => x + y;
let subtract: Subtract = (x, y) => x - y;

console.log(add(5, 3)); 
// Output: 8
console.log(subtract(5, 3)); 
// Output: 2

ต่อไปนี้คือความแตกต่างที่สำคัญ:

• อินเทอร์เฟซ: สามารถ merged ได้ (การรวมการประกาศ)
• ชื่อแทนชนิดข้อมูล: ไม่สามารถ merged ได้
• ชื่อแทนชนิดข้อมูล: สามารถกำหนดชนิดข้อมูลยูเนียนและอินเตอร์เซกชันได้
• อินเทอร์เฟซ: ออกแบบมาเป็นหลักสำหรับกำหนดรูปแบบของออบเจ็กต์

ตัวอย่าง: ชนิดข้อมูลยูเนียนด้วยชื่อแทนชนิดข้อมูล:

งาน: ใช้ชื่อแทนชนิดข้อมูลเพื่อกำหนดชนิดข้อมูลยูเนียน และกำหนดค่าต่าง ๆ ให้กับตัวแปร

type StringOrNumber = string | number;

let value: StringOrNumber = "Hello";
value = 42;
// value = true; 
// Error: Type 'true' is not assignable to type 'StringOrNumber'.

ทั้งชื่อแทนชนิดข้อมูลและอินเทอร์เฟซสามารถขยายชนิดข้อมูลอื่นได้:

• อินเทอร์เฟซ: ใช้คีย์เวิร์ด extends
• ชื่อแทนชนิดข้อมูล: ใช้อินเตอร์เซกชัน (&)

ตัวอย่าง:

งาน: ขยายชื่อแทนชนิดข้อมูลและอินเทอร์เฟซเพื่อสร้างชนิดข้อมูลใหม่

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

type Bird = Animal & { canFly: boolean };

let myDog: Dog = { name: "Buddy", breed: "Golden Retriever" };
let myBird: Bird = { name: "Parrot", canFly: true };

console.log(myDog, myBird);

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

ตัวอย่าง:

งาน: สร้างการประกาศอินเทอร์เฟซสองรายการที่มีชื่อเดียวกัน และทดสอบการรวมการประกาศ

interface Person {
  name: string;
}

interface Person {
  age: number;
}

let person: Person = { name: "Alice", age: 30 };
console.log(person); 
// Output: { name: "Alice", age: 30 }

ต่อไปนี้คือแนวทางบางส่วน:

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

เคล็ดลับ: เลือกแบบที่เหมาะกับกรณีการใช้งานของคุณมากที่สุด เพื่อให้โค้ดชัดเจนและสอดคล้องกัน

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