الاستدعاءات الاختيارية والوصول إلى العناصر

ما بعد الوصول إلى الخاصية

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

استدعاءات الأساليب الاختيارية

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

أين تضع ?.؟

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

استدعاء دوال الاستدعاء الراجعة الاختيارية

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

الوصول الاختياري إلى العناصر

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?.());

التسلسل الاختياري مع نتائج الدوال

function getHandler(): (() => string) | undefined {
  return undefined;
}
console.log(getHandler()?.()); // 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'));

اختبار سريع

مراجعة: الاستدعاءات والوصول الاختياريان

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