Valgfri kjeding i TypeScript

I denne artikkelen forklarer vi valgfri kjeding i TypeScript.

YouTube Video

Valgfri kjeding i TypeScript

Valgfri kjeding i TypeScript er en nyttig funksjon for å få tilgang til egenskaper i dypt nestede objekter eller matriser. Denne funksjonen forhindrer feil når du prøver å få tilgang til ikke-eksisterende egenskaper, og lar deg skrive konsis og lesbar kode.

Hva er valgfri kjeding?

Den valgfrie kjedingsoperatoren (?.) returnerer undefined når du prøver å få tilgang til en objekt-egenskap eller metode som ikke eksisterer. Dette gjør at koden kan fortsette å kjøre uten å kaste en feil dersom egenskapen ikke eksisterer.

For eksempel, når du får tilgang til egenskaper i et nestet objekt som vist nedenfor, oppstår det en feil hvis egenskapen ikke eksisterer ved bruk av den vanlige metoden.

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 tilfellet vil det oppstå en feil hvis address ikke eksisterer. Valgfri kjeding kan brukes for å forhindre dette.

Eksempel med bruk av valgfri kjeding

 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

• Bruk av valgfri kjeding unngår feil og returnerer undefined i stedet når egenskaper ikke eksisterer.

Hvordan bruke valgfri kjeding

Valgfri kjeding kan brukes i ulike situasjoner, som tilgang til egenskaper, funksjonskall og matrise-tilgang. Vi vil forklare hvordan du bruker hver av disse.

Få tilgang til egenskaper

Du kan trygt få tilgang til nestede egenskaper 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 koden bruker valgfri kjeding (optional chaining) for å få tilgang til city og country-egenskapene bare hvis location-egenskapen finnes på company-objektet.

Funksjonskall

Valgfri kjeding kan også sjekke om en funksjon eksisterer før den kalles.

 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 koden bruker valgfri kjeding for trygt å kalle greet-funksjonen bare hvis den finnes. Ingen feil oppstår selv om funksjonen er udefinert.

Tilgang til matriser

Valgfri kjeding kan brukes på matriser for å sjekke 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 koden får tilgang til tabellens elementer bare hvis team.members eksisterer, og returnerer verdier for eksisterende indekser og undefined for ikke-eksisterende.

Valgfri kjeding og nullsamordningsoperatoren

Valgfri kjeding returnerer undefined, men noen ganger er dette ikke tilstrekkelig. I dette tilfellet kan nullsamordningsoperatoren (??), som ble introdusert i TypeScript 3.7, brukes for å angi standardverdier 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 valgfri kjeding (optional chaining), kan du skrive enda mer fleksibel kode.

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

Forsiktighetsregler ved bruk av valgfri kjeding

Når du bruker valgfri kjeding, er det viktig å huske på følgende punkter:.

• Unødvendig bruk av valgfri kjeding

  • Å bruke valgfri kjeding på egenskaper eller metoder som garantert eksisterer kan gjøre koden unødvendig omstendelig. Det bør bare brukes når eksistensen av det som skal aksesseres er usikkert.

• Typografiske feil

  • Overdreven bruk av valgfri kjeding kan gjøre det vanskeligere å oppdage typografiske feil som fører til tilgang til utilsiktede egenskaper. Utfør riktige typekontroller og bruk det med forsiktighet.

Kodeoppsummering

 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

Valgfri kjeding i TypeScript gir konsis kode samtidig som det unngår feil når man aksesserer dypt nestede objekter eller matriser. I tillegg, ved å kombinere det med nullsamordningsoperatoren, kan du angi standardverdier og lage mer fleksibel logikk. Når det brukes riktig, kan det betydelig forbedre kode-sikkerheten og lesbarheten.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video