web-dev-qa-db-fra.com

PropTypes dans une application TypeScript React

Utiliser React.PropTypes a-t-il un sens dans une application TypeScript React ou s'agit-il simplement d'un cas "ceinture et bretelles"?

Puisque la classe de composants est déclarée avec un paramètre de type Props:

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

y at-il un avantage réel à ajouter

static propTypes {
    myProp: React.PropTypes.string
}

à la définition de la classe?

reactjstypescriptreact-proptypes
25
Ralph

Si vous écrivez des composants destinés à être utilisés par des projets non-TypeScript, tels qu'une bibliothèque de composants, ces projets ne pourront pas bénéficier de la validation de type basée sur PropTypes.

Si, toutefois, vous not créez quelque chose qui sera consommé par un projet non-TypeScript, il s'agit d'un exercice inutile. Cela est d'autant plus vrai maintenant que TypeScript 2.4 prend en charge la vérification de type enfant JSX ( https://github.com/Microsoft/TypeScript/issues/13618 ).

N'oubliez pas que bien que context soit fourni en tant que any, contextTypes est toujours nécessaire pour que ces valeurs soient transmises à votre composant.

Je voudrais savoir s'il existe un outil capable de générer propTypes automatiquement lors de la compilation à partir d'interfaces TypeScript. Ce serait plutôt cool.

28
Joel Day

Je suppose que dans certaines situations compliquées où le type d'accessoires ne peut pas être déduit au moment de la compilation, il serait utile de voir les avertissements générés par l'utilisation de propTypes.

En dehors de cela, je ne vois pas vraiment d'avantage (pourquoi je ne l'ai jamais utilisé personnellement).

4
Tom Fenech

TypeScript et PropTypes ont des objectifs différents. TypeScript valide les types à compilation alors que les PropTypes sont vérifiés à exécution 

TypeScript est utile lorsque vous écrivez du code: il vous avertira si vous passez un argument d'un type incorrect à vos composants React, vous fournissez une saisie semi-automatique pour les appels de fonction, etc. 

Les PropTypes sont utiles lorsque vous testez la manière dont les composants interagissent avec des données externes, par exemple lorsque vous chargez JSON à partir d'une API. PropTypes vous aidera à déboguer (en mode développement de React) les raisons de l'échec de votre composant en imprimant des messages utiles tels que:

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

Même s'il peut sembler que TypeScript et PropTypes fassent la même chose, ils ne se chevauchent pas du tout. Mais il est possible de générer automatiquement des PropTypes à partir de TypeScript afin de ne pas avoir à spécifier deux types de types, voir par exemple:

1
afonsoduarte