ชนิดลิเทอรัล

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

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

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

ตัวอย่าง:

ภารกิจ: ประกาศตัวแปรด้วยชนิดลิเทอรัล แล้วกำหนดค่าที่ถูกต้องและไม่ถูกต้องให้ตัวแปรนั้น

let answer: "yes" | "no";
answer = "yes"; 
// Valid
// answer = "maybe"; 
// Error: Type '"maybe"' is not assignable to type '"yes" | "no"'.

ชนิดลิเทอรัลแบบสตริง

ชนิดลิเทอรัลแบบสตริงจะจำกัดตัวแปรให้อยู่ในชุดค่าสตริงที่กำหนดไว้โดยเฉพาะ ตัวอย่าง:

ภารกิจ: สร้างชนิดข้อมูลสำหรับทิศทางต่าง ๆ และกำหนดค่าให้กับตัวแปร

type Direction = "up" | "down" | "left" | "right";

let move: Direction;
move = "up"; // Valid
// move = "forward"; 
// Error: Type '"forward"' is not assignable to type '"up" | "down" | "left" | "right"'.

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

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

ภารกิจ: กำหนดชนิดลิเทอรัลแบบตัวเลขสำหรับการทอยลูกเต๋าและทดสอบชนิดดังกล่าว

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

let roll: DiceRoll;
roll = 4; // Valid
// roll = 7; 
// Error: Type '7' is not assignable to type '1 | 2 | 3 | 4 | 5 | 6'.

ชนิดลิเทอรัลในฟังก์ชัน

คุณสามารถใช้ชนิดลิเทอรัลกับพารามิเตอร์ของฟังก์ชัน เพื่อให้ฟังก์ชันรับได้เฉพาะค่าที่กำหนดไว้ ตัวอย่าง:

ภารกิจ: เขียนฟังก์ชันที่มีพารามิเตอร์ซึ่งใช้ชนิดลิเทอรัล

function setStatus(status: "active" | "inactive"): void {
  console.log(`The status is now ${status}`);
}

setStatus("active"); 
// Output: The status is now active
// setStatus("pending"); 
// Error: Type '"pending"' is not assignable to type '"active" | "inactive"'.

ชนิดลิเทอรัลและชื่อแทนชนิดข้อมูล

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

ภารกิจ: สร้างชื่อแทนชนิดข้อมูลสำหรับสีของไฟจราจรและนำไปใช้กับตัวแปร

type TrafficLight = "red" | "yellow" | "green";

let light: TrafficLight = "red";
console.log(light);
 // Output: red

การใช้ชนิดลิเทอรัลกับออบเจ็กต์

คุณสามารถใช้ชนิดลิเทอรัลภายในออบเจ็กต์ เพื่อจำกัดค่าของคุณสมบัติเฉพาะได้ ตัวอย่าง:

ภารกิจ: สร้างชนิดข้อมูลของออบเจ็กต์ที่มีคุณสมบัติหนึ่งรายการซึ่งใช้ชนิดลิเทอรัล

type Button = {
  label: string;
  size: "small" | "medium" | "large";
};

let submitButton: Button = {
  label: "Submit",
  size: "medium",
};

console.log(submitButton);

ข้อผิดพลาดที่พบบ่อย

ต่อไปนี้คือข้อผิดพลาดที่พบบ่อยเมื่อใช้ชนิดลิเทอรัล:

• ลืมปรับปรุงค่าที่อนุญาตทั้งหมดเมื่อแก้ไขชนิดลิเทอรัล
• กำหนดค่าที่ไม่ได้รวมอยู่ในชนิดลิเทอรัล (TypeScript จะตรวจพบข้อผิดพลาดนี้)
• ใช้ชนิดลิเทอรัลกับข้อมูลที่เปลี่ยนแปลงได้มาก ซึ่งความยืดหยุ่นสำคัญกว่า

เคล็ดลับ: ใช้ชนิดลิเทอรัลกับสถานการณ์ที่ควบคุมได้และคาดเดาได้!

ทำได้ยอดเยี่ยม!

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