Optioneel Chaining in TypeScript

In dit artikel leggen we uit over Optioneel Chaining in TypeScript.

YouTube Video

Optioneel Chaining in TypeScript

Optioneel chaining in TypeScript is een nuttige functie om toegang te krijgen tot eigenschappen van diep geneste objecten of arrays. Deze functie voorkomt fouten bij het benaderen van niet-bestaande eigenschappen, waardoor je beknopte en leesbare code kunt schrijven.

Wat is Optioneel Chaining?

De operator voor optioneel chaining (?.) retourneert undefined bij toegang tot een objecteigenschap of methode die niet bestaat. Dit zorgt ervoor dat de code blijft draaien zonder een fout te geven als de eigenschap niet bestaat.

Bijvoorbeeld, bij toegang tot eigenschappen van een genest object zoals hieronder weergegeven, treedt een fout op als de eigenschap niet bestaat met de gebruikelijke methode.

Voorbeeld

 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

• In dit geval zal er een fout optreden als address niet bestaat. Optioneel chaining kan worden gebruikt om dit te voorkomen.

Voorbeeld met optionele 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

• Het gebruik van optioneel chaining voorkomt fouten en retourneert in plaats daarvan undefined als eigenschappen niet bestaan.

Hoe Optioneel Chaining te Gebruiken

Optioneel chaining kan in verschillende scenario's worden gebruikt, zoals toegangs tot eigenschappen, het aanroepen van functies en toegang tot arrays. We leggen uit hoe je elk van deze kunt gebruiken.

Toegang tot Eigenschappen

Je kunt veilig toegang krijgen tot geneste eigenschappen van objecten.

 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

Deze code gebruikt optionele chaining om toegang te krijgen tot de eigenschappen city en country alleen als de eigenschap location bestaat op het company object.

Functieaanroepen

Optioneel chaining kan ook controleren of een functie bestaat voordat deze wordt aangeroepen.

 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

Deze code gebruikt optionele chaining om de functie greet veilig aan te roepen, maar alleen als deze bestaat. Er treedt geen fout op, zelfs niet als de functie niet is gedefinieerd.

Toegang tot Arrays

Optioneel chaining kan worden toegepast op arrays om te controleren of elementen bestaan.

 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

Deze code benadert array-elementen alleen als team.members bestaat, en retourneert de waarde voor bestaande indexen en undefined voor niet-bestaande indexen.

Optionele chaining en de nullish coalescing-operator

Optioneel chaining retourneert undefined, maar soms is dit niet voldoende. In dit geval kan de nullish coalescing-operator (??), geïntroduceerd in TypeScript 3.7, worden gebruikt om standaardwaarden toe te passen voor null of 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'

Wanneer het wordt gecombineerd met optional chaining, kun je een nog flexibeler code schrijven.

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

Waarschuwingen bij het gebruik van Optional Chaining

Bij het gebruik van optionele chaining is het belangrijk om met de volgende punten rekening te houden:.

• Onnodig gebruik van optionele chaining

  • Het gebruik van optionele chaining op eigenschappen of methoden waarvan het bestaan gegarandeerd is, kan de code onnodig omslachtig maken. Het is het beste om het alleen te gebruiken wanneer het bestaan van het opgevraagde doel onzeker is.

• Typografische fouten

  • Overmatig gebruik van optionele chaining kan het moeilijker maken om typografische fouten te herkennen waardoor onbedoelde eigenschappen worden benaderd. Voer correcte typecontroles uit en gebruik het voorzichtig.

Samenvatting van de code

 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'

Samenvatting

Optional chaining in TypeScript biedt beknopte code en voorkomt fouten bij toegang tot diep geneste objecten of arrays. Bovendien kun je, door het te combineren met de nullish coalescing-operator, standaardwaarden instellen en meer flexibele logica creëren. Bij juist gebruik kan het de veiligheid en leesbaarheid van de code aanzienlijk verbeteren.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video