ค่าคงที่ ในภาษา 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
ให้กับมัน