Mengelakkan Panggilan Tidak Selamat dalam JavaScript dan Projek React dengan ESLint

Mengelakkan Panggilan Tidak Selamat dalam JavaScript dan Projek React dengan ESLint

?✨ Dalam aplikasi JavaScript dan React moden, adalah perkara biasa untuk menghadapi ralat masa jalan yang disebabkan oleh mengakses sifat pada nilai yang tidak ditentukan atau nol, atau kaedah memanggil pada tatasusunan atau objek yang tidak ditentukan. Isu ini boleh mengganggu pengalaman pengguna dan menjadikan penyahpepijatan sebagai mimpi ngeri. Dalam artikel ini, kami akan mengenal pasti isu biasa dan menyediakan konfigurasi ESLint untuk mengurangkannya dengan berkesan. ??

?✨ Dalam projek React atau React Native kami, kerana kami tidak menggunakan TypeScript, kadangkala kami terlupa untuk menulis kod selamat. Kod yang tidak selamat ini boleh membawa kepada banyak isu dalam pengeluaran, seperti apl React Native ranap, pengguna yang mengecewakan dan penyelenggaraan yang merumitkan. Mari kita selami isu-isu biasa ini dan cara menyelesaikannya. ???

Isu Biasa dengan Panggilan Tidak Selamat

1. Mengakses Properties pada undefined atau null ??✨

Masalah:

Mengakses sifat pada objek yang tidak ditentukan atau batal menyebabkan ralat masa jalan:

const user = undefined;
console.log(user.name); // ❌ Runtime Error: Cannot read property 'name' of undefined

Penyelesaian:

• Penyelesaian 1: Gunakan rantaian pilihan (?.).

const name = user?.name;

• Penyelesaian 2: Gunakan sandaran lalai.

const name = user ? user.name : 'Default Name';

• Penyelesaian 3: Pastikan permulaan sebelum akses.

const user = { name: 'Default Name' };

2. Kaedah Memanggil pada undefined atau null ✋??

Masalah:

Kaedah panggilan seperti .map() atau .filter() pada tatasusunan yang tidak ditentukan menimbulkan ralat:

const items = undefined;
items.map((item) => console.log(item)); // ❌ Runtime Error: Cannot read property 'map' of undefined

Penyelesaian:

• Penyelesaian 1: Sahkan bahawa pembolehubah ialah tatasusunan.

if (Array.isArray(items)) {
  items.map(item => console.log(item));
}

• Penyelesaian 2: Sediakan tatasusunan lalai.

const items = someValue || [];
items.map(item => console.log(item));

• Penyelesaian 3: Gunakan operator penggabungan batal (??).

const items = possibleItems ?? [];

3. Menggunakan Fungsi Tidak Ditakrifkan ⚙️⚠️?

Masalah:

Cuba memanggil fungsi yang mungkin tidak ditentukan:

const handler = undefined;
handler(); // ❌ Runtime Error: handler is not a function

Penyelesaian:

• Penyelesaian 1: Periksa kewujudan sebelum seruan.

if (typeof handler === 'function') {
  handler();
}

• Penyelesaian 2: Tetapkan fungsi lalai tanpa operasi.

const handler = passedHandler || (() => {});

4. Memusnahkan Objek Tidak Tertakrif atau Null ?❌?

Masalah:

Memusnahkan sifat daripada objek yang tidak ditentukan mengakibatkan ralat:

const user = undefined;
console.log(user.name); // ❌ Runtime Error: Cannot read property 'name' of undefined

Penyelesaian:

• Penyelesaian 1: Gunakan rantaian pilihan dengan lalai.

const name = user?.name;

• Penyelesaian 2: Sahkan sebelum dimusnahkan.

const name = user ? user.name : 'Default Name';

5. Mengakses Elemen Tatasusunan Tidak Wujud ???

Masalah:

Mengakses elemen tatasusunan yang tidak ditentukan menyebabkan ralat:

const user = { name: 'Default Name' };

Penyelesaian:

• Penyelesaian 1: Sediakan sandaran lalai.

const items = undefined;
items.map((item) => console.log(item)); // ❌ Runtime Error: Cannot read property 'map' of undefined

• Penyelesaian 2: Mulakan tatasusunan dengan betul.

if (Array.isArray(items)) {
  items.map(item => console.log(item));
}

6. Penggunaan Tatasusunan/Fungsi Tidak Sah ??

Masalah:

Menggunakan kaedah tatasusunan seperti .map() atau .filter() pada nilai atau objek yang tidak ditentukan:

const items = someValue || [];
items.map(item => console.log(item));

Penyelesaian:

• Penyelesaian 1: Sentiasa sahkan input untuk fungsi tatasusunan.

const items = possibleItems ?? [];

• Penyelesaian 2: Kembalikan hasil yang selamat jika input tidak sah.

const handler = undefined;
handler(); // ❌ Runtime Error: handler is not a function

7. Cek Bersyarat Tidak Mencukupi ??

Masalah:

Gagal mengesahkan syarat dengan ketat boleh menyebabkan pepijat, seperti bergantung pada nilai palsu. Contohnya, jika keadaan yang menjangkakan boolean mungkin tersilap menilai jenis lain seperti undefined atau 0:

if (typeof handler === 'function') {
  handler();
}

Penyelesaian:

• Penyelesaian 1: Gunakan perbandingan kesaksamaan yang ketat.

const handler = passedHandler || (() => {});

• Penyelesaian 2: Nilai paksaan secara eksplisit untuk tingkah laku yang dimaksudkan.

const obj = undefined;
const { name } = obj; // ❌ Runtime Error: Cannot destructure property 'name' of undefined

• Penyelesaian 3: Tentukan syarat eksplisit dalam kod anda.

const { name = 'Default Name' } = user || {};

---

Menggunakan ESLint untuk Mengelak Panggilan Tidak Selamat ??✅

Untuk menangkap isu ini semasa pembangunan, kami boleh memanfaatkan ESLint dengan peraturan tertentu. Di bawah ialah konfigurasi ESLint yang akan membenderakan panggilan tidak selamat dan mencadangkan pembetulan. ?️??

Konfigurasi ESLint ???️

Tambahkan peraturan berikut pada fail konfigurasi .eslintrc.js atau ESLint anda:

const user = undefined;
console.log(user.name); // ❌ Runtime Error: Cannot read property 'name' of undefined

Penjelasan Peraturan ?⚙️?

1. @typescript-eslint/no-unnecessary-condition: Tandakan keadaan yang tidak perlu atau potensi tidak terkendali yang tidak ditentukan atau nilai batal. ⚠️
2. ungkapan-tiada-tidak digunakan: Memastikan logik litar pintas seperti someObject && someObject.doSesuatu dielakkan melainkan perlu secara eksplisit. ?
3. @typescript-eslint/no-unsafe-call: Menghalang panggilan fungsi tidak selamat pada bukan fungsi. ❌
4. @typescript-eslint/no-unsafe-member-access: Bendera cuba mengakses sifat pada nilai yang mungkin tidak ditentukan. ✋
5. consistent-return: Menguatkuasakan jenis return yang konsisten dalam fungsi untuk mengelakkan daripada mengembalikan nilai yang tidak sah atau tidak ditentukan. ?
6. @typescript-eslint/strict-boolean-expressions: Menguatkan ungkapan bersyarat dengan menghalang paksaan tersirat. ?
7. @typescript-eslint/no-non-null-assertion: Tidak membenarkan yang tidak selamat ! operator yang digunakan untuk memintas semakan null/undefined. ?

---

Memasang Ketergantungan yang Diperlukan ???

Untuk mendayakan peraturan ini, pastikan anda memasang pemalam dan penghurai ESLint yang diperlukan:

const name = user?.name;

---

Mengintegrasikan ESLint dengan VSCode ?️??

1. Pasang Sambungan ESLint:

• Cari "ESLint" dalam pasaran VSCode dan pasangkannya. ✨

2. Dayakan Pembetulan Auto:

Tambah yang berikut pada tetapan anda.json:

const name = user ? user.name : 'Default Name';

3. Jalankan ESLint:

Tambahkan skrip npm untuk menjalankan ESLint:

const user = { name: 'Default Name' };

Kemudian, jalankan npm run lint untuk menangkap isu. ?

---

Kesimpulan ???

Dengan melaksanakan peraturan dan amalan ESLint di atas, anda boleh menangkap dan membetulkan panggilan yang tidak selamat sebelum ia menjadi ralat masa jalan. ?? Pendekatan ini akan meningkatkan kebolehpercayaan dan kebolehselenggaraan projek JavaScript dan React anda. ?⚙️✨

---

Atas ialah kandungan terperinci Mengelakkan Panggilan Tidak Selamat dalam JavaScript dan Projek React dengan ESLint. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!