Rantai Pilihan dalam TypeScript

Dalam artikel ini, kami menerangkan tentang Rantai Pilihan dalam TypeScript.

YouTube Video

Rantai Pilihan dalam TypeScript

Rantai pilihan dalam TypeScript adalah ciri berguna untuk mengakses harta benda objek yang bersarang dalam atau array. Ciri ini mengelakkan ralat apabila mengakses harta benda yang tidak wujud, membolehkan anda menulis kod yang ringkas dan mudah dibaca.

Apa itu Rantai Pilihan?

Operator rantai pilihan (?.) mengembalikan undefined apabila mengakses harta benda atau kaedah objek yang tidak wujud. Ini membolehkan kod terus berjalan tanpa menghasilkan ralat jika harta benda tidak wujud.

Sebagai contoh, apabila mengakses harta benda objek bersarang seperti yang ditunjukkan di bawah, ralat berlaku jika harta benda tidak wujud menggunakan kaedah 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 kes ini, ralat akan berlaku jika address tidak wujud. Rantai pilihan boleh digunakan untuk mengelakkan ini.

Contoh menggunakan rantaian pilihan

 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 rantai pilihan mengelakkan ralat dan sebaliknya mengembalikan undefined apabila harta benda tidak wujud.

Cara Menggunakan Rantai Pilihan

Rantai pilihan boleh digunakan dalam pelbagai senario, seperti akses harta benda, panggilan fungsi, dan akses array. Kami akan menerangkan cara menggunakan setiap perkara ini.

Mengakses Harta Benda

Anda boleh dengan selamat mengakses harta benda bersarang 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

Kod ini menggunakan optional chaining untuk mengakses atribut city dan country hanya jika atribut location wujud pada objek company.

Panggilan Fungsi

Rantai pilihan juga boleh memeriksa kewujudan 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

Kod ini menggunakan optional chaining untuk memanggil fungsi greet dengan selamat hanya jika ia wujud. Tiada ralat berlaku walaupun fungsi tidak ditakrifkan.

Akses Array

Rantai pilihan boleh digunakan pada array untuk memeriksa sama ada elemen wujud.

 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

Kod ini mengakses elemen dalam array hanya jika team.members wujud, memulangkan nilai indeks yang wujud dan undefined untuk indeks yang tidak wujud.

Optional Chaining dan Operator Nullish Coalescing

Rantai pilihan mengembalikan undefined, tetapi kadangkala ini tidak mencukupi. Dalam kes ini, operator nullish coalescing (??), yang diperkenalkan dalam TypeScript 3.7, boleh digunakan untuk memberikan nilai lalai bagi nilai 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'

Apabila digabungkan dengan optional chaining, anda boleh menulis kod yang lebih fleksibel.

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

Berhati-hati Semasa Menggunakan Optional Chaining

Apabila menggunakan optional chaining, adalah penting untuk mengambil perhatian terhadap perkara-perkara berikut:.

• Penggunaan optional chaining yang tidak perlu

  • Menggunakan optional chaining pada atribut atau kaedah yang pasti wujud boleh menyebabkan kod anda menjadi terlalu panjang tanpa keperluan. Ia paling baik digunakan hanya apabila kewujudan sasaran yang diakses tidak pasti.

• Kesalahan taip

  • Penggunaan optional chaining secara berlebihan boleh menyukarkan pengesanan kesalahan taip yang menyebabkan akses kepada atribut yang tidak dimaksudkan. Lakukan semakan jenis yang betul dan gunakan dengan berhati-hati.

Ringkasan kod

 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 kod ringkas sambil mengelakkan kesilapan semasa mengakses objek atau tatasusunan yang bersarang dalam. Tambahan pula, menggabungkannya dengan operator nullish coalescing membolehkan anda menetapkan nilai lalai dan mewujudkan logik yang lebih fleksibel. Apabila digunakan dengan betul, ia dapat meningkatkan keselamatan dan kebolehbacaan kod secara signifikan.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video