Valgfri Kædning i TypeScript

I denne artikel forklarer vi valgfri kædning i TypeScript.

YouTube Video

Valgfri Kædning i TypeScript

Valgfri kædning i TypeScript er en nyttig funktion til at få adgang til egenskaber i dybt indlejrede objekter eller arrays. Denne funktion forhindrer fejl ved adgang til ikke-eksisterende egenskaber, hvilket gør det muligt at skrive kortfattet og læsbar kode.

Hvad er Valgfri Kædning?

Den valgfrie kædningsoperator (?.) returnerer undefined, når der tilgås en objekt-egenskab eller metode, der ikke eksisterer. Dette gør det muligt for koden at fortsætte uden at kaste en fejl, hvis egenskaben ikke eksisterer.

For eksempel, når der tilgås egenskaber i et indlejret objekt som vist nedenfor, opstår der en fejl, hvis egenskaben ikke eksisterer ved brug af den sædvanlige metode.

Eksempel

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice'
11};
12
13// Normal access
14console.log(user.address.postalCode); // Error: Cannot read property 'postalCode' of undefined

• I dette tilfælde vil der opstå en fejl, hvis address ikke eksisterer. Valgfri kædning kan bruges til at forhindre dette.

Eksempel på brug af optional chaining

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice'
11};
12
13console.log(user.address?.postalCode); // undefined

• Brugen af valgfri kædning undgår fejl og returnerer i stedet undefined, når egenskaber ikke eksisterer.

Hvordan Man Bruger Valgfri Kædning

Valgfri kædning kan bruges i forskellige scenarier, såsom adgang til egenskaber, funktionskald og array-adgang. Vi vil forklare, hvordan man bruger hver af disse.

Adgang til Egenskaber

Du kan sikkert tilgå indlejrede egenskaber i objekter.

 1interface Company {
 2    name: string;
 3    location?: {
 4        city?: string;
 5        country?: string;
 6    };
 7}
 8
 9const company: Company = {
10    name: 'Tech Corp',
11    location: {
12        city: 'New York'
13    }
14};
15
16console.log(company.location?.city); // 'New York'
17console.log(company.location?.country); // undefined

Denne kode bruger valgfri kædning til kun at få adgang til city og country-egenskaberne, hvis location-egenskaben findes på company-objektet.

Funktionskald

Valgfri kædning kan også tjekke for eksistensen af en funktion, før den kaldes.

 1interface User {
 2    name?: string;
 3    greet?: () => void;
 4}
 5
 6const user: User = {
 7    name: 'Bob',
 8    // greet is undefined
 9};
10
11// Check if the function exists before calling it
12user.greet?.(); // The call is not made, and no error occurs

Denne kode bruger valgfri kædning til sikkert at kalde greet-funktionen, men kun hvis den findes. Ingen fejl opstår, selv hvis funktionen ikke er defineret.

Array-adgang

Valgfri kædning kan anvendes til arrays for at tjekke, om elementer eksisterer.

 1interface Team {
 2    members?: string[];
 3}
 4
 5const team: Team = {
 6    members: ['Alice', 'Bob', 'Charlie']
 7};
 8
 9console.log(team.members?.[0]); // 'Alice'
10console.log(team.members?.[5]); // undefined

Denne kode tilgår array-elementer kun hvis team.members findes, og returnerer værdien for eksisterende indeks og undefined for ikke-eksisterende.

Valgfri kædning og den nullish sammenfletningsoperator

Valgfri kædning returnerer undefined, men nogle gange er dette ikke tilstrækkeligt. I dette tilfælde kan nullish sammenfletningsoperatoren (??), introduceret i TypeScript 3.7, bruges til at angive standardværdier for null eller undefined.

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Carol'
11};
12
13// Use 'Unknown' as the default value if name does not exist
14const userName = user.name ?? 'Unknown';
15
16console.log(userName); // 'Carol'

Når det kombineres med optional chaining, kan du skrive endnu mere fleksibel kode.

1console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'

Forsigtighed ved brug af optional chaining

Når du bruger valgfri kædning, er det vigtigt at huske følgende punkter:.

• Unødvendig brug af valgfri kædning

  • At bruge valgfri kædning på egenskaber eller metoder, der med garanti eksisterer, kan gøre din kode unødvendigt ordrig. Det er bedst kun at bruge det, når det er usikkert, om den tilgåede værdi eksisterer.

• Typografiske fejl

  • Overforbrug af valgfri kædning kan gøre det sværere at opdage typografiske fejl, som fører til adgang til utilsigtede egenskaber. Udfør korrekte typekontroller og brug det med forsigtighed.

Kodeoversigt

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice',
11    address: {
12        city: 'Tokyo'
13    }
14};
15
16// Example of optional chaining
17console.log(user.address?.city); // 'Tokyo'
18console.log(user.address?.postalCode); // undefined
19
20// Using optional chaining combined with nullish coalescing
21console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'

Sammendrag

Optional chaining i TypeScript giver kortfattet kode og undgår fejl, når man tilgår dybt nestede objekter eller arrays. Desuden gør kombinationen med nullish sammenfletningsoperatoren det muligt at angive standardværdier og skabe mere fleksibel logik. Ved passende brug kan det markant forbedre kodens sikkerhed og læsbarhed.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video