Commencer avec TypeScript dans React Native: configuration, avantages sociaux et meilleures pratiques

React Native a attiré une attention significative pour la création d’applications mobiles qui fonctionnent sur des plateformes avec une seule base de code. Cependant, à mesure que les projets évoluent, la gestion des accessoires de composants, les types d’État et les intégrations d’API peut devenir difficile. C’est là que TypeScript brille.

Dans ce blog, nous explorerons comment intégrer TypeScript dans un projet Native React, comprendre ses avantages et consulter les meilleures pratiques avec des exemples de code réels.

Configuration de TypeScript dans un projet Native React

Nouveau projet (React natif 0,71+)
À partir de React Native V0.71, TypeScript est inclus par défaut:
npx @ react-native-community / cli init myapp

Ajout de typeScript à un projet existant

Étape 1: Installez les définitions de typeScript et de type
Installation NPM –Save TypeScript @ Types / Node @ Types / React @ Types / React-Dom @ Types / JEST @ TSCONFIG / REACT-Native
OU
yarn Ajouter TypeScript @ Types / Node @ Types / React @ Types / React-Dom @ Types / JEST @ TSCONFIG / REACT-Native

Étape 2: Ajouter un fichier tsconfig.json

Étape 3: Renommer les fichiers
Renommez vos fichiers de .js / .jsx à .ts / .tsx selon qu’ils contiennent JSX.

Avantages de l’utilisation de TypeScript dans React Native

1. Type de sécurité
Attrapez des bugs au moment de la compilation, pas de l’exécution.

2. Metter Intellisense
Votre éditeur peut offrir une complétion automatique précise, des conseils de type en ligne et une documentation – améliorant considérablement la productivité.

3. Amélioration de la qualité et de la documentation du code
Les interfaces et les types agissent comme une documentation en direct pour vos composants et API.

4. refactoring plus facile
Les contrôles de type fournissent un filet de sécurité lors du renommer des accessoires ou de la logique de restructuration, ce qui réduit le risque d’erreurs d’exécution.

Meilleures pratiques pour utiliser TypeScript dans React Native

1. Définir les types d’accessoires avec des interfaces

2. Utilisez React.fc avec des accessoires pour enfants

3. Évitez tout type

4. Centraliser les types
Créez un type / répertoire pour les types globaux comme l’utilisateur, le produit, etc.

5.) Utiliser des énumérations pour les constantes

TypeScript dans Redux

Définir l’état et les actions

Taper le réducteur

Typing useylector et usedispatch

TypeScript en navigation réactive

Étape 1: Définissez votre liste de paramètres de navigation
Créer une définition de type dans un fichier type / navigation.ts:

Étape 2: Créez le navigateur avec des types

Étape 3: Accédez à la navigation et aux accessoires d’itinéraire avec une frappe appropriée dans vos écrans

Tapez les opérateurs et les modèles dans les interfaces

Les interfaces de typeScript prennent en charge plusieurs fonctionnalités puissantes pour construire des types flexibles et maintenables.

1. Types d’union (|)
Permet à un champ d’être l’un des nombreux types.

2. Propriétés facultatives (?)
Rend une propriété facultative.

3. Types d’intersection (&)
Combine plusieurs types ou interfaces.

4. Propriétés en lecture seule (ReadOnly)
Empêche la modification après initialisation.

5. Signatures d’index ([key: string]: taper)
Définit des clés dynamiques avec des types de valeur cohérents.

6. Types de fonctions dans l’interface
Vous pouvez spécifier le type d’une fonction directement en tant que propriété dans une interface.

7. Extension des interfaces
Vous pouvez étendre une ou plusieurs interfaces.

8. Tapes ou types de tableau dans les interfaces

9.) Types génériques dans l’interface
Les interfaces peuvent également être génériques:

Exemple: interface avancée de boutonprops

Exemple: appel et composant API dactylographiques

Interface vs type dans TypeScript

L’interface et le type peuvent être utilisés pour définir la forme des objets dans TypeScript – mais ils ont des différences clés et des cas d’utilisation.

Utilisez l’interface lorsque:

• • Vous définissez la structure des objets ou des classes
  • Vous souhaitez étendre ou implémenter dans d’autres interfaces ou classes
  • Vous construisez des accessoires React, où l’interface est couramment préférée

Utiliser le type lorsque:

• Vous devez définir les syndicats, les intersections ou les alias primitifs
• Vous travaillez avec des types de fonctions, des tuples ou des compositions complexes

Exemple de comparaison

Les deux sont valables – et dans de nombreux cas de base, c’est une question de préférence.

Pourquoi choisir TypeScript plutôt que JavaScript?

Au fur et à mesure que votre base de code native React augmente, se fier à JavaScript peut entraîner plus d’erreurs et d’incohérences. TypeScript introduit une meilleure structure, sécurité et maintenabilité – ce qui en fait une évidence pour le développement grave des applications.

Conclusion: Si vous travaillez sur une application Native React en croissance, TypeScript n’est pas facultatif – c’est essentiel.

Conclusion

Incorporer TypeScript dans votre projet Native React offre de nombreux avantages – de la capture de bogues tôt pour améliorer votre vitesse de développement et votre stabilité de l’application. Qu’il s’agisse de commencer frais ou de migrer une base de code existante, même les petites améliorations de typeScript peuvent conduire à de grosses victoires.

Conseil: Si vous migrez un projet existant, commencez petit – convertissez quelques composants, tapez la couche API et grandissez à partir de là.

Vous avez trouvé cela utile? PARTAGEZ-LE