Valfri kedjning i TypeScript

I den här artikeln förklarar vi valfri kedjning i TypeScript.

YouTube Video

Valfri kedjning i TypeScript

Valfri kedjning i TypeScript är en användbar funktion för att komma åt egenskaper i djupt nästlade objekt eller arrayer. Denna funktion förhindrar fel när du försöker komma åt obefintliga egenskaper och gör det möjligt att skriva kortfattad och läsbar kod.

Vad är valfri kedjning?

Den valfria kedjningsoperatorn (?.) returnerar undefined när du försöker komma åt en objektsegenskap eller metod som inte finns. Detta gör att koden kan fortsätta att köras utan att kasta ett fel om egenskapen inte finns.

Till exempel, när du försöker komma åt egenskaper i ett nästlat objekt som visas nedan, uppstår ett fel om egenskapen inte finns med den vanliga metoden.

Exempel

 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 det här fallet kommer ett fel att uppstå om address inte finns. Valfri kedjning kan användas för att förhindra detta.

Exempel på användning av valfri kedjning

 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

• Genom att använda valfri kedjning undviker du fel och får istället undefined när egenskaper inte finns.

Hur man använder valfri kedjning

Valfri kedjning kan användas i olika scenarier, såsom egenskapsåtkomst, funktionsanrop och arrayåtkomst. Vi kommer att förklara hur du använder var och en av dessa.

Åtkomst till egenskaper

Du kan säkert komma åt nästlade egenskaper hos objekt.

 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

Den här koden använder valfri kedjning för att komma åt egenskaperna city och country endast om egenskapen location finns på objektet company.

Funktionsanrop

Valfri kedjning kan också kontrollera om en funktion finns innan den anropas.

 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

Den här koden använder valfri kedjning för att säkert anropa funktionen greet endast om den finns. Inget fel uppstår även om funktionen är odefinierad.

Array-åtkomst

Valfri kedjning kan tillämpas på arrayer för att kontrollera om element finns.

 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

Den här koden kommer åt arrayelement endast om team.members finns, och returnerar värdet för befintliga index samt undefined för de som inte finns.

Valfri kedjning och nullish-coalescing-operatorn

Valfri kedjning returnerar undefined, men ibland är detta inte tillräckligt. I det här fallet kan nullish coalescing-operatorn (??), som introducerades i TypeScript 3.7, användas för att tillhandahålla standardvärden för 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 kombineras med valfri kedjning kan du skriva ännu mer flexibel kod.

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

Varningar vid användning av valfri kedjning

När du använder valfri kedjning är det viktigt att ha följande punkter i åtanke:.

• Onödig användning av valfri kedjning

  • Att använda valfri kedjning på egenskaper eller metoder som garanterat finns kan göra din kod onödigt omständlig. Det är bäst att använda det endast när målets existens är osäker.

• Skrivfel

  • Överanvändning av valfri kedjning kan göra det svårare att upptäcka skrivfel som leder till åtkomst av oavsiktliga egenskaper. Utför korrekta typkontroller och använd det försiktigt.

Kodsammanfattning

 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'

Sammanfattning

Valfri kedjning i TypeScript ger koncis kod samtidigt som det undviker fel vid åtkomst till djupt inbäddade objekt eller arrayer. Dessutom gör kombinationen med nullish coalescing-operatorn att du kan ange standardvärden och skapa mer flexibel logik. När det används på rätt sätt kan det avsevärt förbättra kodens säkerhet och läsbarhet.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video