TypeScript Academy · Lektion

Optional chaining med ?.

Få sikker adgang til dybt indlejrede egenskaber, der kan være null

Lektion 1 af 413 trin

Optional chaining med ?. er en gratis TypeScript Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i TypeScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. TypeScript Academy-kurset indeholder 4 lektioner i alt.

Operatoren for valgfri kædning

Valgfri kædning (?.) lader dig tilgå en egenskab sikkert, som måske findes på en værdi, der er null eller undefined. Hvis værdien mangler, kortslutter hele udtrykket til undefined i stedet for at kaste en fejl.

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

Kortslutning ved null eller undefined

Når operanden før ?. er null eller undefined, standser evalueringen straks og returnerer undefined. Resten af kæden udføres aldrig.

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

Kædning på flere niveauer

Du kan placere ?. ved hvert usikkert trin i en dyb egenskabsadgang. Ethvert led med en manglende værdi kortslutter hele kæden og beskytter dig mod fejl som 'egenskaben kan ikke læses fra undefined'.

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

Resultattypen indeholder undefined

Fordi kæden kan give undefined, tilføjer TypeScript undefined til resultattypen. Hvis egenskabstypen var string, bliver det kædede resultat string | undefined.

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

Håndtering af resultatet undefined

Da resultatet kan være undefined, kontrollerer du det typisk eller angiver en reserveværdi. Typesystemet minder dig om at håndtere det manglende tilfælde.

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

Sammenligning med &&-kæder

Før ?. skrev udviklere lange &&-kæder: a && a.b && a.b.c. Valgfri kædning udtrykker den samme hensigt langt mere kortfattet og læses fra top til bund.

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

Hvorfor ?. er bedre end &&

&&-tilgangen behandler enhver falsk værdi (0, '', false) som et sted at standse, hvilket kan være en fejl. Valgfri kædning standser kun ved null eller undefined, hvilket normalt er det, du ønsker.

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

Valgfri kædning på tabeller med objekter

Valgfri kædning fungerer ved enhver egenskabsadgang. Kombineret med elementadgang når den sikkert ind i indlejrede tabeller med objekter.

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

Kortslutning springer hele udtrykket over

Når en kæde først kortslutter, springes selv egenskabsadgange, der står efter den (uden ?.), over. Hele udtrykket evalueres på én gang til 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

Valgfri kædning med funktionsreturværdier

Du kan kæde videre fra resultatet af et funktionskald. Hvis funktionen returnerer en værdi, der er null eller undefined, kortslutter den følgende adgang sikkert.

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

Et praktisk konfigurationseksempel

Valgfri kædning er særligt nyttig ved læsning af delvise konfigurationer eller API-svar, hvor indlejrede felter kan mangle. Det holder adgangen læsbar og fri for nedbrud.

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

Hurtig afprøvning

Afprøv din forståelse af valgfri kædning.

Besvar den i den interaktive lektion

Opsummering: Valgfri kædning

Du lærte, at ?.:

giver sikker adgang til egenskaber på værdier, der muligvis er null eller undefined.
kortslutter hele udtrykket til undefined, når et led mangler.
tilføjer undefined til resultattypen.
forbedrer &&-kæder ved kun at standse ved manglende værdier og ikke ved alle falske værdier.

Dernæst ser vi på operatoren for nullsammenfald.

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

Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 101
Lektioner: 352

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Optional chaining med ?.” gratis?

Ja — hele teksten til “Optional chaining med ?.” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af TypeScript Academy-kurset, skal du opgradere til CoddyKit PRO. TypeScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Optional chaining med ?.”?

Få sikker adgang til dybt indlejrede egenskaber, der kan være null Du øver dig i TypeScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på TypeScript Academy?

Der kræves ingen tidligere erfaring. TypeScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Optional chaining med ?.”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne TypeScript Academy-lektion?

Ja. Alle TypeScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til TypeScript Academy