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

การยืนยัน const และ as const

ใช้ as const เพื่ออนุมานชนิดลิเทอรัลและทูเพิลอย่างแม่นยำ

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

as const คืออะไร

as const คือการยืนยันชนิดข้อมูลที่บอกให้ TypeScript อนุมานชนิดข้อมูลค่าลิเทอรัลที่เฉพาะเจาะจงที่สุดเท่าที่เป็นไปได้สำหรับนิพจน์ และทำให้พร็อพเพอร์ตีทั้งหมดเป็น readonly

const colors = ["red", "green", "blue"] as const;
// type: readonly ["red", "green", "blue"]

ป้องกันการขยายชนิดข้อมูลด้วย as const

หากไม่มี as const ค่าสตริงในอาร์เรย์และออบเจ็กต์จะขยายเป็น string แต่เมื่อใช้แล้ว ค่าดังกล่าวจะคงชนิดข้อมูลตามตัวอักษรไว้

const dir1 = { direction: "left" };
// dir1.direction: string

const dir2 = { direction: "left" } as const;
// dir2.direction: "left"

as const กับค่าลิเทอรัลของออบเจ็กต์

พร็อพเพอร์ตีทุกรายการของออบเจ็กต์ที่ใช้ as const จะกลายเป็น readonly และคงชนิดข้อมูลตามตัวอักษรไว้แบบเรียกซ้ำ

const theme = {
  color: "dark",
  sizes: { sm: 8, md: 16 },
} as const;
// theme.color: "dark", theme.sizes.sm: 8 (all readonly)

as const สำหรับชนิดข้อมูลทูเพิล

อาร์เรย์ที่ใช้ as const จะกลายเป็นทูเพิล readonly ที่มีชนิดข้อมูลตามตัวอักษรของสมาชิกแต่ละรายการ ซึ่งมีประโยชน์สำหรับกำหนดรายการอาร์กิวเมนต์คงที่

const args = [1, "hello", true] as const;
// type: readonly [1, "hello", true]

การสร้างชนิดข้อมูลยูเนียนจาก as const

รูปแบบที่ใช้บ่อยคือกำหนดอาร์เรย์ค่าด้วย as const แล้วสร้างชนิดข้อมูลยูเนียนจากอาร์เรย์นั้นโดยใช้ typeof และการเข้าถึงด้วยดัชนี

const STATUSES = ["pending", "active", "done"] as const;
type Status = typeof STATUSES[number];
// type Status = "pending" | "active" | "done"

as const ในอาร์กิวเมนต์ของฟังก์ชัน

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

function setMode(mode: "dark" | "light") {}
setMode("dark" as const); // safe, preserves literal

การเรียกซ้ำของ Readonly

as const ใช้ Readonly แบบเรียกซ้ำ ออบเจ็กต์และอาร์เรย์ที่ซ้อนกันทั้งหมดจะกลายเป็น readonly ซึ่งป้องกันการเปลี่ยนแปลงในระดับลึก

const config = { db: { host: "localhost", port: 5432 } } as const;
// config.db.port = 5433; // Error: readonly

as const เทียบกับ Object.freeze

as const เป็นการยืนยันขณะคอมไพล์ จึงไม่มีการป้องกันขณะทำงาน ส่วน Object.freeze ทำงานขณะทำงาน ทั้งสองอย่างมีบทบาทเสริมกัน

const obj = Object.freeze({ x: 1 }); // runtime immutability
const obj2 = { x: 1 } as const;      // compile-time literal types

การยืนยันค่าคงที่เทียบกับคำอธิบายชนิดข้อมูล

คำอธิบายชนิดข้อมูลทำให้ชนิดข้อมูลกว้างขึ้น: const x: string = "hi" ได้ชนิดข้อมูลเป็น string ส่วน as const จะทำให้แคบลง: const x = "hi" as const ได้ชนิดข้อมูลเป็น "hi"

const a: string = "hi"; // type: string
const b = "hi" as const; // type: "hi"

การใช้งานจริง: ออบเจ็กต์ลักษณะเดียวกับ Enum

โค้ดจำนวนมากใช้ออบเจ็กต์ as const เป็นทางเลือกแทน enum เพื่อหลีกเลี่ยงข้อผิดพลาดของ enum พร้อมยังคงความปลอดภัยของชนิดข้อมูลไว้

const Direction = { Up: "UP", Down: "DOWN" } as const;
type Direction = typeof Direction[keyof typeof Direction];
// "UP" | "DOWN"

สรุป: as const

as const ทำให้ TypeScript อนุมานชนิดข้อมูลลิเทอรัล และถือว่าคุณสมบัติทั้งหมดเป็นแบบอ่านอย่างเดียว สิ่งนี้จำเป็นสำหรับการสร้างชนิดข้อมูลยูเนียนที่แม่นยำจากอาร์เรย์และการสร้างออบเจ็กต์การกำหนดค่าที่ปลอดภัย

ตรวจสอบอย่างรวดเร็ว

as const ทำอะไรกับอาร์เรย์

สิ่งที่คุณได้เรียนรู้

as const เป็นเครื่องมือทรงพลังสำหรับตรึงชนิดข้อมูลลิเทอรัล การสร้างโครงสร้างแบบอ่านอย่างเดียว และการสร้างชนิดข้อมูลยูเนียนที่แม่นยำจากอาร์เรย์ สิ่งนี้เป็นพื้นฐานสำคัญของรูปแบบ TypeScript ขั้นสูง

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

บทเรียน “การยืนยัน const และ as const” ฟรีหรือไม่

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

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

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

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

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

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

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

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

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

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

  1. กลไกการขยายและจำกัดชนิดให้แคบลง
  2. การระบุชนิดตามบริบท: การอนุมานจากบริบท
  3. ความใหม่และการตรวจสอบพร็อพเพอร์ตีส่วนเกิน
  4. การยืนยัน const และ as const
← กลับไปที่ TypeScript Academy