Beyond Type Safety: menjadikan TypeScript lebih pintar dengan Membina Pemilih Masa Jalan

Penafian

Hei, sebelum kita bermula, izinkan saya menjelaskan sesuatu: sementara saya akan bercakap banyak tentang pakej saya, ts-runtime-picker, ini bukan artikel promosi. Saya hanya berkongsi pengalaman saya dan perjalanan yang saya lalui sebelum membinanya. (Tetapi hey, jika anda ingin tahu, ini pautan ke pakej itu?).

Bagaimana TypeScript Membawa Saya kepada Idea Baharu (Dan Pakej)

Mari kita undur sedikit. Jadi, saya telah bekerja dengan TypeScript untuk seketika sekarang. Saya tidak akan memanggil diri saya sebagai TypeScript pro, tetapi saya telah membina beberapa projek besar dan bekerja dengannya di syarikat saya. Anda tahu, projek biasa—beberapa projek "hello world", beberapa projek yang lebih kompleks, dan sudah tentu, sebahagian besar perjalanan ke Google untuk mengetahui "apakah maksud ralat ini?" atau "Bagaimana cara saya memilih medan daripada antara muka sekali lagi?" (Anda faham maksudnya. ?)

Pada suatu hari, saya menghadapi masalah semasa bekerja dengan fungsi awan Firebase. Saya berada di titik akhir createUser, menulis logik pengesahan saya, memangkas data dan mengendalikan kegilaan permintaan CRUD yang biasa. Semuanya berjalan lancar sehingga saya terjumpa sekeping kod ini daripada pembangun sebelumnya:

firebase.collection("users").add(request.data.user);

...dan TypeScript pro dalaman saya menjerit. ?

Maksud saya, jom, ini adalah bendera merah besar-besaran. Betul ke? Memasukkan data pengguna yang tidak ditapis secara terus seperti itu adalah berisiko—bagaimana jika data permintaan kehilangan beberapa pengesahan dan akhirnya kami memasukkan medan yang tidak diingini ke dalam pangkalan data? Tidak hebat.

Saya cepat-cepat mengalih keluar kod itu, tetapi kemudian, saya terdiam seketika. ? Saya merenung skrin saya sambil berfikir: "Tunggu, jika saya hanya memberikan request.data kepada jenis antara muka Pengguna, tidakkah TypeScript akan menghalang saya daripada melakukan sesuatu seperti ini? Bukankah ini sepatutnya menyelesaikan isu ini?" (Isyaratkan pandangan penuh harapan pada IDE saya, menunggu garis berlekuk merah muncul.)

Tetapi tunggu... ?‍♂️ TypeScript bukan sihir. Ia hanya semakan masa kompilasi, bukan? Ia tidak wujud dalam masa jalan. TypeScript ialah topeng untuk keselamatan jenis, tetapi ia sebenarnya tidak menguatkuasakan apa-apa apabila kod berjalan. Ia tidak benar menghentikan medan tambahan daripada dimasukkan pada masa jalan.

Jadi, saya memanggil salah seorang rakan sepasukan saya dan bertanya, “Hei bro, jika kita mempunyai objek bernama abjad dengan semua huruf dalam abjad, dan kita mencipta antara muka OnlyTwoLetters yang hanya membenarkan huruf 'a' dan ' b', apakah yang berlaku apabila kita menghantar objek abjad ke antara muka itu?”

// Object with all alphabet letters
const alphabets = {
  a: 'Apple',
  b: 'Banana',
  c: 'Cherry',
  d: 'Date',
  e: 'Eggplant',
  f: 'Fig',
  // ... all the way to z
};

// Interface that only allows 'a' and 'b'
interface OnlyTwoLetters {
  a: string;
  b: string;
}

// Casting alphabets to OnlyTwoLetters
const filteredAlphabets = alphabets as OnlyTwoLetters;

console.log(filteredAlphabets);

Tanpa ketinggalan, rakan sepasukan saya berkata, "Haha, anda masih akan mendapat semua huruf abjad kerana TypeScript tidak dapat menghentikannya dalam masa tayangan."

Sial. Saya tahu ia. Saya berada di bawah pengaruh harapan—berharap TypeScript secara ajaib boleh menghalang saya daripada membuat kesilapan pada masa jalanan. ?

Tetapi kemudian, ia melanda saya: Bagaimana jika TypeScript boleh menguatkuasakan ini pada masa jalan? Bagaimana jika kita boleh menghantar objek ke antara muka tertentu dan mempunyai TypeScript menanggalkan secara automatik sebarang sifat yang tidak ditakrifkan dalam antara muka?

Itu akan menyelesaikan masalah saya.

Kelahiran ts-runtime-picker

Jadi, dengan detik mentol lampu ini, saya terfikir: “Kenapa tidak jadikan ini satu kenyataan?” Jika saya boleh menghantar request.data ke antara muka Pengguna, TypeScript boleh membantu saya secara automatik mengalih keluar sebarang sifat tambahan, menjadikan objek selamat untuk dimasukkan ke dalam Firebase. ?

Dan begitu juga, idea untuk ts-runtime-picker telah lahir. Matlamatnya mudah: buat pakej yang membolehkan pengguna TypeScript menapis sifat yang tidak diingini daripada objek, berdasarkan medan yang ditakrifkan dalam antara muka tertentu.

Bahagian terbaik? Ia akan menyelamatkan saya daripada pengesahan manual dan penapisan medan. Sudah berlalu hari-hari:

firebase.collection("users").add(request.data.user);

Cara Ia Berfungsi: Biarkan TypeScript Melakukan Tugasnya

Dengan ts-runtime-picker, keseluruhan proses diautomatikkan. Anda boleh menghantar objek ke antara muka, dan pakej akan memastikan bahawa hanya sifat yang ditakrifkan dalam antara muka disimpan. Begini cara ia berfungsi dalam tindakan:

Sebelum: Pengesahan Manual

// Object with all alphabet letters
const alphabets = {
  a: 'Apple',
  b: 'Banana',
  c: 'Cherry',
  d: 'Date',
  e: 'Eggplant',
  f: 'Fig',
  // ... all the way to z
};

// Interface that only allows 'a' and 'b'
interface OnlyTwoLetters {
  a: string;
  b: string;
}

// Casting alphabets to OnlyTwoLetters
const filteredAlphabets = alphabets as OnlyTwoLetters;

console.log(filteredAlphabets);

Selepas: Dengan ts-runtime-picker

const filteredData = {
  name: requestData.name,
  age: requestData.age,
};

firebase.collection("users").add(filteredData);  // More work, less fun.

Bahagian terbaik? Kod ini selamat secara lalai. Tidak perlu pemeriksaan manual atau manipulasi objek. ts-runtime-picker mengendalikannya secara automatik untuk anda dengan menapis semua medan yang tidak wujud dalam antara muka Pengguna. Anda hanya boleh fokus pada logik teras anda tanpa perlu risau tentang sisipan medan yang tidak disengajakan. ?

Kuasa Kemalasan (dan Bagaimana Ia Boleh Membawa Kepada Inovasi)

Jadi, anda mungkin tertanya-tanya: "Adakah ini datang dari kemalasan semata-mata?" Dan untuk itu, saya katakan: Ya, tetapi juga, tidak. ?

Pasti, cetusan awal idea itu datang daripada saya yang agak malas—saya tidak mahu menapis medan secara manual setiap kali saya perlu memasukkan data. Tetapi hei, kadang-kadang kemalasan membawa kepada kecemerlangan! Keinginan untuk memudahkan segalanya boleh menjadi pendorong kepada inovasi.

Malah, walaupun pada awalnya "kemalasan," saya menghabiskan 8 jam membina pakej itu. Ya, betul. ?

Tetapi begitulah kadangkala. "Keperluan melahirkan ciptaan," dan keperluan ini untuk mengelakkan pemeriksaan berulang yang membosankan membawa kepada penyelesaian baharu yang akhirnya menjadikan hidup saya (dan mudah-mudahan kehidupan ramai orang lain) lebih mudah.

Jadi, sementara saya boleh menyalahkan kemalasan kerana membuat bola bergolek, keperluan untuk menyelesaikan masalah yang menimbulkan ts-runtime-picker. Dan begitulah kadangkala, terperangkap atau malas tidak semestinya sesuatu yang buruk—ia adalah tempat kelahiran sesuatu yang baharu dan berguna!

Kesimpulan

Dan itulah kisah di sebalik pakej ts-runtime-picker. Perjalanan daripada kekecewaan TypeScript kepada mencipta alat yang menyelesaikan masalah sebenar. Pakej ini ialah cara saya membantu pengguna TypeScript memanfaatkan sepenuhnya keselamatan jenis — bukan sahaja semasa pembangunan tetapi juga dalam masa jalan.

Jika anda bosan menapis medan secara manual atau bimbang tentang data yang tidak diingini menyelinap masuk, berikan ts-runtime-picker pukulan. Satu perkara yang kurang perlu dibimbangkan, dan ia menjadikan kerja dengan TypeScript lebih bijak. ?

Atas ialah kandungan terperinci Beyond Type Safety: menjadikan TypeScript lebih pintar dengan Membina Pemilih Masa Jalan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!