TypeScript Academy · Lektion

Optional chaining med ?.

Få säker åtkomst till djupt nästlade egenskaper som kan vara null.

Lektion 1 av 413 steg

Optional chaining med ?. är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 1 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.

Operatorn för optional chaining

Optional chaining (?.) låter er komma åt en egenskap på ett säkert sätt när värdet kan vara null eller undefined. Om värdet är nullish avbryts hela uttrycket och blir undefined i stället för att kasta ett fel.

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

Kortslutning vid nullish-värden

När operanden före ?. är null eller undefined stoppas utvärderingen omedelbart och returnerar undefined. Resten av kedjan körs aldrig.

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

Kedja flera nivåer

Ni kan placera ?. vid varje osäker del i en djup åtkomst. Varje nullish-länk kortsluter hela kedjan och skyddar er mot fel som ”kan inte läsa egenskapen för undefined”.

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

Resultattypen innehåller undefined

Eftersom kedjan kan ge undefined lägger TypeScript till undefined i resultattypen. Om egenskapens typ var string blir det kedjade resultatet string | undefined.

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

Hantera resultatet undefined

Eftersom resultatet kan vara undefined behöver ni vanligtvis kontrollera det eller ange ett reservvärde. Typsystemet påminner er om att hantera fallet där värdet saknas.

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

Jämförelse med &&-kedjor

Innan ?. skrev utvecklare långa &&-kedjor: a && a.b && a.b.c. Optional chaining uttrycker samma avsikt mycket mer koncist och är lättare att läsa uppifrån och ned.

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

Varför ?. är bättre än &&

&&-metoden behandlar alla falsy-värden (0, '', false) som en stoppunkt, vilket kan vara en bugg. Optional chaining stoppar endast vid null eller undefined, vilket vanligtvis är det ni vill.

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

Optional chaining för arrayer av objekt

Optional chaining fungerar vid all åtkomst till egenskaper. Tillsammans med elementåtkomst når den säkert in i nästlade arrayer av objekt.

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

Kortslutning stoppar hela uttrycket

När en kedja kortsluts hoppas även egenskapsåtkomster som skrivs efter den (utan ?.) över. Hela uttrycket utvärderas omedelbart till 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

Optional chaining med returvärden från funktioner

Ni kan fortsätta kedjan från resultatet av ett funktionsanrop. Om funktionen returnerar ett nullish-värde kortsluts den efterföljande åtkomsten på ett säkert sätt.

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

Ett praktiskt konfigurationsexempel

Optional chaining är särskilt användbart när ni läser delar av en konfiguration eller API-svar där nästlade fält kan saknas. Det gör åtkomsten lättläst och förhindrar krascher.

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

Snabbtest

Testa er förståelse av optional chaining.

Besvara frågan i den interaktiva lektionen

Repetition: optional chaining

Ni har lärt er att ?.:

Kommer åt egenskaper på ett säkert sätt när värden kan vara null eller undefined.
Kortsluter hela uttrycket till undefined när en länk är nullish.
Lägger till undefined i resultattypen.
Förbättrar &&-kedjor genom att endast stoppa vid nullish-värden, inte vid alla falsy-värden.

Härnäst: operatorn för nullish coalescing.

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

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 ”Optional chaining med ?.” gratis?

Ja – hela texten till ”Optional chaining med ?.” 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 ”Optional chaining med ?.”?

Få säker åtkomst till djupt nästlade egenskaper som kan vara null. 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 1 av 4.

Hur lång tid tar lektionen ”Optional chaining med ?.”?

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