Bagaimana cara melakukan penukaran jenis dengan betul dalam TypeScript?

Perbincangan mendalam mengenai penukaran jenis jenis

Artikel ini akan menganalisis secara terperinci penggunaan dan batasan penukaran jenis jenis, terutama kata kunci as , dan memberikan amalan terbaik.

Analisis Senario: Komponen Vue dan Penegasan Jenis

Katakan bahawa props komponen VUE menentukan atribut group sebagai jenis number . Fungsi getDictGroup menjangkakan bahawa parameter sid juga merupakan number jenis. Walau bagaimanapun, sid runtime mungkin jenis string , mengakibatkan ralat jenis. Coretan kod berikut menunjukkan masalah ini:

 const props = defineProps  ();

getDictGroup (props.group);

Export const getDictGroup = async (sid: number) => {
  const dict = menunggu getDict ();
  console.info (typeof Sid); // boleh mengeluarkan "String"
  sid = sid sebagai nombor; // jenis menegaskan, tetapi tidak akan mengubah jenis runtime console.info (typeof SID); // masih output "String"
  console.info (typeof (SID sebagai nombor)); // masih output "String"
};

Menggunakan as number untuk penegasan jenis adalah hanya untuk memberitahu pengkompil TypeScript bahawa pembolehubah harus dianggap sebagai jenis number dan tidak melakukan penukaran jenis runtime . parseInt(sid) tidak dapat menyelesaikan masalah ini, kerana TypeScript akan melaporkan ralat dan number tidak dibenarkan untuk diberikan kepada string .

Sifat penukaran jenis

Kata kunci as adalah penegasan jenis, yang merupakan mekanisme kompilasi masa yang tidak mengubah jenis runtime pembolehubah. Untuk melakukan penukaran jenis sebenar, anda perlu menggunakan fungsi penukaran jenis JavaScript.

Sebagai contoh, tukar nombor ke rentetan:

 Biarkan N: Nombor = 12345;
n = string (n);
console.log (n); // "12345"
console.log (typeof n); // "String"

Tukar rentetan ke nombor:

 biarkan strnum: string = "42";
Biarkan nombor: nombor = nombor (strnum);
console.log (num); // 42
console.log (typeof num); // "Nombor"

Kaedah penukaran jenis yang betul dalam jenis skrip

Dalam TypeScript, penukaran jenis selamat memerlukan menggabungkan fungsi penukaran jenis JavaScript dan pemeriksaan jenis yang diperlukan:

1. String ke Nombor: Gunakan fungsi Number() dan menggabungkan rantaian pilihan dan pengendali penggabungan nilai null untuk menangani kesilapan yang berpotensi:

    Let Strnum: String | undefined = "42";
   Biarkan nombor: nombor = nombor (strnum) ?? 0; // Gunakan pengendali gabungan nilai null untuk mengendalikan undefined

2. Ke rentetan: Gunakan fungsi String() :

    biarkan nombor: nombor = 42;
   biarkan str: string = string (num);

3. Pemeriksaan Jenis Stricter: Sebelum penukaran, lakukan pemeriksaan jenis untuk mengelakkan kesilapan runtime yang berpotensi:

    Fungsi ConvertToString (Nilai: Nombor | String): String {
     jika (typeof value === 'nombor') {
       return rentetan (nilai);
     } else if (typeof value === 'string') {
       nilai pulangan;
     } else {
       membuang ralat baru ('jenis input tidak sah');
     }
   }

Penyelesaian untuk menyelesaikan masalah awal

Untuk masalah awal, penyelesaian yang betul adalah menggunakan fungsi Number() untuk penukaran jenis dan mengendalikan kesilapan yang berpotensi:

 const props = defineProps  (); // Ubah suai jenis prop untuk membenarkan rentetan

getDictGroup (props.group);

Eksport Const GetDictGroup = Async (Sid: Number | String) => {
  const dict = menunggu getDict ();
  Biarkan ConvertSID: Nombor = Nombor (SID);
  jika (isnan (ditukarSid)) {
    Console.error ("Input tidak sah: SID bukan nombor");
    kembali; // atau mengendalikan ralat dengan sewajarnya
  }
  console.info (typeof convertSid); // "Nombor"
  // Gunakan ConvertSid untuk operasi berikutnya};

Dengan cara ini, kita bukan sahaja melakukan penukaran jenis runtime yang betul, tetapi juga memastikan keselamatan jenis pengkompil TypeScript. Pada masa yang sama, kami juga telah menambah pengendalian ralat untuk input bukan angka. Mengubah jenis props membolehkan input string , yang lebih sesuai dengan keadaan sebenar.

Atas ialah kandungan terperinci Bagaimana cara melakukan penukaran jenis dengan betul dalam TypeScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!