ค่าคงที่ ในภาษา TypeScript

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

• ค่าคงที่คืออะไร
• การประกาศค่าคงที่
• ค่าคงที่กับออบเจ็ค

ค่าคงที่คืออะไร

ค่าคงที่ (Constant) คือตัวแปรที่ไม่สามารถเปลี่ยนแปลงค่าได้หลังจากที่มันถูกประกาศและกำหนดค่าไปแล้ว นั่นหมายความว่าตัวแปรที่เป็นค่าคงที่จะมีได้เพียงค่าเดียวตลอดการทำงานของโปรแกรม การประกาศค่าคงที่ในภาษา TypeScript สามารถทำได้โดยใช้คำสั่ง const นี่เป็นรูปแบบการใช้งาน

const name: type = value;

ในการประกาศค่าคงที่จะใช้คำสั่ง const ตามด้วยชื่อของค่าคงที่สามารถเป็นตัวอักษร (a-z, A-Z) ตัวเลข (0-9) และเครื่องหมาย Underscore (_) ตามด้วยประเภทข้อมูล type และค่าที่ต้องการกำหนดให้กับค่าคงที่ใน value

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

การประกาศค่าคงที่

ค่าคงที่มักจะใช้สำหรับเก็บค่าที่เป็นค่าเดียวตลอดทั้งโปรแกรมหรือค่าที่ต้องมีการใช้งานบ่อยๆ เช่น ค่าการตั้งค่าสำหรับโปรแกรม หรือค่าเฉพาะทางบางอย่าง เป็นต้น นี่เป็นตัวอย่างของการประกาศค่าคงที่สำหรับเก็บข้อมูลของโปรเจ็คหนึ่งในการเขียนโปรแกรม

const PROJECT_NAME: string = "MarcusCode";
const PROJECT_VERSION: number = 1;

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

เมื่อค่าคงที่ถูกประกาศและกำหนดค่าไปแล้ว มันจะไม่สามารถเปลี่ยนแปลงเป็นค่าใหม่ได้ นี่เป็นตัวอย่างของโค้ดที่พยายามจะเปลี่ยนค่าของค่าคงที่เป็นค่าใหม่

PROJECT_NAME = "New Name";

และนี่เป็นข้อผิดพลาดที่เกิดขึ้นเมื่อรันโปรแกรม

Cannot assign to 'PROJECT_NAME' because it is a constant.

คำอธิบายนั้นชัดเจนเนื่องจากตัวแปรเป็นค่าคงที่ ดังนั้นมันไม่สามารถเปลี่ยนแปลงเป็นค่าใหม่ได้ กล่าวคือทุกตัวดำเนินการที่ส่งผลต่อการเปลี่ยนแปลงค่าในตัวแปรจะไม่สามารถใช้ได้ เช่น ตัวดำเนินการกำหนดค่า = หรือตัวดำเนินการเพิ่มและลดค่า ++ หรือ -- เป็นต้น

PROJECT_VERSION++;

นี่จะทำให้เราได้รับข้อผิดพลาดเช่นเดียวกัน

Cannot assign to 'PROJECT_VERSION' because it is a constant.

นี่เป็นตัวอย่างการใช้งานค่าคงที่ซึ่งเป็นโปรแกรมคำนวณหาส่วนประกอบต่างๆ ของวงกลมจากรัศมีของมัน

const PI: number = 3.14;
const UNIT: string = "cm";
let radius: number = 5;

console.log(`A circle with radius of ${radius} ${UNIT} will have`);
console.log(`Circumstance = ${2 * PI * radius} ${UNIT}`);
console.log(`Area of circle = ${PI * Math.pow(radius, 2)} sq ${UNIT}`);
console.log(`Volume of sphere  = ${4 / 3 * PI * Math.pow(radius, 3)} cubic ${UNIT}`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

A circle with radius of 5 cm will have
Circumstance = 31.400000000000002 cm
Area of circle = 78.5 sq cm
Volume of sphere  = 523.3333333333334 cubic cm

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

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

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

ค่าคงที่กับออบเจ็ค

การประกาศค่าคงที่ด้วยคำสั่ง const ทำให้ตัวแปรไม่สามารถเปลี่ยนแปลงค่าโดยไม่สำคัญว่าตัวแปรจะเก็บข้อมูลเป็นอะไร นี่เป็นการประกาศค่าคงที่สำหรับเก็บออบเจ็ค เนื่องจากเราไม่ต้องการให้ตัวแปรนี้ถูกเปลี่ยนแปลงค่าได้

const config = {
    name: "MarcusCode",
    version: 1
};

และอย่างที่ทราบ เราไม่สามารถเปลี่ยนแปลงค่าของตัวแปร config เป็นค่าใหม่ได้หลังจากที่มันถูกกำหนดค่าไปแล้ว

// Error
config = {
    id: 1,
    name: "Metin"
};

// Error
config = "New value";

// Error
config = null;

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

Cannot assign to 'config' because it is a constant.

การประกาศค่าคงที่ด้วยคำสั่ง const ป้องกันเพียงการเปลี่ยนแปลงค่าในตัวแปรเท่านั้น ในกรณีที่ค่าของตัวแปรเป็นออบเจ็ค มันไม่ได้ป้องกันการเปลี่ยนค่าของ Property บนออบเจ็ค ลองมาดูการทำงานในตัวอย่างนี้

const config = {
    name: "MarcusCode",
    version: 1
};

config.name = "New name";
config.version = 2;

console.log(config);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

{ name: 'New name', version: 2 }

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

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

type configType = {
    readonly name: string,
    readonly version: number
};

const config: configType = {
    name: "MarcusCode",
    version: 1
};

config.name = "New name";
config.version = 2;

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Cannot assign to 'name' because it is a read-only property.
Cannot assign to 'version' because it is a read-only property.

เนื่องจากในตอนนี้เราพยายามเปลี่ยนแปลงค่า Property ที่ถูกกำหนดให้สามารถอ่านค่าได้อย่างเดียว ดังนั้นโปรแกรมแสดงข้อผิดพลาดเหมือนกับที่เห็นในตัวอย่าง การทำให้ Property บนออบเจ็คสามารถอ่านค่าได้อย่างเดียว เราต้องประกาศประเภทข้อมูลของออบเจ็คด้วยคำสั่ง type และกำหนดตัวเลือก readonly ให้กับแต่ละ Property ที่ต้องการให้อ่านได้อย่างเดียว

หรืออีกวิธีหนึ่งในการทำให้ Property ของออบเจ็คอ่านค่าได้อย่างเดียวคือการใช้งานเมธอด Object.freeze กับออบเจ็คที่ต้องการ นี่จะส่งค่ากลับเป็นออบเจ็คใหม่ที่มีเนื้อหาเหมือนเดิม และทำให้ Property บนออบเจ็คทั้งหมดไม่สามารถเปลี่ยนค่าได้ นี่เป็นตัวอย่าง

const config = Object.freeze({
    name: "MarcusCode",
    version: 1
});

วิธีนี้จะแตกต่างกับการประกาศประเภทข้อมูลของออบเจ็คด้วยคำสั่ง type ที่สามารถควบคุมคุณสมบัติในแต่ล่ะ Property ได้

ในบทนี้ คุณได้เรียนรู้เกี่ยบกับค่าคงที่ในภาษา TypeScript เราได้พูดถึงการประกาศและใช้งานค่าคงที่ และการกำหนด Property บนออบเจ็คให้สามารถอ่านค่าได้เพียงอย่างเดียวด้วยการกำหนดตัวเลือก readonly ให้กับมัน