TypeScript Academy · บทเรียน

ข้อมูลเมทาดาทาของเดคอเรเตอร์

แนบและอ่านเมทาดาทาด้วย API เมทาดาทา

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

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

API เมทาดาทาของเดคอเรเตอร์

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

context.metadata

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

function tag(label: string) {
  return function (value: any, context: DecoratorContext) {
    context.metadata[context.name] = label;
  };
}

การอ่านผ่าน Symbol.metadata

หลังจากกำหนดคลาสแล้ว เมทาดาทาที่รวบรวมไว้จะพร้อมใช้งานที่ SomeClass[Symbol.metadata]

class User {
  @tag("identifier") id = 0;
  @tag("display")    name = "";
}

const meta = (User as any)[Symbol.metadata];
console.log(meta); // { id: "identifier", name: "display" }

เหตุใดจึงใช้วัตถุร่วมกัน

เนื่องจากเดคอเรเตอร์ทั้งหมดบนคลาสเขียนลงในวัตถุ metadata เดียวกัน คุณจึงสามารถสะสมข้อมูลจากเดคอเรเตอร์หลายตัวไว้ในระเบียนเดียวที่สอดคล้องกัน เพื่ออธิบายคลาสนั้น

การจัดเก็บเมทาดาทาแบบมีโครงสร้าง

ค่าเมทาดาทาสามารถมีรูปแบบใดก็ได้ รูปแบบที่พบได้บ่อยคือการเก็บระเบียนแบบซ้อนกันโดยใช้ชื่อสมาชิกเป็นคีย์

function column(type: string) {
  return function (value: any, context: ClassFieldDecoratorContext) {
    const md = context.metadata as any;
    md.columns ??= {};
    md.columns[context.name] = { type };
  };
}

เมทาดาทาระดับคลาส

เดคอเรเตอร์ระดับคลาสสามารถเขียนเมทาดาทาได้เช่นกัน เช่น ชื่อตารางที่เสริมข้อมูลคอลัมน์รายฟิลด์

function entity(table: string) {
  return function (value: Function, context: ClassDecoratorContext) {
    (context.metadata as any).table = table;
  };
}

@entity("users")
class UserEntity {
  @column("serial") id = 0;
  @column("text")   name = "";
}

การสืบทอดเมทาดาทา

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

โพลีฟิลล์ Symbol.metadata

Symbol.metadata เป็นสัญลักษณ์ที่รู้จักกันดี ในสภาพแวดล้อมที่ไม่มีสิ่งนี้ คุณต้องกำหนดโพลีฟิลล์ เพื่อให้รันไทม์สามารถแนบวัตถุที่รวบรวมไว้ได้

(Symbol as any).metadata ??= Symbol.for("Symbol.metadata");

เมทาดาทาโดยไม่ใช้ไลบรารีเมทาดาทาแบบสะท้อนกลับ

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

ตัวช่วยอ่านข้อมูลที่ใช้งานได้จริง

ตัวเข้าถึงขนาดเล็กช่วยรวมการอ่านเมทาดาทาจากคลาสใด ๆ ไว้ที่เดียว และส่งคืนวัตถุว่างเมื่อไม่พบข้อมูล

function getMeta(cls: any): Record<string, any> {
  return (cls[Symbol.metadata] as Record<string, any>) ?? {};
}

เหตุใดจึงสำคัญ

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

ตรวจสอบความเข้าใจ

ยืนยันความเข้าใจเกี่ยวกับ API เมทาดาทาของคุณ

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน

เดคอเรเตอร์เมทาดาทา APIมอบวัตถุ context.metadata ที่เดคอเรเตอร์ทุกตัวใช้ร่วมกัน และแสดงวัตถุนั้นบนคลาสผ่าน Symbol.metadata เดคอเรเตอร์สามารถสะสมเมทาดาทาที่มีโครงสร้างและสืบทอดได้โดยไม่ต้องใช้ไลบรารีภายนอก ทำให้สร้างคำอธิบายคลาสแบบประกาศที่เป็นมิตรต่อเฟรมเวิร์กได้

เริ่มต้นได้ฟรี

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

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

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

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “ข้อมูลเมทาดาทาของเดคอเรเตอร์” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ข้อมูลเมทาดาทาของเดคอเรเตอร์”

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

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

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

บทเรียน “ข้อมูลเมทาดาทาของเดคอเรเตอร์” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ TypeScript Academy