รูปแบบการใช้ satisfies ในทางปฏิบัติ

ตรวจสอบความถูกต้องของชุดสี

type Color = "red" | "green" | "blue";
const palette = {
  primary: "blue",
  secondary: "green"
} satisfies Record<string, Color>;
console.log(palette.primary);

ตรวจจับค่าของ palette ที่ไม่ถูกต้อง

type Color = "red" | "green" | "blue";
// const bad = { primary: "purple" } satisfies Record<string, Color>; // Error
const ok = { primary: "red" } satisfies Record<string, Color>;
console.log(ok.primary);

คงการเติมข้อความอัตโนมัติสำหรับคีย์

type Color = "red" | "green" | "blue";
const palette = { primary: "red", accent: "blue" } satisfies Record<string, Color>;
// palette.<autocomplete: primary, accent>
console.log(palette.accent);

ตรวจสอบความถูกต้องของแผนที่เส้นทาง

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

การใช้ดัชนีในแผนที่

type Route = { method: string; path: string };
const routes = {
  home: { method: "GET", path: "/" },
  about: { method: "GET", path: "/about" }
} satisfies Record<string, Route>;
type RouteName = keyof typeof routes; // "home" | "about"
const pick: RouteName = "about";
console.log(routes[pick].path);

config ที่มีค่าหลายรูปแบบและมีชนิดกำกับ

type Setting = number | boolean | string;
const config = {
  retries: 3,
  verbose: true,
  region: "eu"
} satisfies Record<string, Setting>;
console.log(config.retries, config.verbose);

ตารางค้นหาแบบคล้ายอีนัม

type Status = "active" | "inactive";
const userStatus = {
  alice: "active",
  bob: "inactive"
} satisfies Record<string, Status>;
const s: "active" = userStatus.alice;
console.log(s);

ใช้คู่กับ as const

type Color = "red" | "blue";
const theme = {
  primary: "red",
  secondary: "blue"
} as const satisfies Record<string, Color>;
console.log(theme.primary);

ตรวจสอบช่วงตัวเลขด้วยชนิด

type Level = 1 | 2 | 3;
const levels = {
  easy: 1,
  medium: 2,
  hard: 3
} satisfies Record<string, Level>;
console.log(levels.hard);

แผนที่แฟล็กฟีเจอร์

const flags = {
  newDashboard: true,
  betaSearch: false
} satisfies Record<string, boolean>;
type Flag = keyof typeof flags;
const f: Flag = "betaSearch";
console.log(flags[f]);

เหตุใดรูปแบบนี้จึงโดดเด่น

type Color = "red" | "green" | "blue";
const ui = { brand: "green", warn: "red" } satisfies Record<string, Color>;
console.log(Object.keys(ui).join(","));

ตรวจสอบความเข้าใจอย่างรวดเร็ว: satisfies ในทางปฏิบัติ

ทบทวน: รูปแบบ satisfies ในทางปฏิบัติ

type Color = "red" | "blue";
const theme = { bg: "blue", fg: "red" } satisfies Record<string, Color>;
console.log(theme.bg, theme.fg);