TypeScript Academy · บทเรียน

การเชื่อมโยงแบบเลือกได้ด้วย ?.

เข้าถึงคุณสมบัติที่ซ้อนกันลึกและอาจเป็น null ได้อย่างปลอดภัย

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

ตัวดำเนินการเชื่อมต่อแบบเลือกได้

การเชื่อมต่อแบบเลือกได้ (?.) ช่วยให้เข้าถึงคุณสมบัติที่อาจอยู่บนค่า null หรือ undefined ได้อย่างปลอดภัย หากค่าเป็นค่าว่าง นิพจน์ทั้งหมดจะหยุดประเมินและคืนค่า undefined แทนการโยนข้อผิดพลาด

type User = { profile?: { bio?: string } };
const u: User = {};
const bio = u.profile?.bio;
console.log(bio); // undefined, no crash

หยุดการประเมินเมื่อเป็นค่าว่าง

เมื่อค่าก่อนหน้า ?. เป็น null หรือ undefined การประเมินจะหยุดทันทีและคืนค่า undefined ส่วนที่เหลือของการเชื่อมต่อจะไม่ถูกเรียกใช้

const data: { value?: number } | null = null;
console.log(data?.value); // undefined, did not throw

เชื่อมต่อหลายระดับ

คุณสามารถวาง ?. ไว้ในทุกขั้นตอนที่อาจไม่แน่นอนของการเข้าถึงข้อมูลเชิงลึก หากส่วนใดส่วนหนึ่งเป็นค่าว่าง การเชื่อมต่อทั้งหมดจะหยุดทันที ช่วยป้องกันข้อผิดพลาดประเภท “ไม่สามารถอ่านคุณสมบัติจากค่าที่ไม่ได้กำหนดได้”

type Company = { ceo?: { contact?: { email?: string } } };
const c: Company = { ceo: {} };
console.log(c.ceo?.contact?.email); // undefined

ชนิดผลลัพธ์มี undefined รวมอยู่ด้วย

เนื่องจากการเชื่อมต่ออาจให้ผลเป็น undefined TypeScript จึงเพิ่ม undefined เข้าไปในชนิดผลลัพธ์ หากชนิดของคุณสมบัติเป็น string ผลลัพธ์จากการเชื่อมต่อจะเป็น string | undefined

type Settings = { theme?: { name: string } };
const s: Settings = { theme: { name: 'dark' } };
const name = s.theme?.name; // type: string | undefined
console.log(name);

จัดการผลลัพธ์ที่เป็น undefined

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

type Settings = { theme?: { name: string } };
const s: Settings = {};
const name = s.theme?.name;
if (name === undefined) console.log('using default');
else console.log(name);

เปรียบเทียบกับการเชื่อมต่อด้วย &&

ก่อนมี ?. นักพัฒนาจะเขียนการเชื่อมต่อด้วย && ที่ยาว เช่น a && a.b && a.b.c การเชื่อมต่อแบบเลือกได้สื่อเจตนาเดียวกันได้กระชับกว่ามาก และอ่านจากบนลงล่างได้ง่าย

type A = { b?: { c?: number } };
const a: A = { b: { c: 5 } };
const oldWay = a && a.b && a.b.c;
const newWay = a?.b?.c;
console.log(oldWay, newWay);

เหตุใด ?. จึงดีกว่า &&

วิธีใช้ && จะถือว่าค่าที่เป็นเท็จทุกค่า (0, '', false) เป็นจุดหยุด ซึ่งอาจทำให้เกิดข้อผิดพลาดได้ การเชื่อมต่อแบบเลือกได้จะหยุดเฉพาะเมื่อเป็น null หรือ undefined ซึ่งโดยทั่วไปเป็นสิ่งที่คุณต้องการ

type Box = { count?: number };
const b: Box = { count: 0 };
console.log(b && b.count); // 0... but && stops on falsy in longer chains
console.log(b?.count); // 0, cleanly

การเชื่อมต่อแบบเลือกได้กับอาร์เรย์ของออบเจ็กต์

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

type Team = { members?: Array<{ name: string }> };
const t: Team = { members: [{ name: 'Ada' }] };
console.log(t.members?.[0]?.name);

การหยุดทันทีจะหยุดนิพจน์ทั้งหมด

เมื่อการเชื่อมต่อหยุดการประเมินแล้ว แม้แต่การเข้าถึงคุณสมบัติที่เขียนไว้หลังจากนั้น (โดยไม่มี ?.) ก็จะถูกข้ามไป นิพจน์ทั้งหมดจะประเมินเป็น undefined ทันที

type Deep = { a?: { b: { c: number } } };
const d: Deep = {};
// a is undefined, so b.c is never evaluated
console.log(d.a?.b.c); // undefined

การเชื่อมต่อแบบเลือกได้กับค่าที่ฟังก์ชันคืน

คุณสามารถเชื่อมต่อจากผลลัพธ์ของการเรียกฟังก์ชันได้ หากฟังก์ชันคืนค่าเป็นค่าว่าง การเข้าถึงถัดไปจะหยุดอย่างปลอดภัย

function findUser(): { name: string } | null {
  return null;
}
console.log(findUser()?.name); // undefined

ตัวอย่างการตั้งค่าที่ใช้ได้จริง

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

type Response = { user?: { address?: { city?: string } } };
const res: Response = { user: { address: {} } };
console.log(res.user?.address?.city ?? 'unknown city');

ตรวจสอบอย่างรวดเร็ว

ทดสอบความเข้าใจเกี่ยวกับการเชื่อมต่อแบบเลือกได้ของคุณ

ทบทวน: การเชื่อมต่อแบบเลือกได้

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

เข้าถึงคุณสมบัติของค่าที่อาจเป็น null/undefined ได้อย่างปลอดภัย
หยุดการประเมินนิพจน์ทั้งหมดเป็น undefined เมื่อส่วนหนึ่งของการเชื่อมต่อเป็นค่าว่าง
เพิ่ม undefined เข้าไปในชนิดผลลัพธ์
ปรับปรุงการเชื่อมต่อด้วย && โดยหยุดเฉพาะเมื่อเป็นค่าว่าง ไม่ใช่ค่าที่เป็นเท็จทุกชนิด

ต่อไปคือตัวดำเนินการรวมค่าค่าว่าง

type Cfg = { db?: { host?: string } };
const c: Cfg = {};
console.log(c.db?.host);

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

บทเรียน “การเชื่อมโยงแบบเลือกได้ด้วย ?.” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การเชื่อมโยงแบบเลือกได้ด้วย ?.”

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

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

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

บทเรียน “การเชื่อมโยงแบบเลือกได้ด้วย ?.” ใช้เวลานานแค่ไหน

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

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

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

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

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