Bereaksi PropTypes vs. Flow

PropTypes dan Flow mencakup hal-hal yang serupa tetapi menggunakan pendekatan yang berbeda. PropTypes dapat memberi Anda peringatan selama runtime, yang dapat membantu untuk dengan cepat menemukan respons yang salah format yang berasal dari server, dll. Namun, Flow tampaknya akan menjadi masa depan dan dengan konsep seperti obat generik adalah solusi yang sangat fleksibel. Juga pelengkapan otomatis yang ditawarkan oleh Nuclide merupakan nilai tambah yang besar untuk Flow.

Pertanyaan saya sekarang adalah yang mana cara terbaik untuk pergi, ketika memulai proyek baru. Atau mungkinkah ini solusi yang baik untuk menggunakan keduanya, Flow dan PropTypes? Masalah dengan menggunakan keduanya adalah Anda menulis banyak kode duplikat. Ini adalah contoh aplikasi pemutar musik yang saya tulis:

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

Kedua definisi tersebut pada dasarnya berisi informasi yang sama dan ketika tipe datanya diubah, kedua definisi tersebut perlu diperbarui.

Saya menemukan plugin babel ini untuk mengonversi deklarasi tipe ke PropTypes, yang mungkin bisa menjadi solusi.

Satu tahun setelah menanyakan pertanyaan ini, saya ingin memberikan update tentang bagaimana pengalaman saya dengan masalah ini.

Karena Flow berkembang pesat, saya mulai mengetik basis kode saya dengannya dan tidak menambahkan definisi PropType baru. Sejauh ini, menurut saya ini adalah cara yang baik, karena seperti yang disebutkan di atas, ini memungkinkan Anda untuk tidak hanya mengetik props tetapi juga bagian lain dari kode Anda. Ini sangat berguna misalnya ketika Anda memiliki salinan props Anda dalam keadaan, yang dapat dimodifikasi oleh pengguna. Selain itu, penyelesaian otomatis di IDE merupakan keuntungan yang luar biasa.

Konverter otomatis di satu atau arah lain tidak benar-benar lepas landas. Jadi, untuk proyek baru, saya sekarang sangat merekomendasikan menggunakan Flow over PropTypes (jika Anda tidak ingin melakukan pengetikan dua kali).

Selain keduanya termasuk dalam bidang pemeriksaan tipe yang sangat luas, tidak ada banyak kesamaan di antara keduanya.

Flow adalah alat analisis statis yang menggunakan superset dari bahasa tersebut, memungkinkan Anda untuk menambahkan penjelasan jenis ke semua kode Anda dan menangkap seluruh kelas bug pada waktu kompilasi.

PropTypes adalah pemeriksa tipe dasar yang telah ditambal ke React. Itu tidak dapat memeriksa apa pun selain jenis props yang diteruskan ke komponen tertentu.

Jika Anda ingin pemeriksaan jenis yang lebih fleksibel untuk seluruh proyek Anda, maka Flow / TypeScript adalah pilihan yang tepat. Selama Anda hanya meneruskan tipe beranotasi ke dalam komponen, Anda tidak memerlukan PropTypes.

Jika Anda hanya ingin memeriksa jenis prop, jangan terlalu memperumit basis kode Anda dan gunakan opsi yang lebih sederhana.

Saya percaya poin yang terlewat di sini adalah bahwa Flow adalah pemeriksa statis sementara PropTypes adalah pemeriksa runtime , yang artinya

• Flow dapat mencegat kesalahan upstream saat melakukan pengkodean: secara teoritis dapat melewatkan beberapa kesalahan yang tidak akan Anda ketahui (jika Anda tidak mengimplementasikan aliran yang cukup dalam proyek Anda misalnya, atau dalam kasus objek bersarang yang dalam)
• PropTypes akan menangkapnya saat pengujian, jadi tidak akan pernah terlewat

Coba deklarasikan tipe props hanya dengan menggunakan Flow. Tentukan jenis yang salah, seperti angka, bukan string. Anda akan melihat bahwa ini akan ditandai dalam kode yang menggunakan komponen dalam editor yang sadar-Flow. Namun, ini tidak akan menyebabkan pengujian apa pun gagal dan aplikasi Anda akan tetap berfungsi.

Sekarang tambahkan penggunaan React PropTypes dengan tipe yang salah. Ini AKAN menyebabkan pengujian gagal dan ditandai di konsol browser saat aplikasi dijalankan.

Berdasarkan ini, tampaknya meskipun Flow sedang digunakan, PropTypes juga harus ditentukan.