TypeScript Academy · บทเรียน

กำหนดโครงสร้างออบเจ็กต์ด้วยอินเทอร์เฟซ

ใช้อินเทอร์เฟซเพื่ออธิบายโครงสร้างของออบเจ็กต์

บทเรียน 1 จาก 413 ขั้นตอน

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

ยินดีต้อนรับ

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

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

กำหนดอินเทอร์เฟซด้วยคีย์เวิร์ด `interface` ตามด้วยชื่อพร็อพเพอร์ตีและชนิดของพร็อพเพอร์ตี
interface User {
  id: number;
  name: string;
  email: string;
}
const alice: User = { id: 1, name: 'Alice', email: 'a@b.com' };

พร็อพเพอร์ตีแบบไม่บังคับด้วย ?

ทำเครื่องหมายพร็อพเพอร์ตีเป็นแบบไม่บังคับด้วย `?` พร็อพเพอร์ตีแบบไม่บังคับอาจมีอยู่หรือไม่มีก็ได้
interface Config {
  host: string;
  port?: number;     // optional
  timeout?: number;  // optional
}

พร็อพเพอร์ตีแบบอ่านอย่างเดียว

พร็อพเพอร์ตีแบบอ่านอย่างเดียวกำหนดค่าได้ครั้งเดียว (เมื่อสร้าง) แต่ไม่สามารถเปลี่ยนแปลงภายหลังได้
interface Point {
  readonly x: number;
  readonly y: number;
}
const p: Point = { x: 5, y: 10 };
// p.x = 0; // Error!

ลายเซ็นเมธอด

อินเทอร์เฟซสามารถมีลายเซ็นเมธอดที่อธิบายรูปแบบของฟังก์ชันได้
interface Animal {
  name: string;
  speak(): string;
  move(distance: number): void;
}

ลายเซ็นดัชนี

ใช้ลายเซ็นดัชนีเมื่อออบเจ็กต์มีคีย์แบบไดนามิกที่เป็นชนิดเฉพาะ
interface StringMap {
  [key: string]: string;
}
const headers: StringMap = {
  'content-type': 'application/json',
  'accept': 'text/html',
};

การกำหนดชนิดตามโครงสร้าง

TypeScript ใช้การกำหนดชนิดตามโครงสร้าง ออบเจ็กต์จะสอดคล้องกับอินเทอร์เฟซตราบใดที่มีพร็อพเพอร์ตีที่จำเป็น ไม่ว่าจะสร้างขึ้นมาอย่างไรก็ตาม
interface Named { name: string; }
function greet(obj: Named) { console.log(obj.name); }
greet({ name: 'Alice', age: 30 }); // Extra props OK when not a literal

การตรวจสอบพร็อพเพอร์ตีส่วนเกิน

TypeScript รายงานข้อผิดพลาดเมื่อออบเจ็กต์ลิเทอรัลมีพร็อพเพอร์ตีเพิ่มเติมที่ไม่มีอยู่ในอินเทอร์เฟซ การตรวจสอบนี้เรียกว่าการตรวจสอบพร็อพเพอร์ตีส่วนเกิน
interface Config { host: string; }
// const c: Config = { host: 'localhost', extra: 1 }; // Error on literal
const obj = { host: 'localhost', extra: 1 };
const c: Config = obj; // OK — not a fresh literal

อินเทอร์เฟซสำหรับชนิดฟังก์ชัน

อินเทอร์เฟซสามารถอธิบายชนิดที่เรียกใช้ได้ด้วยลายเซ็นการเรียกใช้
interface Greeter {
  (name: string): string;
}
const greet: Greeter = name => 'Hello, ' + name;

อินเทอร์เฟซซ้อนกัน

พร็อพเพอร์ตีสามารถอ้างอิงอินเทอร์เฟซอื่นเพื่อสร้างรูปแบบออบเจ็กต์ซ้อนกันได้
interface Address { street: string; city: string; }
interface Person { name: string; address: Address; }
const p: Person = { name: 'Alice', address: { street: '1 Main', city: 'NY' } };

อินเทอร์เฟซเทียบกับอินสแตนซ์ของคลาส

อินเทอร์เฟซอธิบายรูปแบบสาธารณะของคลาส แต่จะถูกลบออกขณะทำงาน ส่วนคลาสเป็นผู้จัดเตรียมการทำงานจริง
interface Saveable { save(): Promise<void>; }
class UserService implements Saveable {
  async save() { /* ... */ }
}

ตรวจสอบอย่างรวดเร็ว

จะเกิดอะไรขึ้นเมื่อคุณกำหนดออบเจ็กต์ลิเทอรัลที่มีพร็อพเพอร์ตีเพิ่มเติมให้กับชนิดอินเทอร์เฟซใน TypeScript

สรุปทบทวน

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

เรียนรู้ TypeScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
101
บทเรียน
352

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

บทเรียน “กำหนดโครงสร้างออบเจ็กต์ด้วยอินเทอร์เฟซ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “กำหนดโครงสร้างออบเจ็กต์ด้วยอินเทอร์เฟซ”

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

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

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

บทเรียน “กำหนดโครงสร้างออบเจ็กต์ด้วยอินเทอร์เฟซ” ใช้เวลานานแค่ไหน

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

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

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

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

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