✨ Idea iklan dalam TypeScript

Saya suka ❤️ TypeScript.

Terutama selepas mengalami ralat "tidak boleh mengakses nilai undefined" JavaScript yang terkenal.

Namun, walaupun TypeScript hebat, masih ada cara untuk menembak kaki sendiri.

Dalam siaran ini, saya akan berkongsi 5 amalan buruk dalam TypeScript dan cara mengelakkannya.

? Muat turun Buku Petua Dan Trik 101 Reaksi PERCUMA saya untuk permulaan.

1. Mengisytiharkan Ralat sebagai Jenis Sebarang

Contoh

Dalam coretan kod berikut, kami menangkap ralat kemudian mengisytiharkannya sebagai jenis apa-apa.

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err: any) {
    toast(`Failed to do something: ${err.message}`);
  }
}

Kenapa teruk ❌

Tiada jaminan bahawa ralat mempunyai medan mesej rentetan jenis.

Malangnya, disebabkan penegasan jenis, kod tersebut membolehkan kami menganggap ia betul.

Kod boleh berfungsi dalam pembangunan dengan kes ujian tertentu tetapi boleh rosak teruk dalam pengeluaran.

Apa yang perlu dilakukan ✅

Jangan tetapkan jenis ralat. Ia sepatutnya tidak diketahui secara lalai.

Sebaliknya, anda boleh melakukan mana-mana perkara berikut:

• Pilihan 1: Semak sama ada ralat adalah jenis yang betul dengan pengawal jenis.

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err) {
    const toastMessage = hasMessage(err)
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;
    toast(toastMessage);
  }
}

// We use a type guard to check first
function hasMessage(value: unknown): value is { message: string } {
  return (
    value != null &&
    typeof value === "object" &&
    "message" in value &&
    typeof value.message === "string"
  );
}

// You can also simply check if the error is an instance of Error
const toastMessage = err instanceof Error
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;

• Pilihan 2 (Disyorkan): Jangan membuat andaian tentang ralat

Daripada membuat andaian tentang jenis ralat, kendalikan setiap jenis secara eksplisit dan berikan maklum balas yang sesuai kepada pengguna.

Jika anda tidak dapat menentukan jenis ralat tertentu, lebih baik tunjukkan maklumat ralat lengkap daripada butiran separa.

Untuk mendapatkan maklumat lanjut tentang pengendalian ralat, lihat panduan yang sangat baik ini: Menulis Mesej Ralat yang Lebih Baik.

2. Mempunyai Fungsi dengan Berbilang Parameter Berturut-turut Jenis Yang Sama

Contoh

export function greet(
  firstName: string,
  lastName: string,
  city: string,
  email: string
) {
  // Do something...
}

Kenapa teruk ❌

• Anda secara tidak sengaja boleh menghantar parameter dalam susunan yang salah:

// We inverted firstName and lastName, but TypeScript won't catch this
greet("Curry", "Stephen", "LA", "stephen.curry@gmail.com")

• Lebih sukar untuk memahami perkara yang diwakili oleh setiap parameter, terutamanya semasa semakan kod, apabila melihat panggilan fungsi sebelum pengisytiharannya

Apa yang perlu dilakukan sebaliknya ✅

Gunakan parameter objek untuk menjelaskan tujuan setiap medan dan meminimumkan risiko kesilapan.

export function greet(params: {
  firstName: string;
  lastName: string;
  city: string;
  email: string;
}) {
  // Do something...
}

3. Mempunyai Fungsi dengan Pelbagai Cawangan dan Jenis Tiada Pulangan

Contoh

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err: any) {
    toast(`Failed to do something: ${err.message}`);
  }
}

Kenapa teruk ❌

• Menambahkan animalType baharu boleh membawa kepada mengembalikan objek berstruktur yang salah.

• Perubahan pada struktur jenis pemulangan boleh menyebabkan isu yang sukar dikesan di bahagian lain kod.

• Tipokan silap boleh mengakibatkan jenis yang salah disimpulkan.

Apa yang perlu dilakukan sebaliknya ✅

Nyatakan secara eksplisit jenis pemulangan fungsi:

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err) {
    const toastMessage = hasMessage(err)
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;
    toast(toastMessage);
  }
}

// We use a type guard to check first
function hasMessage(value: unknown): value is { message: string } {
  return (
    value != null &&
    typeof value === "object" &&
    "message" in value &&
    typeof value.message === "string"
  );
}

// You can also simply check if the error is an instance of Error
const toastMessage = err instanceof Error
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;

4. Menambah Jenis yang Tidak Diperlukan Daripada Menggunakan Medan Pilihan

Contoh

export function greet(
  firstName: string,
  lastName: string,
  city: string,
  email: string
) {
  // Do something...
}

Kenapa teruk ❌

• Tidak berskala: menambah medan baharu memerlukan mencipta berbilang jenis baharu

• Menjadikan pemeriksaan jenis lebih kompleks, memerlukan pengawal jenis tambahan

• Membawa kepada nama jenis yang mengelirukan dan penyelenggaraan yang lebih sukar

Apa yang perlu dilakukan sebaliknya ✅

Gunakan medan pilihan untuk memastikan jenis anda mudah dan boleh diselenggara:

// We inverted firstName and lastName, but TypeScript won't catch this
greet("Curry", "Stephen", "LA", "stephen.curry@gmail.com")

5. Menjadikan Hartanah Pilihan pada Tahap Komponen Berbeza

Contoh

Prop yang dilumpuhkan adalah pilihan dalam semua komponen.

export function greet(params: {
  firstName: string;
  lastName: string;
  city: string;
  email: string;
}) {
  // Do something...
}

Kenapa teruk ❌

• Mudah lupa untuk melepasi prop yang dilumpuhkan, menghasilkan borang yang didayakan separa

Apa yang perlu dilakukan sebaliknya ✅

Jadikan medan kongsi diperlukan untuk komponen dalaman.

Ini akan memastikan hantaran prop yang betul. Ini amat penting untuk komponen peringkat rendah untuk menangkap sebarang kesilapan lebih awal.

Dalam contoh di atas, orang kurang upaya kini diperlukan dalam semua komponen dalaman.

function getAnimalDetails(animalType: "dog" | "cat" | "cow") {
  switch (animalType) {
    case "dog":
      return { name: "Dog", sound: "Woof" };
    case "cat":
      return { name: "Cat", sound: "Meow" };
    case "cow":
      return { name: "Cow", sound: "Moo" };
    default:
      // This ensures TypeScript catches unhandled cases
      ((_: never) => {})(animalType);
  }
}

Nota: Saya tidak mengesyorkan ini jika anda mereka bentuk komponen untuk perpustakaan kerana medan yang diperlukan memerlukan lebih banyak kerja.

Ringkasan

TypeScript hebat, tetapi tiada alat ?️ adalah sempurna.

Mengelakkan 5 kesilapan ini akan membantu anda menulis kod yang lebih bersih, selamat dan lebih boleh diselenggara.

Untuk lebih banyak petua, lihat e-buku percuma saya, 101 React Tips & Tricks.

? TAMPAK PEPIJAT

? PETUA MINGGU

Itu bungkus ?.

<script> // Detect dark theme var iframe = document.getElementById('tweet-1869351983934738523-882'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1869351983934738523&theme=dark" } </script>Tinggalkan komen ? untuk berkongsi kesilapan Typescript yang anda lakukan.<script> // Detect dark theme var iframe = document.getElementById('tweet-1869050042931449902-927'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1869050042931449902&theme=dark" } </script>

Dan jangan lupa untuk menjatuhkan "???".

Jika anda sedang belajar React, muat turun buku 101 React Tips & Tricks saya secara PERCUMA.

Jika anda suka artikel seperti ini, sertai surat berita PERCUMA saya, FrontendJoy.

Jika anda mahukan petua harian, cari saya di X/Twitter atau di Bluesky.

Atas ialah kandungan terperinci ✨ Idea iklan dalam TypeScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!