PropTypes in einer TypeScript React-Anwendung

118

Ist die Verwendung React.PropTypesin einer TypeScript React-Anwendung sinnvoll oder handelt es sich nur um "Gürtel und Hosenträger"?

Da die Komponentenklasse mit einem PropsTypparameter deklariert ist:

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

Gibt es einen wirklichen Vorteil beim Hinzufügen?

static propTypes {
    myProp: React.PropTypes.string
}

zur Klassendefinition?

Ralph
quelle

Antworten:

102

Es ist normalerweise nicht sehr wertvoll, beide Komponenten-Requisiten als TypeScript-Typen und React.PropTypesgleichzeitig zu verwalten.

Hier sind einige Fälle, in denen dies sinnvoll ist:

  • Veröffentlichen eines Pakets wie einer Komponentenbibliothek, die von einfachem JavaScript verwendet wird.
  • Akzeptieren und Weitergeben externer Eingaben, z. B. Ergebnisse eines API-Aufrufs.
  • Verwenden von Daten aus einer Bibliothek, die möglicherweise keine angemessenen oder genauen Typisierungen aufweisen, falls vorhanden.

In der Regel geht es also darum, wie sehr Sie Ihrer Validierung der Kompilierungszeit vertrauen können.

Neuere Versionen von TypeScript können jetzt Typen basierend auf Ihrem React.PropTypes( PropTypes.InferProps) ableiten , aber die resultierenden Typen können schwierig zu verwenden sein oder auf andere Stellen in Ihrem Code verweisen.

Joel Day
quelle
1
Könnten Sie bitte die erste Aussage erklären?
vehsakul
2
@vehsakul Zur Verdeutlichung: Wenn Sie ein Paket schreiben, das von Entwicklern installiert wird, die kein TypeScript verwenden, benötigen sie weiterhin PropTypes, um zur Laufzeit Fehler zu erhalten. Wenn Ihr Projekt nur für Sie selbst / andere TypeScript-Projekte bestimmt ist, reichen die TypeScript-Schnittstellen für Ihre Requisiten aus, da das Projekt einfach nicht erstellt wird.
Joel Day
1
Dies ist ein POC , die PropTypes von Typoskript Schnittstellen auf Webpack Ebene ergänzt github.com/grncdr/ts-react-loader#what-it-does
borN_free
Ich möchte eine oneOfType - optionale Einheit: PropTypes.oneOfType ([PropTypes.string, PropTypes.number, PropTypes.instanceOf (Nachricht)]), - Typenskript hat Unionstypen, aber sie geben mir nicht ganz das Gleiche
Mz A
1
Ich habe eine Bibliothek veröffentlicht, die dies ebenfalls tut: github.com/joelday/ts-proptypes-transformer Sie ist als TypeScript-Compiler-Transformation implementiert und erzeugt genaue propTypes für Deep Generics, Gewerkschaften usw. Es gibt also einige Ecken und Kanten Beiträge wären wunderbar.
Joel Day
135

Typescript und PropTypes dienen unterschiedlichen Zwecken. Typescript überprüft Typen zur Kompilierungszeit , während PropTypes zur Laufzeit überprüft werden .

Typoskript ist nützlich, wenn Sie Code schreiben: Es warnt Sie, wenn Sie ein Argument des falschen Typs an Ihre React-Komponenten übergeben, eine automatische Vervollständigung für Funktionsaufrufe usw. durchführen.

PropTypes sind nützlich, wenn Sie testen, wie die Komponenten mit externen Daten interagieren, z. B. wenn Sie JSON von einer API laden. PropTypes hilft Ihnen beim Debuggen (im Entwicklungsmodus von React), warum Ihre Komponente ausfällt, indem hilfreiche Meldungen wie die folgenden gedruckt werden:

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

Auch wenn es so aussieht, als ob Typescript und PropTypes dasselbe tun, überlappen sie sich überhaupt nicht. Es ist jedoch möglich, PropTypes automatisch aus Typescript zu generieren, sodass Sie Typen nicht zweimal angeben müssen, siehe zum Beispiel:

afonsoduarte
quelle
Sind die Typen propTypes und Typescript nicht mehr synchron? Hat uns jemand Wartungserfahrung mitgeteilt?
Leonardo
9
Das ist die richtige Antwort! PropTypes (Laufzeit) sind nicht dasselbe wie statische Typprüfung (Kompilierungszeit). Daher ist es keine „sinnlose Übung“, beide zu verwenden.
Hans
1
Hier ist eine schöne Erklärung, wie statische Typen aus PropTypes abgeleitet werden können: dev.to/busypeoples/…
hans
Runtime vs Compile Time macht keinen Sinn, wenn Sie Vue Cli mit Hot Reload und Eslint haben. Was beim Speichern Fehler erzeugt.
Julia
1
@ Julia, Hot Reload hat nichts mit Laufzeit zu tun. Selbst beim heißen Nachladen haben Sie keine Ahnung, was von api
Kostya Tresko
4

Ich denke, dass in einigen chaotischen Situationen, in denen der Typ der Requisiten zur Kompilierungszeit nicht abgeleitet werden kann, es nützlich wäre, alle Warnungen zu sehen, die durch die Verwendung propTypeszur Laufzeit generiert wurden.

Eine solche Situation besteht darin, Daten aus einer externen Quelle zu verarbeiten, für die keine Typdefinitionen verfügbar sind, z. B. eine externe API, auf die Sie keinen Einfluss haben. Für interne APIs ist es meiner Meinung nach die Mühe wert, Typdefinitionen zu schreiben (oder besser zu generieren), wenn sie nicht bereits verfügbar sind.

Davon abgesehen sehe ich keinen wirklichen Nutzen (weshalb ich ihn nie persönlich genutzt habe).

Tom Fenech
quelle
7
Die Validierung von PropTypes ist auch sinnvoll, um Datenstrukturen zu validieren, die dymanisch geladen wurden (vom Server über AJAX). PropTypes ist eine Laufzeitüberprüfung und kann daher beim Debuggen von Inhalten sehr hilfreich sein. Da Probleme klare und menschenfreundliche Botschaften ausgeben.
e1v