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

การกำหนดชนิดข้อมูลเชิงโครงสร้างและการตรวจสอบคุณสมบัติส่วนเกิน

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

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

บทนำ

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

ชนิดข้อมูลตามโครงสร้าง

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

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

function logPoint(p: Point) {
  console.log(p.x, p.y);
}

const a = { x: 5, y: 7, z: 99 };
logPoint(a); // OK because it has x and y

ชนิดข้อมูลแบบมีชื่อกับแบบโครงสร้าง

ต่างจากระบบแบบมีชื่อ Point2D และ พิกัด จึงเข้ากันได้ เพราะมีโครงสร้างเดียวกัน

type Point2D = { x: number; y: number };
type Coord = { x: number; y: number };

const p: Point2D = { x: 1, y: 2 };
const q: Coord = p; // OK, same structure

การตรวจสอบส่วนเกินล้มเหลว

การตรวจสอบพร็อพเพอร์ตีส่วนเกิน ใช้กับออบเจ็กต์ลิเทอรัลที่กำหนดให้ชนิดข้อมูลเป้าหมายโดยตรง พร็อพเพอร์ตีเพิ่มเติมที่ไม่มีอยู่ในชนิดข้อมูลเป้าหมายจะทำให้เกิดข้อผิดพลาด

interface User { id: number; name: string }

const u: User = { id: 1, name: "Ada", age: 30 }; // Error: excess property "age"

ข้ามการตรวจสอบ

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

const raw = { id: 1, name: "Ada", age: 30 };
const u: User = raw; // OK, because variable assignment skips excess check

แนวทาง

แนวทาง:

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

ตรวจสอบชนิดข้อมูลตามโครงสร้าง

ตรวจสอบอย่างรวดเร็ว: ข้อใดเป็น TRUE เกี่ยวกับชนิดข้อมูลตามโครงสร้าง

ทบทวน

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

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

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

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

คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดชนิดข้อมูลเชิงโครงสร้างและการตรวจสอบคุณสมบัติส่วนเกิน”

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

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

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

บทเรียน “การกำหนดชนิดข้อมูลเชิงโครงสร้างและการตรวจสอบคุณสมบัติส่วนเกิน” ใช้เวลานานแค่ไหน

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

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

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

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

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