PropTypes in einer TypeScript React-Anwendung

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?

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.

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:

• 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

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).