TypeScript Academy · บทเรียน

การยืนยัน const ด้วย as const

ทำให้ออบเจ็กต์และอาร์เรย์เป็นชนิดค่าคงที่แบบ readonly อย่างลึก

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

การยืนยันด้วย as const

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

const point = { x: 10, y: 20 } as const;
// type: { readonly x: 10; readonly y: 20 }
console.log(point.x, point.y);

เมื่อไม่มี as const

หากไม่มีการยืนยัน พร็อพเพอร์ตีของอ็อบเจ็กต์จะถูกขยายชนิด { x: 10 } จะอนุมานเป็น x: number และสามารถเปลี่ยนค่าได้ ลองเปรียบเทียบกับฉากก่อนหน้าเพื่อดูว่า as const เปลี่ยนแปลงอะไรบ้าง

const a = { x: 10 };       // x: number, mutable
const b = { x: 10 } as const; // x: 10, readonly
a.x = 99; // allowed
console.log(a.x, b.x);

ตรึงพร็อพเพอร์ตีให้เป็นลิเทอรัล

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

const config = {
  env: 'production',
  retries: 3
} as const;
// env: 'production', retries: 3
console.log(config.env, config.retries);

readonly ป้องกันการเปลี่ยนแปลง

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

const settings = { mode: 'dark' } as const;
console.log(settings.mode);
// settings.mode = 'light'; // Error: readonly property

การยืนยันแบบ const กับอาร์เรย์

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

const colors = ['red', 'green', 'blue'] as const;
// type: readonly ['red', 'green', 'blue']
console.log(colors[0], colors.length);

อาร์เรย์แบบอ่านอย่างเดียวไม่สามารถเปลี่ยนแปลงได้

ทูเพิลแบบอ่านอย่างเดียวจะไม่ยอมรับเมธอดที่เปลี่ยนแปลงข้อมูล เช่น push หรือการกำหนดค่าผ่านดัชนี ข้อมูลจึงถูกล็อกไว้ ซึ่งเหมาะอย่างยิ่งกับตารางค้นหาค่าที่มีขนาดคงที่

const days = ['Mon', 'Tue', 'Wed'] as const;
console.log(days.join(', '));
// days.push('Thu'); // Error: push does not exist on readonly tuple

สร้างยูเนียนด้วย typeof arr[number]

รูปแบบที่ทรงพลังคือ ใช้อาร์เรย์แบบ readonly แล้วสร้างยูเนียนของชนิดสมาชิกด้วย typeof arr[number] คุณเขียนค่าไว้เพียงครั้งเดียว แล้วจะได้ยูเนียนลิเทอรัลโดยอัตโนมัติ

const ROLES = ['admin', 'editor', 'viewer'] as const;
type Role = typeof ROLES[number];
// 'admin' | 'editor' | 'viewer'
const r: Role = 'editor';
console.log(r);

แหล่งข้อมูลจริงเพียงแหล่งเดียว

วิธีนี้ช่วยให้อาร์เรย์ขณะทำงานกับชนิดข้อมูลสอดคล้องกันอยู่เสมอ เมื่อเพิ่มค่าในอาร์เรย์ ยูเนียนก็จะอัปเดตโดยอัตโนมัติ ไม่ต้องดูแลรายการซ้ำกันหลายชุด

const SIZES = ['S', 'M', 'L', 'XL'] as const;
type Size = typeof SIZES[number];

function pick(s: Size): void {
  console.log('Picked', s);
}
pick('M');

การยืนยันแบบ const กับทูเพิล

สำหรับทูเพิลที่ชนิดของสมาชิกแตกต่างกัน as const จะรักษาทั้งชนิดที่แน่นอนและลำดับของสมาชิกไว้ ทำให้ได้ทูเพิลแบบอ่านอย่างเดียวที่แม่นยำ

const pair = [1, 'one'] as const;
// type: readonly [1, 'one']
console.log(pair[0], pair[1]);

การทำให้เป็นแบบอ่านอย่างเดียวโดยทั่วถึง

as const มีผลแบบ ลึก อ็อบเจ็กต์และอาร์เรย์ที่อยู่ภายในจะกลายเป็นแบบอ่านอย่างเดียวพร้อมชนิดลิเทอรัลต่อเนื่องลงไปจนถึงระดับลึกสุด

const data = {
  name: 'app',
  tags: ['a', 'b']
} as const;
// tags is readonly ['a', 'b']
console.log(data.name, data.tags[1]);

การยืนยันแบบ const สำหรับ enum

อ็อบเจ็กต์แบบ const ที่ใช้ร่วมกับยูเนียนซึ่งสร้างจากค่าต่าง ๆ เป็นทางเลือกที่เรียบง่ายกว่า enum คุณจะได้ค่าลิเทอรัลขณะทำงานและชนิดที่แน่นอน โดยไม่มีโค้ดที่ถูกสร้างเพิ่ม

const Status = {
  Idle: 'idle',
  Active: 'active'
} as const;
type Status = typeof Status[keyof typeof Status];
const s: Status = Status.Active;
console.log(s);

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจเรื่องการยืนยันแบบ const

ทบทวน: as const

คุณได้เรียนรู้ว่า as const จะ:

อนุมานชนิดลิเทอรัลที่เฉพาะเจาะจงที่สุดและเป็น readonly อย่างลึก
เปลี่ยนพร็อพเพอร์ตีของอ็อบเจ็กต์ให้เป็นฟิลด์ลิเทอรัลแบบอ่านอย่างเดียว
เปลี่ยนอาร์เรย์ให้เป็น ทูเพิลแบบอ่านอย่างเดียว ที่ประกอบด้วยลิเทอรัล
ช่วยให้สร้างยูเนียนผ่าน typeof arr[number] โดยทำให้ค่าและชนิดสอดคล้องกัน

ต่อไป เราจะรวมลิเทอรัลเข้าด้วยกันเป็นยูเนียนที่สื่อความหมายได้ชัดเจน

const LEVELS = ['low', 'mid', 'high'] as const;
type Level = typeof LEVELS[number];
const chosen: Level = 'mid';
console.log(chosen);

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

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

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

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

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

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

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

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

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

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

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

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

← กลับไปที่ TypeScript Academy