การใช้ Optional Chaining ใน TypeScript
ในบทความนี้ เราจะอธิบายเกี่ยวกับการใช้ Optional Chaining ใน TypeScript
YouTube Video
การใช้ Optional Chaining ใน TypeScript
Optional chaining ใน TypeScript เป็นฟีเจอร์ที่มีประโยชน์สำหรับการเข้าถึงคุณสมบัติของอ็อบเจกต์หรืออาร์เรย์ที่ซ้อนลึก ฟีเจอร์นี้ช่วยป้องกันข้อผิดพลาดในการเข้าถึงคุณสมบัติที่ไม่มีอยู่ และช่วยให้คุณเขียนโค้ดที่กระชับและอ่านง่าย
Optional Chaining คืออะไร?
ตัวดำเนินการ optional chaining (?.) จะคืนค่า undefined เมื่อเข้าถึงคุณสมบัติหรือเมธอดของอ็อบเจกต์ที่ไม่มีอยู่ สิ่งนี้ช่วยให้โค้ดยังสามารถทำงานต่อไปได้โดยไม่เกิดข้อผิดพลาดหากคุณสมบัตินั้นไม่มีอยู่
ตัวอย่างเช่น เมื่อเข้าถึงคุณสมบัติของอ็อบเจกต์ที่ซ้อนกันดังแสดงด้านล่าง จะเกิดข้อผิดพลาดหากคุณสมบัตินั้นไม่มีอยู่เมื่อใช้วิธีทั่วไป
ตัวอย่าง
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13// Normal access
14console.log(user.address.postalCode); // Error: Cannot read property 'postalCode' of undefined
- ในกรณีนี้ จะเกิดข้อผิดพลาดหากไม่มี
addressสามารถใช้ optional chaining เพื่อป้องกันเหตุการณ์นี้ได้
ตัวอย่างการใช้ optional chaining
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13console.log(user.address?.postalCode); // undefined
- การใช้ optional chaining จะหลีกเลี่ยงข้อผิดพลาดและคืนค่า
undefinedแทนเมื่อคุณสมบัติไม่อยู่
วิธีการใช้ Optional Chaining
สามารถใช้ optional chaining ได้ในหลายสถานการณ์ เช่น การเข้าถึงคุณสมบัติ การเรียกฟังก์ชัน และการเข้าถึงอาร์เรย์ เราจะอธิบายวิธีการใช้แต่ละอย่าง
การเข้าถึงคุณสมบัติ
คุณสามารถเข้าถึงคุณสมบัติที่ซ้อนกันของอ็อบเจกต์ได้อย่างปลอดภัย
1interface Company {
2 name: string;
3 location?: {
4 city?: string;
5 country?: string;
6 };
7}
8
9const company: Company = {
10 name: 'Tech Corp',
11 location: {
12 city: 'New York'
13 }
14};
15
16console.log(company.location?.city); // 'New York'
17console.log(company.location?.country); // undefined
โค้ดนี้ใช้ optional chaining เพื่อเข้าถึงพร็อพเพอร์ตี้ city และ country เฉพาะเมื่อพร็อพเพอร์ตี้ location มีอยู่ในอ็อบเจ็กต์ company
การเรียกฟังก์ชัน
optional chaining ยังสามารถตรวจสอบการมีอยู่ของฟังก์ชันก่อนที่จะทำการเรียกใช้งาน
1interface User {
2 name?: string;
3 greet?: () => void;
4}
5
6const user: User = {
7 name: 'Bob',
8 // greet is undefined
9};
10
11// Check if the function exists before calling it
12user.greet?.(); // The call is not made, and no error occurs
โค้ดนี้ใช้ optional chaining เพื่อเรียกฟังก์ชัน greet อย่างปลอดภัย เฉพาะเมื่อฟังก์ชันนั้นมีอยู่จริง จะไม่เกิดข้อผิดพลาดขึ้น แม้ว่าฟังก์ชันจะไม่ได้ถูกกำหนดไว้
การเข้าถึงอาร์เรย์
optional chaining สามารถใช้กับอาร์เรย์เพื่อตรวจสอบการมีอยู่ขององค์ประกอบ
1interface Team {
2 members?: string[];
3}
4
5const team: Team = {
6 members: ['Alice', 'Bob', 'Charlie']
7};
8
9console.log(team.members?.[0]); // 'Alice'
10console.log(team.members?.[5]); // undefined
โค้ดนี้เข้าถึงสมาชิกของอาเรย์เฉพาะเมื่อ team.members มีอยู่ โดยจะคืนค่าของดัชนีที่มีอยู่ และคืนค่า undefined ถ้าดัชนีนั้นไม่มีในอาเรย์
การใช้ Optional Chaining ร่วมกับ Nullish Coalescing Operator
Optional chaining จะคืนค่า undefined แต่บางครั้งสิ่งนี้อาจไม่เพียงพอ ในกรณีนี้ nullish coalescing operator (??) ซึ่งถูกนำมาใช้ใน TypeScript 3.7 สามารถใช้กำหนดค่าตั้งต้นเมื่อค่าคือ null หรือ undefined
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Carol'
11};
12
13// Use 'Unknown' as the default value if name does not exist
14const userName = user.name ?? 'Unknown';
15
16console.log(userName); // 'Carol'
เมื่อใช้ร่วมกับ optional chaining คุณสามารถเขียนโค้ดที่ยืดหยุ่นมากขึ้นได้
1console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
ข้อควรระวังเมื่อใช้ Optional Chaining
เมื่อใช้ optional chaining ควรคำนึงถึงประเด็นต่อไปนี้:
-
การใช้ optional chaining โดยไม่จำเป็น
- การใช้ optional chaining กับพร็อพเพอร์ตี้หรือเมธอดที่มีอยู่อย่างแน่นอน อาจทำให้โค้ดยาวโดยไม่จำเป็น ควรใช้งานเฉพาะในกรณีที่ไม่แน่ใจว่าทarget ที่เข้าถึงนั้นมีอยู่หรือไม่
-
ข้อผิดพลาดจากการพิมพ์
- การใช้ optional chaining มากเกินไปอาจทำให้สังเกตข้อผิดพลาดจากการพิมพ์ได้ยากขึ้น ซึ่งจะทำให้เข้าถึงพร็อพเพอร์ตี้ที่ไม่ได้ตั้งใจ ตรวจสอบประเภทให้ถูกต้องและใช้งานอย่างระมัดระวัง
สรุปโค้ด
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice',
11 address: {
12 city: 'Tokyo'
13 }
14};
15
16// Example of optional chaining
17console.log(user.address?.city); // 'Tokyo'
18console.log(user.address?.postalCode); // undefined
19
20// Using optional chaining combined with nullish coalescing
21console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
สรุป
Optional chaining ใน TypeScript ช่วยทำให้โค้ดกระชับและลดข้อผิดพลาดเมื่อเข้าถึง object หรือ array ที่มีการซ้อนลึก นอกจากนี้ การใช้ร่วมกับ nullish coalescing operator ยังช่วยให้คุณสามารถกำหนดค่าตั้งต้นและสร้างลอจิกที่ยืดหยุ่นมากขึ้น เมื่อใช้อย่างเหมาะสม มันสามารถปรับปรุงความปลอดภัยและความอ่านง่ายของโค้ดได้อย่างมาก
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย