Enum และ const assertion: ทางเลือกสมัยใหม่

เข้าใจข้อจำกัดของ enum และสร้าง type ของคุณจากค่าคงที่ที่ถูกแช่แข็งด้วย as const

7 นาที · 3 คำถาม

enum เป็นส่วนหนึ่งของภาษามาตั้งแต่ยุคแรก ๆ และคุณจะพบมันในโค้ดเบสจำนวนมาก มันจัดกลุ่มค่าคงที่ที่มีชื่อไว้ภายใต้ type เดียว ใช้ได้ทั้งในฐานะค่าและในฐานะ annotation

enum Role {
  User = "USER",
  Admin = "ADMIN",
}

function canDelete(role: Role): boolean {
  return role === Role.Admin;
}

แต่ระบบนิเวศสมัยใหม่กำลังเคลื่อนออกห่างจากมัน enum เป็นไวยากรณ์ที่ไม่มีอยู่ใน JavaScript: คอมไพเลอร์จะปล่อย object ออกมาขณะรันไทม์ ซึ่งทำให้เครื่องมือบางอย่างซับซ้อนขึ้น และเข้ากันไม่ได้กับออปชัน erasableSyntaxOnly ทางเลือกคือ: object ธรรมดาที่แช่แข็งด้วย as const ซึ่งคุณจะสร้าง (derive) type ออกมาจากมัน

const ROLES = {
  User: "USER",
  Admin: "ADMIN",
} as const;

type Role = (typeof ROLES)[keyof typeof ROLES];

function canDelete(role: Role): boolean {
  return role === ROLES.Admin;
}

as const ยังใช้ได้กับ array ด้วย: แต่ละสมาชิกกลายเป็น literal แบบอ่านอย่างเดียว และ (typeof SIZES)[number] จะสร้าง union ของค่าออกมา แหล่งความจริงเพียงหนึ่งเดียวป้อนให้ทั้งโค้ดที่กำลังรันและ type

const SIZES = ["sm", "md", "lg"] as const;

type Size = (typeof SIZES)[number];

function isSize(value: string): value is Size {
  return (SIZES as readonly string[]).includes(value);
}

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. ความแตกต่างสำคัญข้อใดที่แยก enum ออกจาก object ที่แช่แข็งด้วย as const?
   • enum เป็นไวยากรณ์เฉพาะของ TypeScript ที่สร้างโค้ดขึ้นมา ในขณะที่ object แบบ as const ยังคงเป็น JavaScript ธรรมดา
   • object แบบ as const ช้ากว่าขณะรันไทม์
   • enum บรรจุได้เฉพาะตัวเลขเท่านั้น
2. as const สร้างอะไรออกมาเมื่อนำไปใช้กับ array ['sm', 'md']?
   • string[]
   • tuple แบบอ่านอย่างเดียวของ literal type
   • array ที่แก้ไขได้แบบ Array<'sm' | 'md'>
   • compile error
3. คุณจะได้ union ของค่าจาก object ROLES ที่แช่แข็งด้วย as const ได้อย่างไร?
   • keyof typeof ROLES
   • (typeof ROLES)[keyof typeof ROLES]
   • typeof ROLES