การกำหนดชนิดข้อมูลให้แผนผังเหตุการณ์

แผนผังเหตุการณ์คืออะไร

interface Events {
  login: { userId: string };
  logout: void;
}
// "login" carries a payload; "logout" carries none.

การจับคู่ชื่อกับข้อมูลประกอบ

interface Events {
  message: { text: string; from: string };
  typing: { userId: string };
}
const sample: Events["message"] = { text: "hi", from: "ada" };
console.log(sample.text, sample.from);

เหตุการณ์ที่ไม่มีข้อมูลประกอบ

interface Events {
  open: void;
  close: void;
}
// Handlers for these receive no meaningful argument.
console.log("payloadless events use void");

การแยกชนิดข้อมูลชื่อเหตุการณ์

interface Events {
  login: { userId: string };
  logout: void;
}
type EventName = keyof Events; // "login" | "logout"
const e: EventName = "login";
console.log(e);

การค้นหาชนิดข้อมูลประกอบเหตุการณ์

interface Events {
  login: { userId: string };
  logout: void;
}
type LoginPayload = Events["login"]; // { userId: string }
const p: LoginPayload = { userId: "u1" };
console.log(p.userId);

แผนผังเหตุการณ์ที่สมบูรณ์ยิ่งขึ้น

interface Events {
  cartAdd: { productId: string; qty: number };
  cartRemove: { productId: string };
  checkout: { total: number };
}
const a: Events["cartAdd"] = { productId: "p1", qty: 2 };
console.log(a.productId, a.qty);

ข้อมูลประกอบสามารถเป็นยูเนียนได้

interface Events {
  status:
    | { kind: "online" }
    | { kind: "offline"; since: number };
}
const s: Events["status"] = { kind: "offline", since: 100 };
console.log(s.kind);

การนำชนิดข้อมูลประกอบกลับมาใช้ใหม่

type User = { id: string; name: string };
interface Events {
  userCreated: User;
  userDeleted: { id: string };
}
const u: Events["userCreated"] = { id: "1", name: "Ada" };
console.log(u.name);

เหตุผลที่แผนผังดีกว่าสตริงที่ไม่มีการตรวจสอบ

// Loose: emit("login", { usrId: "x" }) typo unnoticed, payload any
// Mapped: the interface forces the correct name and payload shape.
console.log("the map is the contract");

แผนผังเป็นตัวขับเคลื่อนส่วนเชื่อมต่อโปรแกรม

interface Events {
  login: { userId: string };
  logout: void;
}
type Name = keyof Events;
type PayloadOf<K extends Name> = Events[K];
const id: PayloadOf<"login"> = { userId: "u" };
console.log(id.userId);

แหล่งข้อมูลจริงเพียงแห่งเดียว

interface Events {
  ping: { at: number };
}
const p: Events["ping"] = { at: Date.now() };
console.log(typeof p.at);

ตรวจสอบความเข้าใจอย่างรวดเร็ว: แผนผังเหตุการณ์

สรุป: การกำหนดชนิดข้อมูลให้แผนผังเหตุการณ์

interface Events { login: { userId: string }; logout: void }
type Name = keyof Events;
const n: Name = "logout";
console.log(n);