TypeScript Academy · บทเรียน

ชนิดค่าคงที่ของสตริงและตัวเลข

จำกัดค่าให้เป็นสตริงและตัวเลขที่ตรงตามที่กำหนดด้วยชนิดค่าคงที่

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

ชนิดลิเทอรัลคืออะไร

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

ชนิด 'north' อนุญาตเฉพาะสตริง 'north' เท่านั้น ไม่อนุญาตค่าอื่น ชนิดลิเทอรัลช่วยให้คุณจำลองชุดค่าที่อนุญาตซึ่งมีขอบเขตแน่นอนได้อย่างแม่นยำภายในระบบชนิด

let dir: 'north' = 'north';
console.log(dir);
// dir = 'south'; // Error: not assignable to type 'north'

ยูเนียนของลิเทอรัลสตริง

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

Direction ด้านล่างสามารถเป็นสตริงที่ตรงกันทุกประการได้เพียงหนึ่งในสี่ค่าเท่านั้น

type Direction = 'north' | 'south' | 'east' | 'west';

let heading: Direction = 'east';
console.log('Heading:', heading);

heading = 'west';
console.log('Now:', heading);

การปฏิเสธค่าที่ไม่ถูกต้อง

จุดเด่นของยูเนียนลิเทอรัลคือคอมไพเลอร์จะปฏิเสธทุกค่าที่อยู่นอกชุดที่อนุญาต การพิมพ์ผิดและตัวเลือกที่ไม่ถูกต้องจึงกลายเป็นข้อผิดพลาดขณะคอมไพล์แทนที่จะเป็นข้อผิดพลาดขณะทำงาน

type Direction = 'north' | 'south' | 'east' | 'west';

let heading: Direction = 'north';
console.log(heading);
// heading = 'up'; // Error: '"up"' is not assignable to 'Direction'

ลิเทอรัลในฐานะพารามิเตอร์ฟังก์ชัน

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

type Direction = 'north' | 'south' | 'east' | 'west';

function move(dir: Direction): string {
  return 'Moving ' + dir;
}

console.log(move('south'));
// console.log(move('left')); // Error

ชนิดลิเทอรัลตัวเลข

ชนิดลิเทอรัลไม่ได้ใช้ได้เฉพาะกับสตริงเท่านั้น คุณสามารถใช้กับตัวเลขที่ตรงกันทุกประการได้เช่นกัน ตัวอย่างคลาสสิกคือหน้าของลูกเต๋าหกหน้า ซึ่งต้องมีค่าเป็นหนึ่งใน 1 ถึง 6

type Dice = 1 | 2 | 3 | 4 | 5 | 6;

function roll(): Dice {
  return (Math.floor(Math.random() * 6) + 1) as Dice;
}

console.log('Rolled:', roll());

ลิเทอรัลตัวเลขในพารามิเตอร์

ยูเนียนลิเทอรัลตัวเลขจะจำกัดอินพุตให้อยู่ในชุดตัวเลขที่ตรงกันทุกประการ เหมาะอย่างยิ่งสำหรับระดับคุณภาพ รหัสลักษณะ HTTP หรือขนาดตาราง

type Quality = 1 | 2 | 3;

function setQuality(level: Quality): void {
  console.log('Quality set to', level);
}

setQuality(2);
// setQuality(5); // Error: 5 is not 1 | 2 | 3

การผสมลิเทอรัลสตริงและตัวเลข

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

type Size = 'small' | 'large' | 0 | 100;

function resize(s: Size): void {
  console.log('Resizing to', s);
}

resize('small');
resize(100);

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

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

type AlwaysOn = true;

let enabled: AlwaysOn = true;
console.log('Enabled:', enabled);
// enabled = false; // Error: false not assignable to true

ลิเทอรัลช่วยปรับปรุงเอกสารประกอบ

ยูเนียนลิเทอรัลทำหน้าที่เป็นเอกสารประกอบไปพร้อมกัน ใครก็ตามที่อ่าน type Status = 'idle' | 'loading' | 'done' ก็จะทราบทันทีว่ามีสถานะที่เป็นไปได้ทั้งหมดอะไรบ้าง โดยไม่ต้องคาดเดาหรือค้นหาสตริงค่าคงที่ที่กระจัดกระจายอยู่ในโค้ด

type Status = 'idle' | 'loading' | 'done';

function render(s: Status): string {
  return 'State is: ' + s;
}

console.log(render('loading'));

การรวมลิเทอรัลกับชนิดอื่น

คุณสามารถผสมชนิดลิเทอรัลกับชนิดที่กว้างกว่าในยูเนียนได้ รูปแบบที่พบบ่อยคือ 'auto' | number ซึ่งหมายถึงอาจเป็นคีย์เวิร์ดพิเศษ 'auto' หรือตัวเลขใดก็ได้

type Width = 'auto' | number;

function setWidth(w: Width): void {
  console.log('Width:', w);
}

setWidth('auto');
setWidth(320);

ลิเทอรัลในฐานะค่าคงที่ที่ตั้งชื่อ

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

type Theme = 'light' | 'dark';

const DEFAULT_THEME: Theme = 'dark';

function applyTheme(t: Theme): void {
  console.log('Applying', t, 'theme');
}

applyTheme(DEFAULT_THEME);

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับชนิดลิเทอรัล

ทบทวน: ชนิดลิเทอรัล

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

ชนิดลิเทอรัล แทนค่าหนึ่งค่าที่ตรงกันทุกประการ เช่น 'north' หรือ 6
การรวมลิเทอรัลด้วย | จะสร้างยูเนียนแบบมีขอบเขตของค่าที่อนุญาต
ชนิดเหล่านี้ใช้ได้กับสตริง ตัวเลข และบูลีน และสามารถผสมกับชนิดที่กว้างกว่า เช่น 'auto' | number
เมื่อนำไปใช้เป็นพารามิเตอร์ฟังก์ชัน ชนิดเหล่านี้จะให้คำแนะนำเติมข้อความอัตโนมัติและปฏิเสธอินพุตที่ไม่ถูกต้องขณะคอมไพล์

ถัดไป เราจะสำรวจว่า TypeScript ตัดสินใจเลือกระหว่างชนิดลิเทอรัลกับชนิดที่ถูกขยายอย่างไร

type Direction = 'north' | 'south' | 'east' | 'west';
type Dice = 1 | 2 | 3 | 4 | 5 | 6;

function describe(d: Direction, n: Dice): string {
  return 'Go ' + d + ' ' + n + ' steps';
}

console.log(describe('north', 3));

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

บทเรียน “ชนิดค่าคงที่ของสตริงและตัวเลข” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ชนิดค่าคงที่ของสตริงและตัวเลข”

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

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

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

บทเรียน “ชนิดค่าคงที่ของสตริงและตัวเลข” ใช้เวลานานแค่ไหน

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

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

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

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

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