TypeScript Academy · บทเรียน

ค่าคงที่บูลีนและการอนุมานค่าคงที่

ทำความเข้าใจว่า TypeScript ขยายหรือจำกัดการอนุมานค่าคงที่อย่างไร

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

ชนิดลิเทอรัลบูลีน

ชนิด boolean แท้จริงแล้วคือยูเนียน true | false โดยแต่ละค่านั้นเป็นชนิดลิเทอรัลบูลีน ซึ่งเป็นชนิดที่อนุญาตให้มีค่าบูลีนเฉพาะหนึ่งค่าเท่านั้น

let yes: true = true;
let no: false = false;
console.log(yes, no);
// yes = false; // Error: false not assignable to true

ลิเทอรัลบูลีนในยูเนียน

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

type Result =
  | { ok: true; value: number }
  | { ok: false; error: string };

const r: Result = { ok: true, value: 42 };
console.log(r);

การขยายชนิด

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

const exact = 'hello'; // type: 'hello' (literal)
let broad = 'hello';   // type: string (widened)
console.log(exact, broad);

let ขยายเป็นชนิดทั่วไป

เนื่องจากสามารถกำหนดค่าใหม่ให้ตัวแปร let ได้ TypeScript จึงอนุมานเป็นชนิดทั่วไป เพื่อให้รองรับการกำหนดค่าในอนาคต สตริงของ let จึงเริ่มต้นเป็น string ไม่ใช่ลิเทอรัล

let mood = 'happy'; // inferred as string
mood = 'sad';       // allowed
mood = 'tired';     // allowed
console.log(mood);

const คงลิเทอรัลไว้

ไม่สามารถกำหนดค่าใหม่ให้ const ได้ TypeScript จึงอนุมานเป็นชนิดที่เฉพาะเจาะจงที่สุด ซึ่งก็คือลิเทอรัล นี่เป็นเหตุผลที่ const greeting = 'hi' มีชนิดเป็น 'hi' ไม่ใช่ string

const greeting = 'hi'; // type: 'hi'

type Greeting = typeof greeting; // 'hi'
const other: Greeting = 'hi';
console.log(other);

การขยายชนิดกับตัวเลขและบูลีน

กฎเดียวกันนี้ใช้กับตัวเลขและบูลีนด้วย const จะคง 42 หรือ true ไว้เป็นลิเทอรัล ส่วน let จะขยายเป็น number หรือ boolean

const n = 42;   // type: 42
const b = true; // type: true
let m = 42;     // type: number
let c = true;   // type: boolean
console.log(n, b, m, c);

เหตุผลที่มีการขยายชนิด

การขยายชนิดช่วยให้โค้ดทั่วไปใช้งานได้สะดวก หาก let count = 0 ทุกตัวถูกกำหนดชนิดเป็นลิเทอรัล 0 คุณก็จะเพิ่มค่าให้มันไม่ได้ การขยายชนิดจึงทำให้ตัวแปรที่กำหนดค่าใหม่ได้ทำงานอย่างเป็นธรรมชาติ

let count = 0; // widened to number
count = count + 1;
count = 10;
console.log('Count:', count);

บังคับให้เป็นลิเทอรัลด้วยการระบุชนิด

บางครั้งคุณต้องการให้ let ยังคงเป็นลิเทอรัล ให้เพิ่มการระบุชนิดลิเทอรัลอย่างชัดเจน แล้ว TypeScript จะคงชนิดให้แคบไว้ พร้อมยังอนุญาตให้กำหนดค่าใหม่ภายในยูเนียนนั้นได้

let status: 'on' | 'off' = 'on';
status = 'off'; // allowed
console.log(status);
// status = 'paused'; // Error

การขยายชนิดในคุณสมบัติของอ็อบเจ็กต์

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

const config = { mode: 'dark' };
// config.mode has type string, not 'dark'
config.mode = 'light';
console.log(config.mode);

การอนุมานลิเทอรัลกับฟังก์ชัน

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

function getMode(): 'dark' | 'light' {
  return 'dark';
}

const m = getMode(); // type: 'dark' | 'light'
console.log(m);

การเลือกระหว่างชนิดลิเทอรัลกับชนิดทั่วไป

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

const KEY = 'apiUrl';     // literal 'apiUrl'
let retries = 3;          // number
let level: 'low' | 'high' = 'low'; // pinned literal
console.log(KEY, retries, level);

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

ทดสอบความเข้าใจเรื่องการขยายชนิดและการอนุมานชนิดลิเทอรัล

ทบทวน: การอนุมานชนิดลิเทอรัล

ประเด็นสำคัญ:

true และ false เป็นชนิดลิเทอรัล ส่วน boolean เท่ากับ true | false
let จะขยายเป็นชนิดทั่วไป (string, number, boolean)
const จะคงชนิดลิเทอรัลที่แน่นอนไว้
ระบุชนิดลิเทอรัลเพื่อกำหนดให้ let ใช้ยูเนียนแบบแคบ

ต่อไป เราจะระบุความไม่เปลี่ยนแปลงอย่างชัดเจนด้วย as const

const literal = 'fixed'; // 'fixed'
let widened = 'fixed';   // string
let pinned: 'a' | 'b' = 'a';
console.log(literal, widened, pinned);

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

บทเรียน “ค่าคงที่บูลีนและการอนุมานค่าคงที่” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ค่าคงที่บูลีนและการอนุมานค่าคงที่”

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

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

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

บทเรียน “ค่าคงที่บูลีนและการอนุมานค่าคงที่” ใช้เวลานานแค่ไหน

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

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

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

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

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