Opcjonalne łańcuchowanie w TypeScript

W tym artykule wyjaśniamy, czym jest opcjonalne łańcuchowanie w TypeScript.

YouTube Video

Opcjonalne łańcuchowanie w TypeScript

Opcjonalne łańcuchowanie w TypeScript to przydatna funkcja umożliwiająca dostęp do właściwości głęboko zagnieżdżonych obiektów lub tablic. Ta funkcja zapobiega błędom podczas dostępu do nieistniejących właściwości, umożliwiając pisanie zwięzłego i czytelnego kodu.

Czym jest opcjonalne łańcuchowanie?

Operator opcjonalnego łańcuchowania (?.) zwraca undefined, gdy próbujemy uzyskać dostęp do właściwości obiektu lub metody, które nie istnieją. Pozwala to kodowi działać dalej bez wyrzucenia błędu, jeśli właściwość nie istnieje.

Na przykład, podczas próby dostępu do właściwości zagnieżdżonego obiektu, jak pokazano poniżej, metoda tradycyjna spowoduje błąd, jeśli właściwość nie istnieje.

Przykład

 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

• W tym przypadku wystąpi błąd, jeśli address nie istnieje. Można tego uniknąć, używając opcjonalnego łańcuchowania.

Przykład użycia opcjonalnego łańcuchowania

 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

• Korzystanie z opcjonalnego łańcuchowania zapobiega błędom i zamiast tego zwraca undefined, gdy właściwości nie istnieją.

Jak korzystać z opcjonalnego łańcuchowania

Opcjonalne łańcuchowanie może być używane w różnych scenariuszach, takich jak dostęp do właściwości, wywoływanie funkcji i dostęp do elementów tablicy. Wyjaśnimy, jak korzystać z każdego z tych przypadków.

Dostęp do właściwości

Możesz bezpiecznie uzyskiwać dostęp do zagnieżdżonych właściwości obiektów.

 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

Ten kod używa opcjonalnego łańcuchowania, aby uzyskać dostęp do właściwości city i country tylko wtedy, gdy właściwość location istnieje w obiekcie company.

Wywoływanie funkcji

Opcjonalne łańcuchowanie może również sprawdzić, czy funkcja istnieje, zanim zostanie wywołana.

 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

Ten kod używa opcjonalnego łańcuchowania, aby bezpiecznie wywołać funkcję greet tylko wtedy, gdy ona istnieje. Nie występuje żaden błąd, nawet jeśli funkcja jest niezdefiniowana.

Dostęp do tablicy

Opcjonalne łańcuchowanie można stosować do tablic, aby sprawdzić, czy elementy istnieją.

 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

Ten kod uzyskuje dostęp do elementów tablicy tylko wtedy, gdy team.members istnieje, zwracając wartość dla istniejących indeksów oraz undefined dla nieistniejących.

Opcjonalne łańcuchowanie i operator nullish coalescing

Opcjonalne łańcuchowanie zwraca undefined, ale czasami nie jest to wystarczające. W tym przypadku operator nullish coalescing (??), wprowadzony w TypeScript 3.7, może być użyty do określenia wartości domyślnej dla null lub 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'

W połączeniu z opcjonalnym chainingiem możesz pisać jeszcze bardziej elastyczny kod.

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

Ostrzeżenia dotyczące używania opcjonalnego chainingu

Podczas używania opcjonalnego łańcuchowania warto pamiętać o następujących kwestiach:.

• Niepotrzebne użycie opcjonalnego łańcuchowania

  • Używanie opcjonalnego łańcuchowania dla właściwości lub metod, które na pewno istnieją, może powodować niepotrzebne rozbudowanie kodu. Najlepiej używać go tylko wtedy, gdy istnienie obiektu dostępowego jest niepewne.

• Literówki

  • Nadmierne używanie opcjonalnego łańcuchowania może utrudnić zauważenie literówek prowadzących do dostępu do niezamierzonych właściwości. Przeprowadzaj odpowiednie sprawdzenia typów i stosuj to ostrożnie.

Podsumowanie kodu

 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'

Podsumowanie

Opcjonalny chaining w TypeScript pozwala na zwięzły kod, jednocześnie unikając błędów podczas dostępu do głęboko zagnieżdżonych obiektów lub tablic. Dodatkowo, połączenie go z operatorem nullish coalescing umożliwia ustawienie wartości domyślnych i tworzenie bardziej elastycznej logiki. Kiedy stosowany jest odpowiednio, może znacząco poprawić bezpieczeństwo i czytelność kodu.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video