TypeScript Academy · Lektion

Valfria anrop och elementåtkomst

Använd ?.() och ?.[] för säkra metodanrop och indexering.

Lektion 4 av 413 steg

Valfria anrop och elementåtkomst är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Mer än egenskapsåtkomst

Optional chaining är inte begränsad till obj?.prop. Den har ytterligare två former: valfria anrop med ?.() och valfri elementåtkomst med ?.[index]. Båda kortsluter vid nullish-värden, precis som egenskapsåtkomst.

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

Valfria metodanrop

Använd obj.method?.() för att anropa en metod endast om den finns. Om method är null eller undefined hoppas anropet över och uttrycket ger undefined.

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

Var ?. ska placeras

?. placeras precis före anropsparenteserna. obj.method?.() kontrollerar method, inte obj. Om ni även vill skydda obj skriver ni obj?.method?.().

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

Anropa valfria callback-funktioner

Ett mycket vanligt användningsområde är att anropa en valfri callback-parameter. I stället för en if-kontroll skriver ni callback?.() för att anropa den endast när den har angetts.

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

Valfri elementåtkomst

För arrayer eller indexsignaturer som kan vara nullish använder ni arr?.[index]. Om arr är nullish kortsluts åtkomsten. Annars läses elementet som vanligt.

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

Elementåtkomst med dynamiska nycklar

Valfri elementåtkomst fungerar även med hakparenteser för dynamiska eller beräknade nycklar på ett objekt som kan vara nullish.

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

Kombinera elementåtkomst och anrop

Ni kan blanda formerna fritt. Gå in i en valfri array och anropa sedan eventuellt en metod på elementet — varje ?. skyddar sitt eget steg.

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

Optional chaining med funktionsresultat

Ni kan kedja vidare från vad en funktion än returnerar. Om funktionen returnerar ett nullish-värde kortsluts efterföljande anrop eller åtkomster på ett säkert sätt.

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

Resultattypen innehåller undefined

Precis som vid egenskapskedjor lägger valfria anrop och valfri elementåtkomst till undefined i resultattypen. Kombinera dem med ?? för att ange ett standardvärde och ta bort undefined.

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

Skydda händelsehanterare

I användargränssnitts- och händelsekod kan ni elegant anropa hanterare som kanske inte har angetts med valfria anrop. Ingen utförlig existenskontroll behövs, och inget fel uppstår när hanteraren saknas.

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);

Exempel på en plugin-dispatcher

Här kombineras delarna: en dispatcher som eventuellt anropar en namngiven plugin-hook från ett register som kan innehålla luckor och använder ett standardvärde när inget hanterar anropet.

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'));

Snabbtest

Testa er förståelse av valfria anrop och elementåtkomst.

Besvara frågan i den interaktiva lektionen

Sammanfattning: Valfria anrop och åtkomster

Ni har lärt er de andra formerna av optional chaining:

obj.method?.() anropar en metod endast om den finns.
arr?.[index] läser säkert ett element från en behållare som kan vara nullish.
Alla former kortsluter till undefined när operandens värde är nullish.
Kombinera dem med ?? för att ange ett standardvärde för resultatet.

Nästa kurs: grunderna i readonly och oföränderlighet.

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

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 101
Lektioner: 352

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Valfria anrop och elementåtkomst” gratis?

Ja – hela texten till ”Valfria anrop och elementåtkomst” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Valfria anrop och elementåtkomst”?

Använd ?.() och ?.[] för säkra metodanrop och indexering. Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?

Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Valfria anrop och elementåtkomst”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?

Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till TypeScript Academy