ความใหม่และการตรวจสอบพร็อพเพอร์ตีส่วนเกิน
สำรวจสาเหตุที่พร็อพเพอร์ตีส่วนเกินทำให้เกิดข้อผิดพลาดในบางบริบท
ความใหม่และการตรวจสอบพร็อพเพอร์ตีส่วนเกิน เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
ความสดใหม่คืออะไร
ความสดใหม่เป็นแนวคิดของ TypeScript ที่ค่าลิเทอรัลของออบเจ็กต์จะถือว่า "สดใหม่" ณ จุดที่สร้าง ออบเจ็กต์สดใหม่จะผ่านการตรวจสอบพร็อพเพอร์ตีส่วนเกินอย่างเข้มงวด ซึ่งออบเจ็กต์ที่ถูกขยายชนิดข้อมูลแล้วจะไม่ผ่านการตรวจสอบแบบเดียวกัน
interface Point { x: number; y: number; }
const p: Point = { x: 1, y: 2, z: 3 }; // Error: 'z' not in Pointการตรวจสอบพร็อพเพอร์ตีส่วนเกินในการใช้งานจริง
เมื่อคุณกำหนดค่าลิเทอรัลของออบเจ็กต์โดยตรงให้กับตัวแปรที่มีชนิดข้อมูล หรือส่งค่าเป็นอาร์กิวเมนต์ของฟังก์ชัน TypeScript จะแจ้งพร็อพเพอร์ตีเพิ่มเติมที่ไม่มีอยู่ในชนิดข้อมูลเป้าหมาย
function setPoint(p: { x: number; y: number }) {}
setPoint({ x: 1, y: 2, z: 3 }); // Error: 'z' excess propertyเหตุผลที่มีการตรวจสอบพร็อพเพอร์ตีส่วนเกิน
การตรวจสอบนี้ช่วยตรวจพบการพิมพ์ผิดและพร็อพเพอร์ตีที่ไม่ได้ตั้งใจในออบเจ็กต์การกำหนดค่า ซึ่งเป็นแหล่งข้อผิดพลาดที่พบบ่อยใน JavaScript
interface Options { timeout: number; retry?: boolean; }
const opts: Options = { timeout: 3000, retrey: true }; // Error — typo!ความสดใหม่หายไปอย่างไร
เมื่อกำหนดค่าลิเทอรัลของออบเจ็กต์ให้กับตัวแปรคั่นกลาง ค่านั้นจะไม่ถือว่า "สดใหม่" อีกต่อไป และการตรวจสอบพร็อพเพอร์ตีส่วนเกินจะไม่ใช้กับชนิดข้อมูลที่ถูกขยายแล้ว
const opts = { timeout: 3000, retry: true, extra: "surprise" };
const o: Options = opts; // No error — freshness lost on assignmentการยืนยันชนิดข้อมูลข้ามการตรวจสอบความสดใหม่
การใช้การยืนยันชนิดข้อมูลด้วย as ก็ข้ามการตรวจสอบพร็อพเพอร์ตีส่วนเกินเช่นกัน ซึ่งอาจซ่อนข้อผิดพลาดไว้ได้
const o = { timeout: 3000, typo: true } as Options; // No errorการตรวจสอบพร็อพเพอร์ตีส่วนเกินกับชนิดข้อมูลอินเตอร์เซกชัน
ชนิดข้อมูลอินเตอร์เซกชันอาจทำให้การตรวจสอบพร็อพเพอร์ตีส่วนเกินผ่อนคลายลงในบางกรณี เพราะพร็อพเพอร์ตีเพิ่มเติมอาจเป็นสมาชิกของชนิดข้อมูลใดชนิดข้อมูลหนึ่งในอินเตอร์เซกชัน
type A = { x: number };
type B = { y: number };
const ab: A & B = { x: 1, y: 2 }; // OKReadonly และพร็อพเพอร์ตีส่วนเกิน
การตรวจสอบพร็อพเพอร์ตีส่วนเกินใช้กับชนิดข้อมูลออบเจ็กต์ readonly ด้วย — กฎนี้เกี่ยวกับโครงสร้าง ไม่ใช่ความสามารถในการเปลี่ยนแปลง
interface Cfg { readonly host: string; }
const c: Cfg = { host: "localhost", port: 3000 }; // Errorลายเซ็นดัชนีและพร็อพเพอร์ตีส่วนเกิน
การเพิ่มลายเซ็นดัชนีให้ชนิดข้อมูลทำให้มีพร็อพเพอร์ตีเพิ่มเติมที่ใช้คีย์สตริงได้ทุกแบบ ซึ่งเท่ากับปิดการตรวจสอบพร็อพเพอร์ตีส่วนเกินสำหรับชนิดข้อมูลนั้น
interface Flexible { name: string; [key: string]: unknown; }
const f: Flexible = { name: "ts", extra: true }; // OKพร็อพเพอร์ตีทางเลือกและความสดใหม่
พร็อพเพอร์ตีทางเลือกไม่ได้ทำให้การตรวจสอบพร็อพเพอร์ตีส่วนเกินผ่อนคลายลง พร็อพเพอร์ตีที่ไม่ได้ระบุไว้เลย — แม้จะเป็นพร็อพเพอร์ตีทางเลือก — ยังคงถูกรายงานว่าเป็นพร็อพเพอร์ตีส่วนเกิน
interface Shape { color?: string; }
const s: Shape = { color: "red", size: 10 }; // Error: 'size' excessรูปแบบการใช้งานจริง
หากต้องการส่งพร็อพเพอร์ตีการกำหนดค่าเพิ่มเติมผ่านอินเทอร์เฟซที่ระบุชนิดข้อมูลโดยไม่ให้เกิดข้อผิดพลาด ให้ใช้ตัวแปรคั่นกลางหรือลายเซ็นดัชนีในอินเทอร์เฟซ
// Option 1: intermediate variable (freshness lost)
const cfg = { timeout: 3000, debugMode: true };
const o: Options = cfg;
// Option 2: index signature in interfaceสรุป: ความสดใหม่
ความสดใหม่ใช้กับค่าลิเทอรัลของออบเจ็กต์ที่สดใหม่ ทำให้ตรวจสอบพร็อพเพอร์ตีส่วนเกินได้ ณ จุดที่กำหนดค่า ให้กำหนดค่าให้กับตัวแปรคั่นกลางหรือใช้ลายเซ็นดัชนีเพื่ออนุญาตพร็อพเพอร์ตีเพิ่มเติม
ตรวจสอบอย่างรวดเร็ว
การตรวจสอบพร็อพเพอร์ตีส่วนเกินไม่ใช้เมื่อใด โดยมีเงื่อนไขเป็น NOT
สิ่งที่คุณได้เรียนรู้
ความสดใหม่และการตรวจสอบพร็อพเพอร์ตีส่วนเกินช่วยป้องกันการพิมพ์ผิดและพร็อพเพอร์ตีที่ไม่ได้ตั้งใจในค่าลิเทอรัลของออบเจ็กต์ ทำความเข้าใจว่าความสดใหม่หายไปเมื่อใด เพื่อหลีกเลี่ยงข้อผิดพลาดของชนิดข้อมูลที่คาดไม่ถึงหรือข้อผิดพลาดที่ถูกซ่อนไว้
คำถามที่พบบ่อย
บทเรียน “ความใหม่และการตรวจสอบพร็อพเพอร์ตีส่วนเกิน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ความใหม่และการตรวจสอบพร็อพเพอร์ตีส่วนเกิน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ความใหม่และการตรวจสอบพร็อพเพอร์ตีส่วนเกิน”
สำรวจสาเหตุที่พร็อพเพอร์ตีส่วนเกินทำให้เกิดข้อผิดพลาดในบางบริบท คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “ความใหม่และการตรวจสอบพร็อพเพอร์ตีส่วนเกิน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- กลไกการขยายและจำกัดชนิดให้แคบลง
- การระบุชนิดตามบริบท: การอนุมานจากบริบท
- ความใหม่และการตรวจสอบพร็อพเพอร์ตีส่วนเกิน
- การยืนยัน const และ as const