0Pricing
TypeScript Academy · บทเรียน

satisfies เทียบกับการยืนยันด้วย as

เหตุใด satisfies จึงปลอดภัยกว่าการแปลงชนิดด้วย as

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

as ทำหน้าที่อะไร

การยืนยันด้วย as บอกคอมไพเลอร์ให้ เชื่อคุณ เกี่ยวกับชนิดหนึ่ง การยืนยันนี้ไม่ได้ตรวจสอบว่าค่าตรงกับชนิดจริงหรือไม่ แต่เพียงแทนที่ชนิดที่อนุมานได้

const value = { color: "red" } as { color: string; size: number };
// No error even though size is missing!
console.log(value.color);

as ข้ามกลไกความปลอดภัย

เนื่องจาก as ข้ามการตรวจสอบความถูกต้อง จึงอาจซ่อนข้อผิดพลาดจริงได้ ออบเจกต์ด้านบนขาด size แต่ TypeScript ยังคงไม่แจ้งอะไร

type Config = { color: string; size: number };
const broken = { color: "red" } as Config;
// broken.size is typed number but is actually undefined at runtime
console.log(broken.size); // undefined

satisfies ตรวจสอบความถูกต้องแทน

การแทนที่ as ด้วย satisfies จะเปลี่ยนข้อผิดพลาดที่เคยเงียบให้เป็นข้อผิดพลาดขณะคอมไพล์ที่ชัดเจน เพราะออบเจกต์ต้องตรงกับชนิดนั้นจริง ๆ

type Config = { color: string; size: number };
// const c = { color: "red" } satisfies Config; // Error: size missing
const c = { color: "red", size: 10 } satisfies Config;
console.log(c.size);

as สามารถบังคับชนิดที่ไม่ถูกต้องได้

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

const n = "hello" as unknown as number;
// n is typed number but is actually a string
console.log(typeof n); // "string"

satisfies ไม่บิดเบือนค่าที่แท้จริง

ต่างจาก as ตรงที่ satisfies ไม่สามารถใช้เพื่ออ้างว่าค่าเป็นชนิดที่เข้ากันไม่ได้ได้ โอเปอเรเตอร์นี้เพียงยืนยันว่าค่านั้นตรงกับชนิดอยู่แล้ว

// const x = "hello" satisfies number; // Error: string not assignable to number
const y = 42 satisfies number;
console.log(y);

as ทำให้การตรวจสอบพร็อพเพอร์ตีส่วนเกินหายไป

เมื่อใช้ as คีย์ส่วนเกินหรือคีย์ที่สะกดผิดจะเล็ดลอดผ่านไปได้ ส่วน satisfies ยังคงทำเครื่องหมายคีย์เหล่านั้นและช่วยจับคำสะกดผิด

type Config = { mode: string };
const withAs = { mdoe: "dark" } as Config;   // typo passes silently
// const withSat = { mdoe: "dark" } satisfies Config; // Error: mdoe
console.log(JSON.stringify(withAs));

เมื่อใดจึงควรใช้ as

as มีการใช้งานที่ถูกต้อง เช่น การจำกัดชนิดของ unknown ให้แคบลงหลังการตรวจสอบขณะรันไทม์ หรือการทำงานกับ DOM แต่สำหรับออบเจกต์ config ควรเลือกใช้ satisfies

const data: unknown = JSON.parse("{ }");
// After your own runtime validation, as can express the result.
const obj = data as Record<string, unknown>;
console.log(typeof obj);

เลือกใช้ satisfies สำหรับ config

สำหรับการกำหนดค่า แผนที่เส้นทาง และ palette, satisfies ให้ทั้งการตรวจสอบความถูกต้องและการอนุมานที่แม่นยำ ส่วน as ไม่ให้ทั้งการตรวจสอบความถูกต้องและการรับประกันใด ๆ

type Palette = Record<string, string>;
const safe = { primary: "blue", accent: "gold" } satisfies Palette;
console.log(safe.primary);

as const แตกต่างออกไป

อย่าสับสนระหว่าง as const กับการยืนยันชนิด as const จะจำกัดค่าให้เป็นลิเทอรัลและทำให้สิ่งต่าง ๆ เปลี่ยนแปลงไม่ได้ จึงปลอดภัยและมักใช้คู่กับ satisfies

type Nums = readonly number[];
const xs = [1, 2, 3] as const satisfies Nums;
console.log(xs[0]);

สรุปความเสี่ยง

as: แทนที่การตัดสินใจของคอมไพเลอร์ ไม่ตรวจสอบ และอาจซ่อนข้อผิดพลาด satisfies: ทำงานร่วมกับคอมไพเลอร์ ตรวจสอบอย่างครบถ้วน และรักษาการอนุมานไว้ โดยค่าเริ่มต้นควรเลือก satisfies

type Config = { level: number };
// const risky = {} as Config; // compiles, level is undefined
const safe = { level: 1 } satisfies Config;
console.log(safe.level);

ปรับโครงสร้างจาก as เป็น satisfies

นิสัยที่ดีคือ เมื่อเห็น as SomeObjectType กับค่าลิเทอรัลที่คุณควบคุมได้ ให้ลองเปลี่ยนเป็น satisfies แล้วแก้ข้อผิดพลาดที่ปรากฏ

type Config = { url: string; retries: number };
// Before: const c = { url: "/api" } as Config;
const c = { url: "/api", retries: 3 } satisfies Config;
console.log(c.url, c.retries);

ตรวจสอบความเข้าใจอย่างรวดเร็ว: satisfies กับ as

ทดสอบความเข้าใจของคุณเกี่ยวกับ satisfies และ as

ทบทวน: satisfies กับการยืนยันด้วย as

คุณได้เรียนรู้ว่า as ข้ามการตรวจสอบและอาจซ่อนข้อผิดพลาด ขณะที่ satisfies ตรวจสอบความถูกต้องของค่าและคงการอนุมานที่แม่นยำไว้ ควรเลือกใช้ satisfies กับออบเจกต์ config ที่คุณควบคุม

type Config = { color: string; size: number };
const c = { color: "red", size: 10 } satisfies Config;
console.log(c.color, c.size);

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

บทเรียน “satisfies เทียบกับการยืนยันด้วย as” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “satisfies เทียบกับการยืนยันด้วย as”

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

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

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

บทเรียน “satisfies เทียบกับการยืนยันด้วย as” ใช้เวลานานแค่ไหน

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

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

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

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

  1. เหตุใดจึงมี satisfies
  2. satisfies เทียบกับคำอธิบายชนิดข้อมูล
  3. satisfies เทียบกับการยืนยันด้วย as
  4. รูปแบบการใช้ satisfies ในทางปฏิบัติ
← กลับไปที่ TypeScript Academy