TypeScript Academy · บทเรียน

การรวม ?. และ ??

ใช้การเชื่อมโยงแบบเลือกได้คู่กับค่าเริ่มต้นที่เหมาะสม

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

การจับคู่ที่ลงตัว

การเข้าถึงแบบเลือกได้และการรวมค่าเมื่อไม่มีค่าถูกออกแบบมาให้ทำงานร่วมกัน รูปแบบ obj?.value ?? fallback จะอ่านค่าที่ซ้อนอยู่ได้อย่างปลอดภัย และให้ค่าทดแทนหากไม่พบค่า นี่คือสำนวนที่มีประโยชน์อย่างมากใน TypeScript สมัยใหม่

type User = { profile?: { name?: string } };
const u: User = {};
const name = u.profile?.name ?? 'Anonymous';
console.log(name);

รูปแบบนี้ทำงานอย่างไร

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

type Cfg = { server?: { port?: number } };
const cfg: Cfg = { server: {} };
const port = cfg.server?.port ?? 8080;
console.log(port);

ชนิดข้อมูลของผลลัพธ์

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

type Cfg = { timeout?: number };
const cfg: Cfg = {};
const timeout: number = cfg.timeout ?? 30;
console.log(timeout + 5); // number, safe arithmetic

การคงค่าที่เป็นเท็จแต่ถูกต้องไว้

เนื่องจาก ?? จะทำงานเฉพาะเมื่อเป็นค่าว่างหรือไม่มีค่า ค่า 0 ที่ได้จากการเชื่อมโยงจึงยังคงอยู่ ค่าทดแทนจะถูกใช้เฉพาะเมื่อไม่มีพร็อพเพอร์ตีดังกล่าวจริง ๆ

type Audio = { settings?: { volume?: number } };
const a: Audio = { settings: { volume: 0 } };
console.log(a.settings?.volume ?? 50); // 0, not 50

การเข้าถึงการตั้งค่าที่ซ้อนกันลึก

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

type Cfg = { db?: { pool?: { max?: number } } };
const cfg: Cfg = { db: {} };
const maxPool = cfg.db?.pool?.max ?? 10;
console.log(maxPool);

ค่าเริ่มต้นสำหรับการตอบกลับจากส่วนติดต่อโปรแกรมประยุกต์

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

type Res = { data?: { items?: string[] } };
const res: Res = { data: {} };
const items = res.data?.items ?? [];
console.log('Item count:', items.length);

การใช้ร่วมกับผลลัพธ์ของเมธอด

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

type Store = { find?: () => string | undefined };
const store: Store = { find: () => undefined };
const result = store.find?.() ?? 'default';
console.log(result);

การหลีกเลี่ยงการตรวจสอบที่ยืดยาว

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

type User = { name?: string };
const u: User = {};
// Old: let n; if (u && u.name) n = u.name; else n = 'Guest';
const n = u?.name ?? 'Guest';
console.log(n);

ใช้การค้นหาอื่นเป็นค่าทดแทน

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

type Prefs = { theme?: string };
const userPrefs: Prefs = {};
const sitePrefs: Prefs = { theme: 'light' };
const theme = userPrefs?.theme ?? sitePrefs?.theme ?? 'dark';
console.log(theme);

การใช้ร่วมกับการเข้าถึงสมาชิก

รูปแบบนี้ใช้กับการเข้าถึงสมาชิกในอาร์เรย์ได้เช่นกัน โดยอ่านสมาชิกผ่าน ?.[i] และกำหนดค่าทดแทนด้วย ??

type Data = { tags?: string[] };
const d: Data = { tags: [] };
const first = d.tags?.[0] ?? 'none';
console.log(first);

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

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

type Settings = { ui?: { lang?: string } };
function getLang(s: Settings): string {
  return s.ui?.lang ?? 'en';
}
console.log(getLang({ ui: { lang: 'tr' } }), getLang({}));

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

ทดสอบความเข้าใจของคุณเกี่ยวกับการใช้ ?. และ ?? ร่วมกัน

สรุป: การใช้ ?. และ ?? ร่วมกัน

คุณได้เรียนรู้สำนวน obj?.value ?? fallback:

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

ถัดไปคือการเรียกใช้แบบเลือกได้และการเข้าถึงสมาชิกแบบเลือกได้

type Cfg = { limit?: number };
const c: Cfg = {};
const limit = c?.limit ?? 100;
console.log(limit);

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

บทเรียน “การรวม ?. และ ??” ฟรีหรือไม่

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

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

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

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

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

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

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

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

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

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

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