Premiers pas avec TypeScript et React

Dans cet article, nous examinerons quelques avantages de l’utilisation de TypeScript avec React. Ensuite, nous mettrons en place un projet React-TypeScript et passerons en revue certains des principes fondamentaux.

Manuscrit est un sur-ensemble typé de JavaScript qui se compile en JavaScript standard. Avec TypeScript, vous spécifiez des types pour les valeurs de votre code, ce qui vous permet d’écrire du code avec plus de confiance.

Au fil des ans, TypeScript a gagné en popularité auprès des développeurs et a été adopté par diverses bibliothèques et frameworks. Alors que certaines de ces bibliothèques et frameworks ont adopté TypeScript par défaut, Réagir vous donne la possibilité d’utiliser TypeScript ou non.

React est une bibliothèque JavaScript qui offre une méthode déclarative basée sur des composants pour créer des interfaces utilisateur. La combinaison de TypeScript et React s’est avérée efficace, le type TypeScript vérifiant le code pour identifier les erreurs et améliorer la qualité de l’ensemble du processus de développement, tandis que React se concentre sur la création de l’interface utilisateur.

Dans cet article, nous examinerons quelques avantages de l’utilisation de Typescript avec React ; ensuite, nous mettrons en place un projet React-TypeScript et passerons en revue certains des principes fondamentaux.

Conditions préalables

Cet article suppose que vous avez des connaissances de base sur JavaScript et React.

Avantages de l’utilisation de TypeScript avec React

Voici quelques-uns des avantages que TypeScript offre lors de la création d’applications React :

• Vérification de type statique et meilleur IntelliSense : Le type TypeScript vérifie le code et signale une erreur avant de compiler le code.
• Meilleure lisibilité et maintenabilité : Avec les définitions de type, la base de code devient beaucoup plus lisible et maintenable.
• Meilleure prise en charge de JSX : TypeScript s’intègre bien à IntelliSense et offre une meilleure saisie automatique du code pour JSX.
• Moins d’erreurs indéfinies : TypeScript réduit la probabilité que des erreurs indéfinies se produisent lors de l’exécution.

Configuration d’un projet React-TypeScript

Il existe de nombreuses façons d’ajouter TypeScript à une application React, mais la plus simple et la plus rapide consiste à utiliser créer-réagir-app. Il s’agit d’un outil CLI automatique qui générera la structure du fichier et créera automatiquement tous les fichiers de paramètres pour notre projet. Avec create-react-app, nous n’avons pas besoin de configurer manuellement un transpiler, un bundler, etc. Au lieu de cela, il gère toutes les configurations nous permettant de nous concentrer sur la construction de notre application.

Exécutez la commande suivante pour configurer un projet React-TypeScript à l’aide de create-react-app :

npx create-react-app react-typescript-demo --template typescript

Cela exécute la commande create-react-app et définit l’indicateur de modèle sur typescript. Nous avons également ajouté un nom au projet—react-typescript-demomais vous pouvez utiliser tout autre nom de votre choix.

Ensuite, ouvrez le dossier nouvellement créé dans votre éditeur de code préféré en exécutant cd react-typescript-demo. La structure des dossiers du projet doit ressembler à celle affichée ci-dessous.

Si vous avez déjà utilisé React.js, cela ne devrait pas être une surprise. La structure est assez similaire; les fichiers et le dossier ont les mêmes objectifs que lorsque vous travaillez avec React, sauf que certains fichiers d’application avec .js ou
.jsx les extensions sont maintenant remplacées par .ts ou .tsx Au lieu.

Une autre différence par rapport à une simple application React est l’ajout d’un tsconfig.json fichier au niveau racine de l’application. Le fichier contient la configuration TypeScript requise. Les configurations par défaut de ce fichier nous suffisent, nous n’avons donc rien à changer.

Présentation de TypeScript

Avant de continuer, passons rapidement en revue le concept de types dans TypeScript. Déclarer une variable en JavaScript est simple, comme indiqué ci-dessous :

let name = "john";
let age = 12;

JavaScript détecte automatiquement le type d’une variable. Cependant, dans TypeScript, vous devez définir explicitement les types de variables ou d’objets à utiliser dans votre application.

Voyons comment définir les types dans TypeScript.

let name: string;
let id: number;
let inSchool: boolean;
let friends: string[];

let age: number | string; 
let bestFriend: [string, number]; 

TypeScript adopte un mécanisme de vérification de type strict et signale une erreur lorsqu’une définition de type est par défaut.

Nous définissons également des types pour les objets dans TypeScript comme indiqué ci-dessous :

type Product = {
  name: string,
  id: number,
  color?: string, 
  isAvailable: boolean,
};


let myProduct: Product = {
  name: "Aaron's product",
  id: 1,
  color: "red",
  isAvailable: true,
};

let products: Product[]; 

TypeScript vous permet également de définir des interfaces pour des définitions de type complexes.

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

L’une des principales différences entre une définition d’interface et une définition de type est que nous ne pouvons pas ajouter de nouvelles propriétés à un type, alors qu’une interface, en revanche, peut être extensible.

De plus, contrairement à une interface, l’alias de type peut être utilisé pour d’autres types, tels que les primitives, tandis qu’une déclaration d’interface est toujours un objet.

Cet article se concentre sur la façon de démarrer avec TypeScript et React, nous n’irons donc pas plus loin dans d’autres TypeScript fondamentaux. Vous pouvez cependant visitez la documentation officielle de TypeScript pour apprendre plus.

Comment créer des composants React avec TypeScript

React adopte une approche basée sur les composants pour créer des interfaces utilisateur. Avec TypeScript, nous pouvons définir à la fois des composants basés sur des fonctions et des classes. Nous utiliserons exclusivement la méthode function dans cet article pour créer des composants React.

La syntaxe pour créer un composant de fonction React simple avec TypeScript est similaire à celle utilisée lorsque vous utilisez React en clair.

import React from "react";

function App() {
  return <div className="App">Hello World</div>;
}
export default App;

Ici, la fonction est simple et directe et ne dépend d’aucune autre entité externe, nous n’avons donc pas eu à lui fournir de types manuellement. TypeScript détecte automatiquement que le type de retour de notre composant est un élément JSX.

En revanche, si le composant accepte les props, nous devons déclarer un type ou une interface pour définir la forme de l’objet props. Vous trouverez ci-dessous comment ajouter des accessoires au composant App.

import React from "react";

type appProps = {
  name: string,
  age?: number, 
};

function App({ name, age }: appProps) {
  return (
    <div className="App">
      <h2>{name}</h2>
      <p>{age}</p>
    </div>
  );
}
export default App;

Dans le code ci-dessus, nous avons défini un name accessoire de type string et un facultatif age accessoire de type number.

Un composant peut également accepter des fonctions en tant qu’accessoires, comme illustré ci-dessous :

import React from 'react';

type appProps = {
  name: string,
  age?: number 
  makeNoise: () => void; 
}

function App({ name, age, makeNoise }: appProps) {
  return (
    <div className="App">
      <h2>{name}</h2>
      <p>{age}</p>
    </div>
  );
}
export default App;

Une autre façon de taper des composants de fonction React avec TypeScript consiste à importer le FunctionComponent ou React.FC de la bibliothèque React, qui propose une approche légèrement différente de la création de composants fonctionnels.

import React, { FunctionComponent } from "react";

type appProps = {
  name: string,
  age?: number, 
};

export const App: FunctionComponent<appProps> = ({ name, age }) => {
  return (
    <div className="App">
      <h2>{name}</h2>
      <p>{age}</p>
    </div>
  );
};

Cette approche utilise un type générique. Les paramètres de notre fonction sont déduits du générique FunctionComponent. La L’approche FunctionComponent est déconseillée, avec des raisons détaillées décrites ici.

Gestion des états avec TypeScript

Si vous connaissez React, vous devez savoir que, pour la plupart, vous ne pouvez pas toujours ajouter des composants simples et sans état à votre application. Vous devrez définir des variables d’état à un moment donné pour contenir diverses valeurs d’état dans les composants de votre application.

Vous trouverez ci-dessous comment définir une variable d’état dans un projet React-TypeScript à l’aide de la useState accrocher.

import React, { useState } from "react";

function App() {
  const [sampleState, setSampleState] = useState("Ifeoma Imoh");

  return <div className="App">Hello World</div>;
}
export default App;

Le type de l’état est automatiquement déduit. Vous pouvez également augmenter la sécurité des types en déclarant quel type un état accepte :

import React, { useState } from 'react';

function App() {
  const [sampleState, setSampleState] = useState("Ifeoma Imoh");
  
  const [sampleStateTwo, setSampleStateTwo] = useState<string | number>("");
  
  const [sampleStateThree, setSampleStateThree] = useState<string[]>([""]);

  return (
    <div className="App">
      Hello World
    </div>)
}
export default App;

Gestion des événements

Dans un projet React-TypeScript, nous pouvons contourner les événements comme nous le faisons lorsque nous travaillons sur un projet React simple. En plus de cela, nous pouvons également ajouter une sécurité de type aux événements.

Pour utiliser un type d’événement particulier, vous devez l’importer spécifiquement depuis le module React. Voyons voir comment ça fonctionne.

import React, { MouseEvent } from "react";

export const App = () => {
  const handleClick = (event: MouseEvent) => {
    event.preventDefault();
    console.log(event); 
  };

  return (
    <div>
      <button onClick={handleClick}>Click!!</button>
    </div>
  );
};

Dans le code ci-dessus, nous avons rendu un button et ajouté un écouteur qui déclenche le handleClick fonction lorsque vous cliquez dessus. Dans le handleClick fonction, nous définissons le type de l’événement par défaut MouseEvent importé de React.

Il existe d’autres événements pris en charge, tels que le ChangeEvent, AnimationEvent, FocusEvent, FormEvent etc. Vous pouvez consulter ce lien pour voir une liste complète de tous les autres types d’événements pris en charge.

Présentation de certains autres crochets React avec TypeScript

Des crochets ont été ajoutés dans la version 16.8 de Reactpermettant l’utilisation de l’état et d’autres fonctionnalités React dans les composants fonctionnels.

Jetons un coup d’oeil au useEffect accrocher. Ce hook est utilisé pour gérer les effets secondaires tels que la récupération de données, la définition de délais d’attente et d’autres éléments pouvant nécessiter une méthode de cycle de vie.

Vous trouverez ci-dessous comment utiliser le useEffect crochet dans un composant React.

import React, { useEffect } from "react";

export const App = () => {
  useEffect(() => {
    
  }, []);

  return <div>Hello world</div>;
};

La définition de l’effet est similaire à la façon dont elle est effectuée traditionnellement dans React, car elle ne nécessite pas non plus de configuration de type supplémentaire. TypeScript vérifie uniquement que la syntaxe de la fonction (useEffect, etc.) est correcte.

Un autre crochet fréquemment utilisé et important est le crochet useRef React. La useRef hook est décrit dans la documentation officielle de React comme une boîte pouvant contenir une valeur mutable dans le .current propriété de son instance.

Vous trouverez ci-dessous comment configurer un ref dans un projet React-TypeScript.

import React, { useRef } from "react";

export const App = () => {
  const divRef = useRef < HTMLDivElement > null;

  
  return <div ref={divRef}>...other nested elements</div>;
};

Dans le code ci-dessus, nous avons défini un ref et définissez son type sur HTMLDivElementc’est-à-dire qu’il ne peut fonctionner qu’avec div éléments. Vous pouvez visiter ce lien pour apprendre à implémenter d’autres crochets React avec TypeScript.

Mettre tous ensemble

Jusqu’à présent, nous avons découvert certains des concepts les plus importants nécessaires pour commencer à créer une application React-TypeScript. Dans cette section, nous mettrons en pratique certains de ces concepts en créant une simple application de liste de tâches.

Revenez au projet React-TypeScript que nous avons créé précédemment et exécutez la commande suivante au niveau racine de l’application pour démarrer le serveur de développement.

npm start

Ensuite, ouvrez le App.tsx fichier à la racine de votre application et remplacez le code qu’il contient par ce qui suit :

import React, { useState, useRef, FormEvent, useEffect } from "react";
import { TodoComponent } from './components/Todo'
import "./App.css";


export type Todo = {
  id: number;
  todo: string;
  isDone: boolean;
};

function App() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [todo, setTodo] = useState<string>("")
  const inputRef = useRef<HTMLInputElement>(null);
  
  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  
  const handleAdd = (event: FormEvent) => {
    event.preventDefault();
    if (inputRef.current?.value.length === 0) return;
    setTodos((prevTodos) => [
     ...prevTodos,
       {
        id: Date.now(),
        todo: `${inputRef.current?.value}`,
        isDone: false,
      },
    ]);
    setTodo("")
  };

  
  const deleteTodo = (id: number) => {
    setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
  };

  
  const toggleDone = (id: number) => {
    setTodos((prevTodos) =>
      prevTodos.map((todo) =>
        todo.id === id ? { ...todo, isDone: !todo.isDone } : todo
      )
    );
  };

  return (
     <div className="App">
      <h1>React-TypeScript To-do list</h1>
      <form onSubmit={handleAdd}>
        <input type="text" ref={inputRef} onChange={(e) => setTodo(e.target.value)} value={todo} />
        <button type="submit">Add New</button>
      </form>
      <ul className="todos">
        {todos.map((todo, key) => (
          <TodoComponent
            key={key}
            id={todo.id}
            todo={todo.todo}
            isDone={todo.isDone}
            deleteTodo={deleteTodo}
            toggleDone={toggleDone}
          />
        ))}
      </ul>
    </div>
  );
}

export default App;

Dans le code ci-dessus, nous avons utilisé des concepts abordés précédemment dans cet article pour créer une application de liste de tâches de base. L’application affiche un formulaire qui, une fois rempli et soumis, déclenche la handleAdd fonction et ajoute un nouveau todo s’opposer à la todos déployer. Nous avons également créé un deleteTodo et toggleDone fonction pour supprimer et basculer l’achèvement d’une tâche avec l’identifiant donné, respectivement.

Nous avons également importé un composant appelé TodoComponent que nous n’avons pas encore créé, et il rend les éléments individuels à faire. Créez maintenant un dossier appelé components dans le src répertoire, et à l’intérieur de celui-ci, créez un fichier appelé Todo.tsx et y ajouter ce qui suit :

import React from "react";
import { Todo } from "../App";


type TodoProps = Todo & {
  deleteTodo: (id: number) => void,
  toggleDone: (id: number) => void,
};


export const TodoComponent = ({
  id,
  todo,
  isDone,
  deleteTodo,
  toggleDone,
}: TodoProps) => {
  return (
    <li
      className={isDone ? "todo done" : "todo"}
      onClick={() => toggleDone(id)}
    >
      <div>
        <p>{todo}</p>
      </div>
      <button onClick={() => deleteTodo(id)}>delete</button>
    </li>
  );
};

Dans le code ci-dessus, nous utilisons le & opérateur pour fusionner Todo types et les deux accessoires de fonction supplémentaires (deleteTodo et toggleDone). La TodoComponent rend un seul élément à faire.

Nous devons également styliser l’application. Remplacez les styles prédéfinis dans votre src/App.css fichier avec les styles dans ce codeLien sandbox:

Vous pouvez maintenant enregistrer les modifications et tester l’application dans votre navigateur.

Conclusion

Cet article couvre les connaissances de base et certains des concepts les plus utilisés dont vous avez besoin pour commencer votre parcours React-TypeScript. Cependant, vous pouvez en savoir plus sur TypeScript à partir de son documents officiels et des informations à jour sur ses intégration avec React.

Ensuite, vous voudrez peut-être vérifier Utilisation de TypeScript avec React dans une grande base de code : défis et astuces.