TypeScript Academy · บทเรียน

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

ใช้ ?.() และ ?.[] เพื่อเรียกเมธอดและเข้าถึงดัชนีอย่างปลอดภัย

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

นอกเหนือจากการเข้าถึงคุณสมบัติ

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

type Obj = { greet?: () => string };
const o: Obj = {};
console.log(o.greet?.()); // undefined, no crash

การเรียกเมธอดแบบเลือกได้

ใช้ obj.method?.() เพื่อเรียกเมธอดเมื่อมีเมธอดนั้นอยู่เท่านั้น หาก method เป็น null หรือ undefined การเรียกจะถูกข้าม และนิพจน์จะให้ค่าเป็น undefined

type Logger = { log?: (m: string) => void };
const silent: Logger = {};
silent.log?.('hello'); // skipped, no error
console.log('continued safely');

ควรวาง ?. ไว้ที่ใด

?. ต้องอยู่ก่อนวงเล็บของการเรียกโดยตรง obj.method?.() จะตรวจสอบ เมธอด ไม่ใช่ obj หากต้องการป้องกัน obj ด้วย ให้เขียน obj?.method?.()

type Api = { send?: (x: number) => number };
const api: Api | null = null;
console.log(api?.send?.(5)); // undefined; guards both api and send

การเรียกฟังก์ชันเรียกกลับแบบเลือกได้

การใช้งานที่พบบ่อยมากคือการเรียกใช้พารามิเตอร์ฟังก์ชันเรียกกลับที่อาจไม่มีค่า แทนที่จะตรวจสอบด้วย if ให้เขียน callback?.() เพื่อเรียกใช้เฉพาะเมื่อมีการส่งมาให้

function run(onDone?: () => void): void {
  console.log('working...');
  onDone?.(); // call only if passed
}
run();
run(() => console.log('finished'));

การเข้าถึงสมาชิกแบบเลือกได้

สำหรับอาร์เรย์หรือลายเซ็นดัชนีที่อาจเป็น null หรือ undefined ให้ใช้ arr?.[index] หาก arr ไม่มีค่า การเข้าถึงจะหยุดการทำงานต่อ แต่หากมีค่า ก็จะอ่านสมาชิกตามปกติ

const list: string[] | undefined = undefined;
console.log(list?.[0]); // undefined, no crash

การเข้าถึงสมาชิกด้วยคีย์แบบไดนามิก

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

type Dict = { [key: string]: number };
const data: Dict | null = { a: 1, b: 2 };
const key = 'a';
console.log(data?.[key]); // 1

การรวมการเข้าถึงสมาชิกและการเรียก

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

type Handlers = Array<{ fire?: () => string }>;
const hs: Handlers | undefined = [{ fire: () => 'boom' }];
console.log(hs?.[0]?.fire?.());

การเชื่อมโยงแบบเลือกได้กับผลลัพธ์ของฟังก์ชัน

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

function getHandler(): (() => string) | undefined {
  return undefined;
}
console.log(getHandler()?.()); // undefined

ชนิดผลลัพธ์รวมค่าที่ไม่ได้กำหนด

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

type Obj = { compute?: () => number };
const o: Obj = {};
const value = o.compute?.() ?? 0;
console.log(value);

การป้องกันตัวจัดการเหตุการณ์

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

type Props = { onClick?: (id: number) => void };
function click(p: Props, id: number): void {
  p.onClick?.(id); // safe if onClick is missing
}
click({ onClick: (id) => console.log('clicked', id) }, 7);
click({}, 8);

ตัวอย่างตัวกระจายงานปลั๊กอิน

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

type Hooks = { [name: string]: (() => string) | undefined };
const hooks: Hooks = { save: () => 'saved' };
function fire(name: string): string {
  return hooks[name]?.() ?? 'no handler';
}
console.log(fire('save'), fire('delete'));

แบบทดสอบสั้นๆ

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

สรุป: การเรียกและการเข้าถึงแบบเลือกได้

คุณได้เรียนรู้รูปแบบอื่นๆ ของการเชื่อมโยงแบบเลือกได้:

obj.method?.() เรียกเมธอดเฉพาะเมื่อมีเมธอดนั้นอยู่
arr?.[index] อ่านสมาชิกจากคอนเทนเนอร์ที่อาจไม่มีค่าได้อย่างปลอดภัย
ทุกรูปแบบจะหยุดการทำงานต่อและให้ค่าเป็น undefined เมื่อค่าที่ใช้ไม่มีค่า
ใช้ร่วมกับ ?? เพื่อกำหนดค่าเริ่มต้นให้ผลลัพธ์

หลักสูตรถัดไป: readonly และพื้นฐานความไม่เปลี่ยนแปลง

type Cfg = { init?: () => void };
const c: Cfg = {};
c.init?.();
console.log('ran safely');

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

บทเรียน “การเรียกและการเข้าถึงสมาชิกแบบเลือกได้” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การเรียกและการเข้าถึงสมาชิกแบบเลือกได้”

ใช้ ?.() และ ?.[] เพื่อเรียกเมธอดและเข้าถึงดัชนีอย่างปลอดภัย คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “การเรียกและการเข้าถึงสมาชิกแบบเลือกได้” ใช้เวลานานแค่ไหน

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

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

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

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

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