0Pricing
TypeScript Academy · บทเรียน

อินเทอร์เฟซเทียบกับนามแฝงชนิดข้อมูล

เปรียบเทียบอินเทอร์เฟซกับนามแฝงชนิดข้อมูล ทั้งคู่ใช้อธิบายโครงสร้างได้ แต่แตกต่างกันด้านการขยาย การรวม และกรณีขั้นสูง

อินเทอร์เฟซเทียบกับนามแฝงชนิดข้อมูล เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

บทนำ

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

อินเทอร์เฟซพื้นฐาน

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

interface User {
  id: number;
  name: string;
}

const u: User = { id: 1, name: "Ada" };

นามแฝงชนิดข้อมูลพื้นฐาน

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

type User = {
  id: number;
  name: string;
};

const v: User = { id: 2, name: "Lin" };

การรวมคำประกาศ

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

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

const obj: A = { x: 1, y: 2 };

ยูเนียนด้วยชนิดข้อมูล

นามแฝงชนิดข้อมูล โดดเด่นเมื่อใช้รวมยูเนียนหรืออินเตอร์เซกชัน อินเทอร์เฟซไม่สามารถสร้างยูเนียนได้โดยตรง

type Shape = Circle | Square;

type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; size: number };

ควรเลือกใช้เมื่อใด

แนวทาง:

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

ตรวจสอบอินเทอร์เฟซกับชนิดข้อมูล

ตรวจสอบอย่างรวดเร็ว: ข้อใดเป็น TRUE เกี่ยวกับอินเทอร์เฟซและนามแฝงชนิดข้อมูล

ทบทวน

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

คำถามที่พบบ่อย

บทเรียน “อินเทอร์เฟซเทียบกับนามแฝงชนิดข้อมูล” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “อินเทอร์เฟซเทียบกับนามแฝงชนิดข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “อินเทอร์เฟซเทียบกับนามแฝงชนิดข้อมูล”

เปรียบเทียบอินเทอร์เฟซกับนามแฝงชนิดข้อมูล ทั้งคู่ใช้อธิบายโครงสร้างได้ แต่แตกต่างกันด้านการขยาย การรวม และกรณีขั้นสูง คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน

บทเรียน “อินเทอร์เฟซเทียบกับนามแฝงชนิดข้อมูล” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ชนิดข้อมูลออบเจ็กต์ แบบไม่บังคับ/อ่านได้อย่างเดียว และลายเซ็นดัชนี
  2. อินเทอร์เฟซเทียบกับนามแฝงชนิดข้อมูล
  3. การกำหนดชนิดข้อมูลเชิงโครงสร้างและการตรวจสอบคุณสมบัติส่วนเกิน
← กลับไปที่ TypeScript Academy