Optional Chaining di TypeScript

Dalam artikel ini, kami menjelaskan tentang Optional Chaining di TypeScript.

YouTube Video

Optional Chaining di TypeScript

Optional chaining di TypeScript adalah fitur yang berguna untuk mengakses properti dari objek atau array yang sangat bersarang. Fitur ini mencegah kesalahan saat mengakses properti yang tidak ada, memungkinkan Anda menulis kode yang ringkas dan mudah dibaca.

Apa itu Optional Chaining?

Operator optional chaining (?.) mengembalikan undefined saat mengakses properti atau metode objek yang tidak ada. Ini memungkinkan kode terus berjalan tanpa mengeluarkan kesalahan jika properti tidak ada.

Sebagai contoh, saat mengakses properti dari objek bersarang seperti di bawah ini, kesalahan terjadi jika properti tidak ada menggunakan metode biasa.

Contoh

 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

• Dalam kasus ini, akan terjadi kesalahan jika address tidak ada. Optional chaining dapat digunakan untuk mencegah hal ini.

Contoh penggunaan 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

• Menggunakan optional chaining menghindari kesalahan dan mengembalikan undefined jika properti tidak ada.

Cara Menggunakan Optional Chaining

Optional chaining dapat digunakan dalam berbagai skenario, seperti pengaksesan properti, pemanggilan fungsi, dan pengaksesan array. Kami akan menjelaskan cara menggunakan masing-masing hal ini.

Mengakses Properti

Anda dapat dengan aman mengakses properti bersarang dari objek.

 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

Kode ini menggunakan optional chaining untuk mengakses properti city dan country hanya jika properti location ada pada objek company.

Pemanggilan Fungsi

Optional chaining juga dapat memeriksa keberadaan suatu fungsi sebelum memanggilnya.

 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

Kode ini menggunakan optional chaining untuk memanggil fungsi greet dengan aman hanya jika fungsi tersebut ada. Tidak terjadi error bahkan jika fungsi tersebut tidak didefinisikan.

Pengaksesan Array

Optional chaining dapat diterapkan pada array untuk memeriksa apakah elemen ada.

 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

Kode ini mengakses elemen array hanya jika team.members ada, mengembalikan nilai untuk indeks yang ada dan undefined untuk indeks yang tidak ada.

Optional Chaining dan Operator Nullish Coalescing

Optional chaining mengembalikan undefined, tetapi terkadang ini tidak cukup. Dalam kasus ini, nullish coalescing operator (??) yang diperkenalkan di TypeScript 3.7, dapat digunakan untuk memberikan nilai default untuk null atau 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'

Ketika digabungkan dengan optional chaining, Anda dapat menulis kode yang lebih fleksibel lagi.

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

Peringatan Saat Menggunakan Optional Chaining

Saat menggunakan optional chaining, penting untuk memperhatikan hal-hal berikut:.

• Penggunaan optional chaining yang tidak perlu

  • Menggunakan optional chaining pada properti atau metode yang sudah pasti ada dapat membuat kode Anda menjadi terlalu panjang tanpa perlu. Sebaiknya hanya digunakan ketika keberadaan target yang diakses tidak pasti.

• Kesalahan pengetikan

  • Terlalu sering menggunakan optional chaining dapat membuat Anda sulit menyadari kesalahan pengetikan yang menyebabkan akses ke properti yang tidak dimaksudkan. Lakukan pemeriksaan tipe dengan benar dan gunakan secara hati-hati.

Ringkasan kode

 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'

Ringkasan

Optional chaining dalam TypeScript menyediakan kode yang ringkas sambil menghindari kesalahan saat mengakses objek atau array yang bersarang dalam. Selain itu, mengombinasikannya dengan operator nullish coalescing memungkinkan Anda mengatur nilai default dan membuat logika yang lebih fleksibel. Ketika digunakan dengan tepat, hal ini dapat secara signifikan meningkatkan keamanan dan keterbacaan kode.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video