TypeScript React Uygulamasında PropTypes

Kullanıyor React.PropTypesTypeScript React Uygulamasında mantıklı mıdır yoksa bu sadece bir "kemer ve askılar" durumu mu?

Bileşen sınıfı bir Propstür parametresiyle bildirildiğinden :

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

eklemenin gerçek bir faydası var mı

static propTypes {
    myProp: React.PropTypes.string
}

sınıf tanımına?

Hem bileşen dikmelerinizi TypeScript türleri olarak korumanın hem de React.PropTypes de aynı anda .

İşte bunu yapmanın yararlı olduğu bazı durumlar:

• Düz JavaScript tarafından kullanılacak bir bileşen kitaplığı gibi bir paket yayınlama.
• API çağrısının sonuçları gibi harici girdileri kabul etme ve iletme.
• Varsa, yeterli veya doğru yazımlara sahip olmayan bir kitaplıktaki verileri kullanmak.

Bu nedenle, genellikle derleme zamanı doğrulamanıza ne kadar güvenebileceğiniz sorusudur.

TypeScript'in daha yeni sürümleri artık sizin React.PropTypes( PropTypes.InferProps) türünüze dayalı olarak türler çıkarabilir , ancak ortaya çıkan türlerin kullanılması veya kodunuzun başka bir yerinde başvurulması zor olabilir.

Typescript ve PropTypes farklı amaçlara hizmet eder. Typescript , derleme zamanında türleri doğrular , oysa PropTypes çalışma zamanında kontrol edilir .

TypeScript, kod yazarken kullanışlıdır: React bileşenlerinize yanlış türde bir argüman iletirseniz sizi uyarır, size işlev çağrıları için otomatik tamamlama sağlar, vb.

PropTypes, bileşenlerin harici verilerle nasıl etkileşim kurduğunu test ettiğinizde, örneğin bir API'den JSON yüklediğinizde kullanışlıdır. PropTypes, aşağıdakiler gibi yararlı mesajlar yazdırarak bileşeninizin neden başarısız olduğunu (React'in Geliştirme modundayken) ayıklamanıza yardımcı olacaktır:

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

Typescript ve PropTypes aynı şeyi yapıyor gibi görünse de, aslında hiç örtüşmüyorlar. Ancak, türleri iki kez belirtmenize gerek kalmaması için Typescript'ten otomatik olarak PropTypes oluşturmak mümkündür, örneğin bakınız:

• https://github.com/milesj/babel-plugin-typescript-to-proptypes
• https://github.com/grncdr/ts-react-loader#what-it-does
• https://github.com/gcanti/prop-types-ts

Props türünün derleme zamanında çıkarılamadığı bazı karışık durumlarda, o zaman kullanımdan kaynaklanan uyarıları görmek faydalı olacaktır. propTypes , çalışma zamanında kullanımdan .

Böyle bir durum, kontrolünüz dışındaki bir harici API gibi tür tanımlarının mevcut olmadığı harici bir kaynaktan veri işlenirken olabilir. Dahili API'ler için, zaten mevcut değilse, tip tanımları yazma (veya daha iyisi, oluşturma) çabasına değer olduğunu düşünüyorum.

Bunun dışında herhangi bir fayda görmüyorum (ki bu yüzden kişisel olarak hiç kullanmadım).