เหตุใดจึงมี satisfies

เป้าหมายสองประการที่ขัดแย้งกัน

type Color = "red" | "green" | "blue";
// We want both: check the values AND remember exactly which ones.

การระบุชนิดทำให้การจำกัดค่าลิเทอรัลหายไป

type Config = { color: string; retries: number };
const cfg: Config = { color: "red", retries: 3 };
// cfg.color is string, not "red" anymore.
console.log(cfg.color.toUpperCase());

เหตุใดการขยายชนิดจึงเป็นปัญหา

const cfg = { color: "red" } as { color: string };
// const exact: "red" = cfg.color; // Error: string not assignable to "red"
console.log(cfg.color);

ไม่ระบุชนิดทำให้การตรวจสอบความถูกต้องหายไป

const cfg = { color: "rad", retries: 3 };
// No error on the typo "rad" because nothing validates it.
console.log(cfg.color);

ช่องว่างในการตรวจสอบความถูกต้อง

const palette = { primary: "blu" }; // typo, no error
console.log(palette.primary); // "blu"

ทำความรู้จักโอเปอเรเตอร์ satisfies

type Config = { color: string; retries: number };
const cfg = { color: "red", retries: 3 } satisfies Config;
console.log(cfg.color); // type is "red", value validated

satisfies รักษาค่าลิเทอรัลไว้

type Config = { color: string };
const cfg = { color: "red" } satisfies Config;
const exact: "red" = cfg.color; // OK
console.log(exact);

satisfies ยังคงตรวจสอบความถูกต้อง

type Config = { retries: number };
// const bad = { retries: "three" } satisfies Config; // Error
const good = { retries: 3 } satisfies Config;
console.log(good.retries);

ตัวอย่างที่เป็นแรงจูงใจ

type Routes = Record<string, { method: "GET" | "POST" }>;
const routes = {
  home: { method: "GET" },
  submit: { method: "POST" }
} satisfies Routes;
console.log(routes.home.method); // "GET" literal

เปรียบเทียบสามแนวทาง

type C = { color: string };
const a: C = { color: "red" };          // widened
const b = { color: "red" };             // unvalidated
const c = { color: "red" } satisfies C; // validated + precise
console.log(a.color, b.color, c.color);

ควรเลือกใช้ satisfies เมื่อใด

type Sizes = Record<string, number>;
const sizes = { sm: 8, md: 16, lg: 24 } satisfies Sizes;
// keys "sm" | "md" | "lg" stay known for autocomplete
console.log(sizes.md);

ตรวจสอบความเข้าใจอย่างรวดเร็ว: เหตุใดจึงมี satisfies

ทบทวน: เหตุใดจึงมี satisfies

type C = { color: string };
const c = { color: "blue" } satisfies C;
const exact: "blue" = c.color;
console.log(exact);