PropTypes dalam Aplikasi TypeScript React

121

Apakah menggunakan React.PropTypesmasuk akal dalam Aplikasi TypeScript React atau apakah ini hanya kasus "sabuk dan suspender"?

Karena kelas komponen dideklarasikan dengan Propsparameter type:

interface Props {
    // ...
}
export class MyComponent extends React.Component<Props, any> { ... }

apakah ada manfaat nyata untuk menambahkan

static propTypes {
    myProp: React.PropTypes.string
}

dengan definisi kelas?

reactjs typescript react-proptypes

— Muntah
sumber

Jawaban:

104

Biasanya tidak banyak manfaat untuk mempertahankan kedua props komponen Anda sebagai tipe TypeScript dan React.PropTypespada saat yang sama.

Berikut beberapa kasus yang berguna untuk melakukannya:

Menerbitkan paket seperti pustaka komponen yang akan digunakan oleh JavaScript biasa.
Menerima dan meneruskan input eksternal seperti hasil dari panggilan API.
Menggunakan data dari perpustakaan yang mungkin tidak memiliki pengetikan yang memadai atau akurat, jika ada.

Jadi, biasanya ini adalah pertanyaan tentang seberapa besar Anda dapat mempercayai validasi waktu kompilasi Anda.

Versi TypeScript yang lebih baru sekarang dapat menyimpulkan jenis berdasarkan your React.PropTypes( PropTypes.InferProps), tetapi jenis yang dihasilkan bisa jadi sulit digunakan atau dirujuk ke tempat lain dalam kode Anda.

— Joel Day
sumber

Bisakah Anda menjelaskan pernyataan pertama?

— Vehiclesakul

@vehsakul Maaf, untuk klarifikasi, jika Anda menulis sebuah paket yang akan diinstal oleh pengembang yang tidak menggunakan TypeScript, mereka masih membutuhkan PropTypes untuk mendapatkan kesalahan saat menjalankan. Jika proyek Anda hanya untuk Anda sendiri / proyek TypeScript lainnya, antarmuka TypeScript untuk alat peraga Anda sudah cukup karena proyek tidak akan dibangun.

— Hari Joel

Ini adalah POC yang menambahkan PropTypes dari antarmuka skrip di tingkat Webpack github.com/grncdr/ts-react-loader#what-it-does

— borN_free

Saya ingin oneOfType - optionalUnion: PropTypes.oneOfType ([PropTypes.string, PropTypes.number, PropTypes.instanceOf (Message)]), - typescript memiliki tipe gabungan, tetapi mereka tidak memberi saya hal yang sama

— Mz Sebuah

Saya telah menerbitkan pustaka yang melakukan ini juga: github.com/joelday/ts-proptypes-transformer Ini diimplementasikan sebagai transformasi kompiler TypeScript dan menghasilkan propTypes yang akurat untuk obat generik yang dalam, serikat pekerja, dll. Ada beberapa sisi kasar, jadi kontribusi apa pun akan luar biasa.

— Hari Joel

141

Typecript dan PropTypes melayani tujuan yang berbeda. Ketikan memvalidasi tipe pada waktu kompilasi , sedangkan PropTypes diperiksa saat runtime .

Ketikan berguna ketika Anda menulis kode: ini akan memperingatkan Anda jika Anda mengirimkan argumen dengan tipe yang salah ke komponen React Anda, memberi Anda pelengkapan otomatis untuk pemanggilan fungsi, dll.

PropTypes berguna saat Anda menguji bagaimana komponen berinteraksi dengan data eksternal, misalnya saat Anda memuat JSON dari API. PropTypes akan membantu Anda men-debug (saat dalam mode Pengembangan React) mengapa komponen Anda gagal dengan mencetak pesan yang berguna seperti:

Warning: Failed prop type: Invalid prop `id` of type `number` supplied to `Table`, expected `string`

Meskipun sepertinya Typecript dan PropTypes melakukan hal yang sama, mereka sebenarnya tidak tumpang tindih sama sekali. Tapi dimungkinkan untuk secara otomatis menghasilkan PropTypes dari Typecript sehingga Anda tidak perlu menentukan tipe dua kali, lihat misalnya:

— afonsoduarte
sumber

Apakah jenis propTypes dan Typecript tidak sinkron dengan mudah? Adakah yang punya pengalaman pemeliharaan untuk memberi tahu kami?

— Leonardo

Ini jawaban yang benar! PropTypes (waktu proses) tidak sama dengan pemeriksaan tipe statis (waktu kompilasi). Oleh karena itu, menggunakan keduanya bukanlah 'latihan yang tidak berguna'.

— hans

Berikut adalah penjelasan yang bagus tentang bagaimana tipe statis dapat disimpulkan dari PropTypes: dev.to/busypeoples/…

— hans

Waktu proses vs waktu kompilasi tidak masuk akal jika Anda memiliki cli vue dengan hot reload dan eslint. Yang menghasilkan kesalahan saat menyimpan.

— Julia

@ Julia, hot reload tidak ada kesamaannya dengan runtime. Bahkan dengan hot reload Anda tidak akan tahu apa yang sebenarnya dikembalikan oleh api

— Kostya Tresko

Saya rasa dalam beberapa situasi yang berantakan di mana jenis props tidak dapat disimpulkan pada waktu kompilasi, maka akan berguna untuk melihat peringatan yang dihasilkan dari penggunaan propTypespada waktu proses.

Salah satu situasi tersebut adalah ketika memproses data dari sumber eksternal yang definisi jenisnya tidak tersedia, seperti API eksternal di luar kendali Anda. Untuk API internal, menurut saya sepadan dengan usaha untuk menulis (atau lebih baik, menghasilkan) definisi tipe, jika mereka belum tersedia.

Selain itu, saya tidak benar-benar melihat manfaat apa pun (yang mengapa saya tidak pernah menggunakannya secara pribadi).

— Tom Fenech
sumber

Validasi PropTypes juga masuk akal untuk memvalidasi struktur data yang dimuat secara manual (berasal dari server melalui AJAX). PropTypes adalah validasi runtime, dan dengan demikian dapat sangat membantu untuk men-debug barang. Karena masalah akan menghasilkan pesan yang jelas dan ramah manusia.

— e1v