Conseils pour utiliser TypeScript avec React dans une grande base de code

Vous vous demandez quels défis vous attendent lorsque vous souhaitez utiliser TypeScript avec React et que vous avez une base de code importante à migrer ? Découvrez-le dans ce blog, accompagné de conseils pratiques.

La popularité que TypeScript a gagnée au cours des dernières années est folle. La communauté JavaScript a adopté TypeScript et nous voyons maintenant de nombreux projets écrits en TypeScript.

On peut dire que React est un framework neutre – il ne vous oblige pas à utiliser JavaScript ou TypeScript, mais il vous laisse le choix. Dans les premières années d’existence de React, la norme était d’utiliser JavaScript pour créer des applications React. Ensuite, la communauté React a commencé à remarquer tous les avantages que TypeScript peut apporter à une base de code React et a commencé à migrer.

Les avantages que TypeScript peut apporter à un projet sont nombreux. Il améliore la lisibilité, la maintenabilité et la cohérence du code. Surtout dans les bases de code volumineuses, TypeScript permet de détecter facilement les bogues et les erreurs potentiels bien avant leur expédition.

La communauté React a adopté TypeScript et voit maintenant beaucoup plus de projets écrits en TypeScript par rapport à il y a quelques années. L’association de React et TypeScript est tout à fait logique et facilite la création d’applications React fiables et performantes. L’utilisation de TypeScript avec React fournit un meilleur IntelliSense et une complétion de code pour JSX. Nous pouvons créer des composants React réutilisables qui sont de type sécurisé, évitant ainsi les erreurs inattendues en cours de route.

Conseils pour migrer vers TypeScript

Lorsque vous décidez de migrer vers l’utilisation de TypeScript avec React, nous devons prendre en compte de nombreux points.

Obtenir l’adhésion de l’équipe

Lorsque nous travaillons sur une grande base de code, nous ne pouvons pas commencer à modifier les fichiers de la manière qui nous plaît. Chaque grande base de code a des normes et, généralement, toute l’équipe est habituée à ces normes. Les modifier sans en discuter avec l’équipe peut rapidement créer des frictions.

TypeScript apporte de nombreux avantages, mais commencer à l’adopter dans une grande base de code sans en discuter avec votre équipe peut et va aggraver les choses.

Pour obtenir l’adhésion de l’équipe, vous devez proposer à votre équipe de faire le changement. Vous pouvez créer une petite présentation avec les avantages de TypeScript pour permettre à vos coéquipiers qui ne sont pas habitués à TypeScript de comprendre pourquoi ce changement profiterait à l’équipe.

Configurer TypeScript et toujours autoriser JavaScript

Pour ceux qui ont une certaine expérience de TypeScript, la migration vers celui-ci peut être facile, mais nous devons supposer que notre équipe n’a pas cette expérience. Il existe différentes manières de migrer une base de code React vers TypeScript, mais pour une grande base de code, nous devrions envisager la meilleure méthode qui serait «l’adoption progressive».

La première chose à faire est d’installer TypeScript et de créer un fichier tsconfig.json. Le fichier tsconfig.json configure le compilateur TypeScript et les ressources pertinentes sur notre application. TypeScript peut automatiquement créer ce fichier pour vous en installant TypeScript dans votre projet à l’aide de yarn add typescript et courir tsc --init.

Après avoir créé notre fichier tsconfig.json, nous voulons autoriser les fichiers JavaScript vanille sur notre base de code. (C’est un point qui peut rendre la migration vers TypeScript encore plus viable pour votre équipe, alors assurez-vous que c’est clair lorsque vous en discutez !) Nous pouvons autoriser JavaScript en ajoutant le allowJS, checkJS et noEmit drapeaux de configuration.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "noEmit": true,
    "allowJs": true,
    "checkJs": true,
    "strict": true
  }
}

Adoptez progressivement TypeScript

Après avoir installé et configuré TypeScript, nous pouvons commencer à changer progressivement nos fichiers JavaScript en fichiers TypeScript. L’adoption progressive de TypeScript facilitera le processus et encouragera les autres développeurs de votre équipe. Nous pouvons changer l’extension de .js en .ts ou .tsx sur nos fichiers et commencer à voir quels sont les avertissements que nous avons actuellement.

Une fois le fichier tsconfig.json créé, VS Code détectera automatiquement que TypeScript est utilisé et vérifiera le type de notre code. Pour obtenir une liste d’avertissements, nous pouvons exécuter tsc sur notre terminal et le compilateur TypeScript renverra une liste d’avertissements de type et un code de sortie différent de zéro en cas de problème.

Défis de la migration vers TypeScript

Après l’installation, la configuration et la migration des fichiers JavaScript vers TypeScript, les défis commencent à apparaître. Les bases de code volumineuses contiennent de nombreux fichiers, et l’adoption progressive de TypeScript signifie que nous devons parcourir chaque fichier et y corriger tous les avertissements.

La plupart des défis auxquels une grande base de code sera confrontée lors de l’adoption de TypeScript sont dus à des problèmes d’interopérabilité entre TypeScript et React. Voyons quelques défis auxquels votre équipe pourrait être confrontée et comment vous pouvez les résoudre.

Définir des accessoires à l’aide de TypeScript avec React

La defaultProps La propriété statique est un objet que nous avons laissé en dehors de notre composant et nous définissons les propriétés que notre composant doit avoir.

import React from "react";

const User = ({ user }) => {
  return (
    <div>
      <h1>{user.name}</h1>
      <h2>{user.age}</h2>
    </div>
  );
};

User.defaultProps = {
  user: {
    name: "Leonardo",
    age: 21
  }
};

export default User;

Nous n’avons pas besoin d’utiliser defaultProps lorsque nous utilisons TypeScript avec React. Nous pouvons définir les accessoires de notre composant à l’aide d’un TypeScript type objet. Généralement, ça se passe comme ça :

On définit un type appelé Props et à l’intérieur de ce type, nous passons tous les accessoires que notre composant peut recevoir.

import React from "react";

type Props = {
  name: string;
  age: number;
}

const User = (props: Props) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <h2>{props.age}</h2>
    </div>
  );
};

export default User;

C’est une bonne pratique de déstructurer notre objet d’accessoires – cela permet plus de flexibilité dans la façon dont nous pouvons définir nos accessoires. En le déstructurant, nous pouvons également passer des props par défaut. Par exemple, imaginons que nous voulions transmettre une valeur par défaut à notre age soutenir. Voici comment nous procéderions :

import React from "react";

type Props = {
  name: string;
  age: number;
};

const User = ({ name, age = 21 }: Props) => {
  return (
    <div>
      <h1>{name}</h1>
      <h2>{age}</h2>
    </div>
  );
};

export default User;

Partager les états avec le contexte React

Contexte de réaction permet de partager et gérer les états sur vos composants sans transmettre d’accessoires. Semblable à des bibliothèques comme Redux, Context peut être un excellent choix pour partager des états entre vos composants sans avoir à installer une bibliothèque pour cela.

Nous devrions utiliser TypeScript dans nos contextes et le rendre plus fiable et plus sûr. Nous pouvons implémenter TypeScript dans nos contextes très facilement :

import { createContext } from "react";

interface UserContextI {
  name: string;
  age: number;
}

const defaultState = {
  name: "Leonardo",
  age: 21
};

const UserContext = createContext<UserContextI>(defaultState);

export default UserContext;

C’est un défi pour chaque entreprise qui décide de migrer vers TypeScript, mais la migration progressive peut atténuer les défis et faciliter l’adoption. Rappelez-vous que c’est un processus qui peut prendre des jours, des semaines ou des mois. N’essayez pas de précipiter les choses et de faire en sorte que tout se produise en même temps.

Conclusion

Migrer vers TypeScript est une décision qui profitera à long terme à une large base de code. Les avantages de l’utilisation de TypeScript avec React, tels que la lisibilité, la maintenabilité et la cohérence du code, sont difficiles à battre.

Ensuite, vous voudrez peut-être lire Utilisation de TypeScript avec les composants React et KendoReact.