A propos de l'auteur

Blessing Krofegha est un ingénieur logiciel basé à Lagos au Nigeria, avec un désir ardent de contribuer à rendre le Web génial pour tous, en écrivant et en construisant…
Plus à propos
Bénédiction

Cet article présente Typescript, un exposant de JavaScript qui présente la fonctionnalité de type statique pour repérer les erreurs courantes sous forme de codes de développeurs, ce qui améliore les performances, d'où des applications d'entreprise robustes. Vous apprendrez également à configurer efficacement TypeScript dans un projet React lors de la création d'une application Money Heist Episode Picker, en explorant TypeScript, des crochets React tels que useReducer, useContext et Reach Router.

À l'ère du développement logiciel, JavaScript peut être utilisé pour développer presque n'importe quel type d'application. Cependant, le fait que JavaScript soit typé dynamiquement pourrait être une préoccupation pour la plupart des grandes entreprises, en raison de sa fonction de vérification de type lâche.

Heureusement, nous n’avons pas à attendre que le comité technique Ecma 39 introduise un système de type statique dans JavaScript. Nous pouvons plutôt utiliser TypeScript.

JavaScript, étant typé dynamiquement, ne connaît pas le type de données d'une variable tant que cette variable n'est pas instanciée au moment de l'exécution. Les développeurs qui écrivent de gros logiciels peuvent avoir tendance à réaffecter une variable, déclarée plus tôt, à une valeur d'un type différent, sans avertissement ni problème, ce qui entraîne des bogues souvent ignorés.

Dans ce didacticiel, nous apprendrons ce qu'est TypeScript et comment l'utiliser avec un projet React. À la fin, nous aurons construit un projet consistant en une application de sélection d'épisode pour l'émission de télévision Money Heist, en utilisant TypeScript et les crochets actuels de type React (useState, useEffect, useReducer, useContext). Avec ces connaissances, vous pouvez continuer à expérimenter avec TypeScript dans vos propres projets.

Cet article n'est pas une introduction à TypeScript. Par conséquent, nous ne passerons pas par la syntaxe de base de TypeScript et JavaScript. Cependant, vous n'avez pas besoin d'être un expert dans l'une de ces langues pour suivre, car nous allons essayer de suivre le principe KISS (restez simple, stupide).

Qu'est-ce que TypeScript?

En 2019, TypeScript a été classé au septième langage le plus utilisé et au cinquième langage à la croissance la plus rapide sur GitHub. Mais qu'est-ce que TypeScript exactement?

Selon la documentation officielle, TypeScript est un sur-ensemble typé de JavaScript qui se compile en JavaScript simple. Il est développé et maintenu par Microsoft et la communauté open source.

«Superset» dans ce contexte signifie que le langage contient toutes les caractéristiques et fonctionnalités de JavaScript, puis certaines. TypeScript est un langage de script typé.

Il offre aux développeurs plus de contrôle sur leur base de code via son annotation de type, ses classes et son interface, évitant aux développeurs d'avoir à corriger manuellement les bogues gênants dans la console.

TypeScript n'a pas été créé pour modifier JavaScript. Au lieu de cela, il se développe sur JavaScript avec de nouvelles fonctionnalités précieuses. Tout programme écrit en JavaScript simple s'exécutera également comme prévu dans TypeScript, y compris les applications mobiles multiplateformes et les backends dans Node.js.

Cela signifie que vous pouvez également écrire des applications React en TypeScript, comme nous le ferons dans ce didacticiel.

Pourquoi TypeScript?

Peut-être que vous n'êtes pas convaincu d'embrasser la qualité de TypeScript. Voyons quelques-uns de ses avantages.

Moins de bugs

Nous ne pouvons pas éliminer tous les bogues de notre code, mais nous pouvons les réduire. TypeScript vérifie les types au moment de la compilation et génère des erreurs si le type de variable change.

Être capable de trouver ces erreurs évidentes mais fréquentes dès le début facilite beaucoup la gestion de votre code avec les types.

Le refactoring est plus facile

Vous souhaiterez probablement souvent refactoriser un grand nombre de choses, mais comme elles touchent à beaucoup d'autres codes et à de nombreux autres fichiers, vous ne devez pas les modifier.

Dans TypeScript, de telles choses peuvent souvent être refactorisées d'un simple clic sur la commande «Renommer le symbole» dans votre environnement de développement intégré (IDE).

Renommer l'application en expApp (Grand aperçu)

Dans un langage typé dynamiquement tel que JavaScript, la seule façon de refactoriser plusieurs fichiers en même temps est avec la fonction traditionnelle «rechercher et remplacer» en utilisant des expressions régulières (RegExp).

Dans un langage de type statique tel que TypeScript, «rechercher et remplacer» n'est plus nécessaire. Avec les commandes IDE telles que «Rechercher toutes les occurrences» et «Renommer le symbole», vous pouvez voir toutes les occurrences dans l'application de la fonction, classe ou propriété donnée d'une interface d'objet.

TypeScript vous aidera à trouver toutes les instances du bit refactorisé, à le renommer et à vous alerter avec une erreur de compilation dans le cas où votre code présente des incompatibilités de type après la refactorisation.

TypeScript présente encore plus d'avantages que ce que nous avons couvert ici.

Inconvénients de TypeScript

TypeScript n'est certainement pas sans inconvénients, même compte tenu des fonctionnalités prometteuses soulignées ci-dessus.

Un faux sentiment de sécurité

La fonction de vérification de type de TypeScript crée souvent un faux sentiment de sécurité chez les développeurs. La vérification de type nous avertit en effet lorsque quelque chose ne va pas avec notre code. Cependant, les types statiques ne réduisent pas la densité globale des bogues.

Par conséquent, la force de votre programme dépendra de votre utilisation de TypeScript, car les types sont écrits par le développeur et non vérifiés au moment de l'exécution.

Si vous cherchez à utiliser TypeScript pour réduire vos bogues, veuillez plutôt envisager un développement piloté par les tests.

Système de dactylographie compliqué

Le système de saisie, bien qu'il soit un excellent outil à bien des égards, peut parfois être un peu compliqué. Cet inconvénient vient du fait qu'il est entièrement interopérable avec JavaScript, ce qui laisse encore plus de place à la complication.

Cependant, TypeScript est toujours JavaScript, il est donc important de comprendre JavaScript.

Quand utiliser TypeScript?

Je vous conseille d'utiliser TypeScript dans les cas suivants:

  • Si vous souhaitez créer une application qui sera maintenue sur une période longue période, alors je recommanderais fortement de commencer par TypeScript, car il favorise le code auto-documenté, aidant ainsi les autres développeurs à comprendre facilement votre code lorsqu'ils rejoignent votre base de code.
  • Si vous devez créer un bibliothèque, pensez à l'écrire en TypeScript. Il aidera les éditeurs de code à suggérer les types appropriés aux développeurs qui utilisent votre bibliothèque.

Dans les dernières sections, nous avons équilibré les avantages et les inconvénients de TypeScript. Passons aux affaires du jour: configuration de TypeScript dans un projet React moderne.

Commencer

Il existe plusieurs façons de configurer TypeScript dans un projet React. Dans ce didacticiel, nous n'en couvrirons que deux.

Méthode 1: créer React App + TypeScript

Il y a environ deux ans, l'équipe React a publié Create React App 2.1, avec prise en charge de TypeScript. Ainsi, vous n'aurez peut-être jamais à faire de gros efforts pour intégrer TypeScript à votre projet.

Annonce de TypeScript dans l'application Create React (Grand aperçu)

Pour démarrer un nouveau projet Create React App, vous pouvez exécuter ceci…

npx create-react-app my-app - nom-dossier

… ou ca:

yarn create react-app my-app --folder-name

Pour ajouter TypeScript à un projet Create React App, installez-le d'abord et son respectif @les types:

npm install --save typescript @ types / node @ types / react @ types / react-dom @ types / jest

… ou:

fil ajouter typescript @ types / node @ types / react @ types / react-dom @ types / jest

Ensuite, renommez les fichiers (par exemple, index.js à index.tsx), et redémarrez votre serveur de développement!

C'était rapide, non?

Méthode 2: configurer TypeScript avec Webpack

Webpack est un bundle de module statique pour les applications JavaScript. Il prend tout le code de votre application et le rend utilisable dans un navigateur Web. Les modules sont des morceaux de code réutilisables construits à partir du JavaScript de votre application, node_modules, des images et des styles CSS, qui sont conçus pour être facilement utilisés sur votre site Web.

Créer un nouveau projet

Commençons par créer un nouveau répertoire pour notre projet:

mkdir react-webpack
cd react-webpack

Nous utiliserons npm pour initialiser notre projet:

npm init -y

La commande ci-dessus va générer un package.json fichier avec des valeurs par défaut. Ajoutons également quelques dépendances pour le webpack, TypeScript et certains modules spécifiques à React.

Installation de packages

Enfin, nous devons installer les packages nécessaires. Ouvrez votre interface de ligne de commande (CLI) et exécutez ceci:

#Installation de devDependencies

npm install --save-dev @ types / react @ types / react-dom awesome-typescript-loader css-loader html-webpack-plugin mini-css-extract-plugin source-map-loader typescript webpack webpack-cli webpack-dev -serveur

#installing Dependencies
npm installer react react-dom

Ajoutons également manuellement quelques fichiers et dossiers différents sous notre react-webpack dossier:

  1. Ajouter webpack.config.js pour ajouter des configurations liées au webpack.
  2. Ajouter tsconfig.json pour toutes nos configurations TypeScript.
  3. Ajoutez un nouveau répertoire, src.
  4. Créez un nouveau répertoire, Composants, dans le src dossier.
  5. Enfin, ajoutez index.html, App.tsx, et index.tsx dans le Composants dossier.

Structure du projet

Ainsi, notre structure de dossiers ressemblera à ceci:

├── package.json
├── package-lock.json
├── tsconfig.json
├── webpack.config.js
├── .gitignore
└── src
    └──composants
        ├── App.tsx
        ├── index.tsx
        ├── index.html

Commencez à ajouter du code

Commençons par index.html:




  
  
  Configuration de React-Webpack


  

Cela va créer le HTML, avec un vide div avec un ID de production.

Ajoutons le code à notre composant React App.tsx:

importer * comme React à partir de "react";
interface d'exportation HelloWorldProps {
  userName: chaîne;
  lang: string;
}
export const App = (accessoires: HelloWorldProps) => (
  

Salut {props.userName} de React! Bienvenue sur {props.lang}!

);

Nous avons créé un objet d'interface et l'avons nommé HelloWorldProps, avec Nom d'utilisateur et lang avoir un chaîne type.

Nous avons passé accessoires à notre App composant et exporté.

Maintenant, mettons à jour le code dans index.tsx:

importer * comme React à partir de "react";
importer * comme ReactDOM à partir de "react-dom";
importer {App} à partir de "./App";
ReactDOM.render (
  ,
  document.getElementById ("sortie")
);

Nous venons d'importer le App composant dans index.tsx. Lorsque webpack voit un fichier avec l'extension .ts ou .tsx, il transposera ce fichier à l'aide de la bibliothèque awesome-typescript-loader.

Configuration de TypeScript

Nous ajouterons ensuite une configuration à tsconfig.json:

{
  "options de compilation": {
    "jsx": "réagir",
    "module": "commonjs",
    "noImplicitAny": vrai,
    "outDir": "./build/",
    "preserveConstEnums": vrai,
    "removeComments": vrai,
    "sourceMap": vrai,
    "cible": "es5"
  },
  "comprendre": [
    "src/components/index.tsx"
  ]
}

Voyons également les différentes options que nous avons ajoutées à tsconfig.json:

  • compilerOptions
    Représente les différentes options du compilateur.
  • jsx: réagir
    Ajoute la prise en charge de JSX dans .tsx des dossiers.
  • lib
    Ajoute une liste de fichiers de bibliothèque à la compilation (par exemple, en utilisant es2015 nous permet d'utiliser la syntaxe ECMAScript 6).
  • module
    Génère du code de module.
  • noImplicitAny
    Lève des erreurs pour les déclarations avec un implicite tout type.
  • outDir
    Représente le répertoire de sortie.
  • sourceMap
    Génère un .carte , qui peut être très utile pour déboguer l'application.
  • cible
    Représente la version ECMAScript cible vers laquelle transpiler notre code (nous pouvons ajouter une version en fonction des exigences spécifiques de notre navigateur).
  • comprendre
    Utilisé pour spécifier la liste de fichiers à inclure.

Configuration du Webpack

Ajoutons une configuration de webpack à webpack.config.js.

const path = require ("path");
const HtmlWebpackPlugin = require ("html-webpack-plugin");
const MiniCssExtractPlugin = require ("mini-css-extract-plugin");
module.exports = {
  entrée: "./src/components/index.tsx",
  cible: "web",
  mode: "développement",
  production: {
    path: path.resolve ( __ dirname, "build"),
    nom de fichier: "bundle.js",
  },
  résoudre: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
  },
  module: {
    règles: [
      {
        test: /.(ts|tsx)$/,
        loader: "awesome-typescript-loader",
      },
      {
        enforce: "pre",
        test: /.js$/,
        loader: "source-map-loader",
      },
      {
        test: /.css$/,
        loader: "css-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "components", "index.html"),
    }),
    new MiniCssExtractPlugin({
      filename: "./src/yourfile.css",
    }),
  ],
};

Voyons les différentes options que nous avons ajoutées à webpack.config.js:

  • entrée
    Cela spécifie le point d'entrée de notre application. Il peut s'agir d'un seul fichier ou d'un tableau de fichiers que nous voulons inclure dans notre build.
  • production
    Il contient la configuration de sortie. L'application examine cela lors de la tentative de sortie du code groupé de notre projet sur le disque. Le chemin d'accès représente le répertoire de sortie pour le code à sortir, et le nom de fichier représente le nom de fichier pour le même. Il est généralement nommé bundle.js.
  • résoudre
    Webpack examine cet attribut pour décider de regrouper ou d'ignorer le fichier. Ainsi, dans notre projet, webpack considérera les fichiers avec les extensions .js, .jsx, .json, .ts , et .tsx pour le regroupement.
  • module
    Nous pouvons permettre à webpack de charger un fichier particulier à la demande de l'application, à l'aide de chargeurs. Il prend un objet de règles qui spécifie que:

    • tout fichier se terminant par l'extension .tsx ou .ts devrait utiliser awesome-typescript-loader à charger;
    • les fichiers se terminant par .js l'extension doit être chargée avec source-map-loader;
    • les fichiers se terminant par .css l'extension doit être chargée avec css-loader.
  • plugins
    Webpack a ses propres limites, et il fournit des plugins pour les surmonter et étendre ses capacités. Par exemple, html-webpack-plugin crée un fichier modèle rendu au navigateur à partir de la index.html fichier dans le ./src/component/index.html annuaire.

MiniCssExtractPlugin rend le parent CSS fichier de l'application.

Ajout de scripts à package.json

Nous pouvons ajouter différents scripts pour créer des applications React dans notre package.json fichier:

"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack"
},

Maintenant, lancez npm start dans votre CLI. Si tout s'est bien passé, vous devriez voir ceci:

Sortie de configuration React-Webpack (Grand aperçu)

Si vous avez un talent pour webpack, clonez le référentiel pour cette configuration et utilisez-le dans tous vos projets.

Création de fichiers

Créer un src dossier et un index.tsx fichier. Ce sera le fichier de base qui rend React.

Maintenant, si nous courons npm start, il exécutera notre serveur et ouvrira un nouvel onglet. Fonctionnement npm run build va construire un webpack pour la production et va créer un dossier de build pour nous.

Nous avons vu comment configurer TypeScript à partir de zéro en utilisant la méthode de configuration Create React App et webpack.

L'une des façons les plus rapides d'obtenir une compréhension complète de TypeScript consiste à convertir l'un de vos projets Vanilla React existants en TypeScript. Malheureusement, l'adoption incrémentielle de TypeScript dans un projet Vanilla React existant est stressante car elle implique d'avoir à éjecter ou renommer tous les fichiers, ce qui entraînerait des conflits et une gigantesque demande de pull si le projet appartenait à une grande équipe.

Ensuite, nous verrons comment migrer facilement un projet React vers TypeScript.

Migrer une application Create React existante vers TypeScript

Pour rendre ce processus plus facile à gérer, nous le décomposerons en étapes, ce qui nous permettra de migrer en segments individuels. Voici les étapes à suivre pour migrer notre projet:

  1. Ajoutez TypeScript et types.
  2. Ajouter tsconfig.json.
  3. Commencer petit.
  4. Renommer l'extension des fichiers en .tsx.
1. Ajoutez TypeScript au projet

Tout d'abord, nous devons ajouter TypeScript à notre projet. En supposant que votre projet React a été démarré avec Create React App, nous pouvons exécuter ce qui suit:

# Utilisation de npm
npm install --save typescript @ types / node @ types / react @ types / react-dom @ types / jest

# Utilisation de fil
fil ajouter typescript @ types / node @ types / react @ types / react-dom @ types / jest

Notez que nous n'avons encore rien changé en TypeScript. Si nous exécutons la commande pour démarrer le projet localement (npm start ou début de fil), rien ne change. Si tel est le cas, tant mieux! Nous sommes prêts pour la prochaine étape.

2. Ajoutez le tsconfig.json Fichier

Avant de tirer parti de TypeScript, nous devons le configurer via le tsconfig.json fichier. La façon la plus simple de commencer est d'échafauder un en utilisant cette commande:

npx tsc --init

Cela nous donne quelques notions de base, avec beaucoup de code commenté. Maintenant, remplacez tout le code dans tsconfig.json avec ça:

{
    "options de compilation": {
      "jsx": "réagir",
      "module": "commonjs",
      "noImplicitAny": vrai,
      "outDir": "./build/",
      "preserveConstEnums": vrai,
      "removeComments": vrai,
      "sourceMap": vrai,
      "cible": "es5"
    },
    "comprendre": [
      "./src/**/**/*"
    ]
  }

Configuration de TypeScript

Voyons également les différentes options que nous avons ajoutées à tsconfig.json:

  • compilerOptions
    Représente les différentes options du compilateur.

    • cible
      Traduit les nouvelles constructions JavaScript vers une version plus ancienne, comme ECMAScript 5.
    • lib
      Ajoute une liste de fichiers de bibliothèque à la compilation (par exemple, l'utilisation de es2015 nous permet d'utiliser la syntaxe ECMAScript 6).
    • jsx: réagir
      Ajoute la prise en charge de JSX dans .tsx des dossiers.
    • lib
      Ajoute une liste de fichiers de bibliothèque à la compilation (par exemple, l'utilisation de es2015 nous permet d'utiliser la syntaxe ECMAScript 6).
    • module
      Génère du code de module.
    • noImplicitAny
      Utilisé pour générer des erreurs pour les déclarations avec un implicite tout type.
    • outDir
      Représente le répertoire de sortie.
    • sourceMap
      Génère un .carte , qui peut être très utile pour déboguer notre application.
    • comprendre
      Utilisé pour spécifier la liste de fichiers à inclure.

Les options de configuration varient en fonction de la demande d'un projet. Vous devrez peut-être vérifier la feuille de calcul des options TypeScript pour déterminer ce qui conviendrait à votre projet.

Nous n'avons pris que les mesures nécessaires pour préparer les choses. Notre prochaine étape consiste à migrer un fichier vers TypeScript.

3. Commencez avec un composant simple

Tirez parti de la capacité de TypeScript à être progressivement adopté. Allez un fichier à la fois à votre rythme. Faites ce qui a du sens pour vous et votre équipe. N'essayez pas de vous attaquer à tout cela en même temps.

Pour convertir correctement cela, nous devons faire deux choses:

  1. Changez l'extension du fichier en .tsx.
  2. Ajoutez l'annotation de type (qui nécessiterait des connaissances TypeScript).
4.Renommer les extensions de fichier à .tsx

Dans une grande base de code, il peut sembler fatigant de renommer les fichiers individuellement.

Renommer plusieurs fichiers sur macOS

Renommer plusieurs fichiers peut être une perte de temps. Voici comment vous pouvez le faire sur un Mac. Clic droit (ou Ctrl + cliquez ou cliquez avec deux doigts simultanément sur le trackpad si vous utilisez un MacBook) sur le dossier contenant les fichiers que vous souhaitez renommer. Cliquez ensuite sur «Révéler dans le Finder». Dans le Finder, sélectionnez tous les fichiers que vous souhaitez renommer. Faites un clic droit sur les fichiers sélectionnés et choisissez «Renommer les éléments X…». Ensuite, vous verrez quelque chose comme ceci:

Renommer des fichiers sur un Mac (grand aperçu)

Insérez la chaîne que vous voulez trouver, et la chaîne avec laquelle vous voulez remplacer cette chaîne trouvée, et appuyez sur "Renommer". Terminé.

Renommer plusieurs fichiers sous Windows

Renommer plusieurs fichiers sous Windows dépasse le cadre de ce didacticiel, mais un guide complet est disponible.
Vous obtiendrez généralement des erreurs après avoir renommé les fichiers; il vous suffit d'ajouter les annotations de type. Vous pouvez rafraîchir cela dans la documentation.

Nous avons expliqué comment configurer TypeScript dans une application React. Maintenant, créons une application de sélection d'épisode pour Money Heist en utilisant TypeScript.

Nous ne couvrirons pas les types de base de TypeScript. Il est nécessaire de parcourir la documentation avant de continuer dans ce didacticiel.

Il est temps de construire

Pour rendre ce processus moins intimidant, nous allons le décomposer en étapes, ce qui nous permettra de créer l'application en morceaux individuels. Voici toutes les étapes que nous prendrons pour créer le Money Heist sélecteur d'épisode:

  • Échafaudez une application Create React.
  • Récupérez les épisodes.
    • Créez les types et interfaces appropriés pour nos épisodes dans interface.ts.
    • Configurer un magasin pour récupérer les épisodes dans store.tsx.
    • Créez l'action pour récupérer des épisodes dans action.ts.
    • Créé un EpisodeList.tsx composant qui contient les épisodes récupérés.
    • Importez le ÉpisodesListe composant de notre page d'accueil en utilisant Réagissez paresseux et suspense.
  • Ajoutez des épisodes.
    • Configurer la boutique pour ajouter des épisodes dans store.tsx.
    • Créez l'action pour ajouter des épisodes dans action.ts.
  • Supprimez les épisodes.
    • Configurer un magasin pour supprimer des épisodes dans store.tsx.
    • Créez l'action pour supprimer des épisodes dans action.ts.
  • Épisode préféré.
    • Importation ÉpisodesListe composant dans l'épisode préféré.
    • Rendre ÉpisodesListe à l'intérieur de l'épisode préféré.
  • Utilisation de Reach Router pour la navigation.

Configurer React

La façon la plus simple de configurer React est d'utiliser Create React App. Créer une application React est un moyen officiellement pris en charge pour créer des applications React d'une seule page. Il offre une configuration de construction moderne sans configuration.

Nous nous en servirons pour amorcer l'application que nous allons créer. Depuis votre CLI, exécutez la commande ci-dessous:

npx create-react-app react-ts-app && cd react-ts-app

Une fois l'installation réussie, démarrez le serveur React en exécutant npm start.

Page de démarrage React (Grand aperçu)

Comprendre les interfaces et les types en tapuscrit

Les interfaces en TypeScript sont utilisées lorsque nous devons donner des types aux propriétés des objets. Par conséquent, nous utiliserions des interfaces pour définir nos types.

interface employé {
  nom: chaîne,
  rôle: chaîne
  salaire: nombre
}
const bestEmployee: Employee = {
  nom: «John Doe»,
  rôle: 'Développeur IOS',
  salaire: '8500 $' // remarquez que nous utilisons une chaîne
}

Lors de la compilation du code ci-dessus, nous verrions cette erreur: «Types de propriété un salaire sont incompatibles. Type chaîne n'est pas assignable au type nombre. "

De telles erreurs se produisent dans TypeScript lorsqu'une propriété ou une variable se voit attribuer un type autre que le type défini. Plus précisément, l'extrait ci-dessus signifie que le un salaire la propriété a été affectée chaîne tapez au lieu d'un nombre type.

Créons un interface.ts déposer dans notre src dossier. Copiez et collez ce code dedans:

/ **
| ------------------------------------------------- -
| Toutes les interfaces!
| ------------------------------------------------- -
* /
interface d'exportation IEpisode {
  airdate: string
  piste d'atterrissage: chaîne
  temps d'antenne: chaîne
  id: nombre
  image: {medium: string; original: string}
  nom: chaîne
  nombre: nombre
  runtime: nombre
  saison: nombre
  résumé: chaîne
  url: chaîne
}
interface d'exportation IState {
  épisodes: Array
  favoris: Array
}
interface d'exportation IAction {
  type: chaîne
  charge utile: Array | tout
}
type d'exportation Dispatch = React.Dispatch
type d'exportation FavAction = (
  état: IState,
  expédition: Dispatch,
  épisode: IEpisode
) => IAction

interface d'exportation IEpisodeProps {
  épisodes: Array
  store: {état: IState; dispatch: Dispatch}
  toggleFavAction: FavAction
  favoris: Array
}
interface d'exportation IProps {
  épisodes: Array
  store: {état: IState; dispatch: Dispatch}
  toggleFavAction: FavAction
  favoris: Array
}

Il est recommandé d'ajouter un «I» au nom de l'interface. Cela rend le code lisible. Cependant, vous pouvez décider de l'exclure.

Interface IEpisode

Notre API renvoie un ensemble de propriétés telles que airdate, piste d'atterrissage, temps d'antenne, id, image, Nom, nombre, Durée, saison, sommaire, et url. Par conséquent, nous avons défini un IEpisode interface et définissez les types de données appropriés sur les propriétés de l'objet.

Interface IState

Notre Je déclare l'interface a épisodes et favoris propriétés, respectivement, et un Array interface.

IAction

le IAction les propriétés d'interface sont charge utile et type. le type La propriété a un type chaîne, tandis que la charge utile a un type Array | tout.

Notez que Array | tout signifie un tableau de l'interface de l'épisode ou tout autre type.

le Envoi le type est défini sur React.Dispatch et un interface. Notez que React.Dispatch est le type standard pour le envoi fonction, selon la @ types / réagir base de code, tandis que est un tableau de l'action Interface.

De plus, Visual Studio Code possède un vérificateur TypeScript. Ainsi, en mettant simplement en surbrillance ou en survolant le code, il est suffisamment intelligent pour suggérer le type approprié.

En d'autres termes, pour que nous puissions utiliser notre interface dans toutes nos applications, nous devons l'exporter. Jusqu'à présent, nous avons notre magasin et nos interfaces qui contiennent le type de notre objet. Créons maintenant notre magasin.
Notez que les autres interfaces suivent les mêmes conventions que celles expliquées.

Récupérer les épisodes

Création d'un magasin

Pour récupérer nos épisodes, nous avons besoin d'un magasin qui contient l'état initial des données et qui définit notre fonction de réducteur.

Nous utiliserons useReducer crochet pour mettre cela en place. Créer un store.tsx déposer dans votre src dossier. Copiez et collez-y le code suivant.

importer React, {useReducer, createContext} de 'react'
importer {IState, IAction} depuis './types/interfaces'
const initialState: IState = {
  épisodes: [],
  favoris: []
}
export const Store = createContext(Etat initial)
const reducer = (état: IState, action: IAction): IState => {
  commutateur (action.type) {
    cas 'FETCH_DATA':
      retourner {... état, épisodes: action.payload}
    défaut:
      état de retour
  }
}
export const StoreProvider = ({children}: JSX.ElementChildrenAttribute): JSX.Element => {
  const [state, dispatch] = useReducer (réducteur, initialState)
  revenir {enfants}
}

Voici les étapes que nous avons suivies pour créer la boutique:

  • Pour définir notre magasin, nous avons besoin useReducer crochet et createContext API de React, c'est pourquoi nous l'avons importé.
  • Nous avons importé Je déclare et IAction de ./types/interfaces.
  • Nous avons déclaré un Etat initial objet avec un type de Je déclareet les propriétés des épisodes et des favoris, qui sont tous deux définis sur un tableau vide, respectivement.
  • Ensuite, nous avons créé un Boutique variable qui détient la createContext méthode et qui est passé le Etat initial.

le createContext le type de méthode est , ce qui signifie qu'il pourrait s'agir d'un type de ou tout. Nous verrons le tout type souvent utilisé dans cet article.

  • Ensuite, nous avons déclaré un réducteur fonction et passé Etat et action comme paramètres. le réducteur la fonction a une instruction switch qui vérifie la valeur de type d'action. Si la valeur est FETCH_DATA, puis il retourne un objet qui a une copie de notre état (...Etat) et de l'état de l'épisode qui contient notre charge utile d'action.
  • Dans l'instruction switch, nous renvoyons un état de défaut.

Notez que le Etat et action les paramètres de la fonction de réduction ont Je déclare et IAction types, respectivement. Également réducteur la fonction a un type de Je déclare.

  • Enfin, nous avons déclaré StoreProvider une fonction. Cela donnera à tous les composants de notre application un accès au magasin.
  • Cette fonction prend les enfants comme accessoire, et à l'intérieur du StorePrivder fonction, nous avons déclaré la useReducer crochet.
  • Nous avons déstructuré Etat et envoi.
  • Afin de rendre notre magasin accessible à tous les composants, nous avons passé une valeur d'objet contenant Etat et envoi.

le Etat qui contient nos épisodes et l'état des favoris sera rendu accessible par d'autres composants, tandis que le envoi est une fonction qui change l'état.

  • Nous exportons Boutique et StoreProvider, afin qu'il puisse être utilisé dans notre application.

Créer Action.ts

Nous devons demander à l'API de récupérer les épisodes qui seront présentés à l'utilisateur. Cela se fera dans un fichier d'action. Créé un Action.ts fichier, puis collez le code suivant:

importer {Dispatch} depuis './interface/interfaces'
export const fetchDataAction = async (dispatch: Dispatch) => {
  const URL =
    «https://api.tvmaze.com/singlesearch/shows?q=la-casa-de-papel&embed=episodes»

  const data = attente de récupération (URL)
  const dataJSON = attendre data.json ()
  expédition de retour ({
    tapez: 'FETCH_DATA',
    charge utile: dataJSON.  _ embedded.episodes
  })
}

Tout d'abord, nous devons importer nos interfaces afin qu'elles puissent être utilisées dans ce fichier. Les étapes suivantes ont été prises pour créer l'action:

  • le fetchDataAction la fonction prend envoi accessoires comme paramètre.
  • Parce que notre fonction est asynchrone, nous utiliserions async et attendre.
  • Nous créons une variable (URL) qui contient notre point de terminaison API.
  • Nous avons une autre variable nommée Les données qui contient la réponse de l'API.
  • Ensuite, nous stockons la réponse JSON dans dataJSON, après avoir obtenu la réponse au format JSON en appelant data.json ().
  • Enfin, nous retournons une fonction de répartition qui a une propriété de type et une chaîne de FETCH_DATA. Il a également un charge utile(). _embedded.episodes est le tableau de l'objet épisodes de notre point final.

Notez que le fetchDataAction la fonction récupère notre point de terminaison, le convertit en JSON et renvoie la fonction de répartition, qui met à jour l'état déclaré précédemment dans le magasin.

Le type d'expédition exporté est défini sur React.Dispatch. Notez que React.Dispatch est le type standard pour la fonction de répartition selon la @ types / réagir base de code, tandis que est un tableau de l'action d'interface.

EpisodesList Component

Afin de maintenir la réutilisabilité de notre application, nous conserverons tous les épisodes récupérés dans un fichier séparé, puis importons le fichier dans notre homePage composant.

dans le Composants dossier, créez un EpisodesList.tsx fichier, copiez-collez-y le code suivant:

importer React à partir de 'react'
importer {IEpisode, IProps} depuis '../types/interfaces'
const EpisodesList = (accessoires: IProps): Array => {
  const {episodes} = accessoires
  return episodes.map ((episode: IEpisode) => {
    revenir (
      
{`Money
{episode.name}
Saison: {episode.season} Numéro: {episode.number}
)   }) } exporter la liste des épisodes par défaut
  • Nous importons IEpisode et IProps de interfaces.tsx.
  • Ensuite, nous créons un ÉpisodesListe fonction qui prend des accessoires. Les accessoires auront un type de IProps, tandis que la fonction a un type de Array.

Visual Studio Code suggère que notre type de fonction soit écrit comme JSX.Element[].

Visual Studio Code suggère un type (Grand aperçu)

Tandis que Array est égal à JSX.Element[], Array est appelé l'identité générique. Par conséquent, le modèle générique sera souvent utilisé dans cet article.

  • À l'intérieur de la fonction, nous détruisons le épisodes de accessoires, qui a le IEpisode comme type.

Lisez à propos de l'identité générique. Cette connaissance sera nécessaire au fur et à mesure.

  • Nous avons rendu le épisodes accessoires et mappés à travers elle pour retourner quelques balises HTML.
  • La première section contient le clé, lequel est episode.id, et un nom du cours de épisode-boîte, qui sera créé ultérieurement. Nous savons que nos épisodes ont des images; par conséquent, la balise d'image.
  • L'image a un opérateur ternaire qui vérifie s'il y a un episode.image ou un episode.image.medium. Sinon, nous affichons une chaîne vide si aucune image n'est trouvée. Nous avons également inclus le episode.name dans une div.

Dans section, nous montrons la saison à laquelle appartient un épisode et son numéro. Nous avons un bouton avec le texte Fav. Nous avons exporté le ÉpisodesListe composant afin que nous puissions l'utiliser dans notre application.

Composant de la page d'accueil

Nous voulons que la page d'accueil déclenche l'appel de l'API et affiche les épisodes à l'aide du ÉpisodesListe composant que nous avons créé. À l'intérieur de Composants dossier, créez le HomePage et copiez et collez-y le code suivant:

importer React, {useContext, useEffect, lazy, Suspense} depuis 'react'
importer l'application depuis '../App'
importer {Store} depuis '../Store'
importer {IEpisodeProps} de '../types/interfaces'
importer {fetchDataAction} à partir de '../Actions'
const EpisodesList = paresseux(() => importation ('./ EpisodesList'))
  const HomePage = (): JSX.Element => {
  const {state, dispatch} = useContext (Store)
  useEffect (() => {
    state.episodes.length === 0 && fetchDataAction (répartition)
  })
  accessoires const: IEpisodeProps = {
    épisodes: state.episodes,
    magasin: {état, expédition}
  }
  revenir (
    
      <Retour de suspense = {
chargement...
}>
)   } exporter la page d'accueil par défaut
  • Nous importons useContext, useEffect, paresseux, et Le suspense de React. Le composant d'application importé est le socle sur lequel tous les autres composants doivent recevoir la valeur du magasin.
  • Nous importons également Boutique, IEpisodeProps, et FetchDataAction à partir de leurs fichiers respectifs.
  • Nous importons le ÉpisodesListe composant en utilisant le React.lazy fonctionnalité disponible dans React 16.6.

Le chargement paresseux React prend en charge la convention de fractionnement de code. Ainsi, notre ÉpisodesListe composant est chargé dynamiquement, au lieu d'être chargé à la fois, améliorant ainsi les performances de notre application.

  • Nous détruisons le Etat et envoi comme accessoires de la Boutique.
  • L'esperluette (&&) dans le useEffect crochet vérifie si l'état de nos épisodes est vide (ou égal à 0). Sinon, nous retournons le fetchDataAction une fonction.
  • Enfin, nous retournons le App composant. À l'intérieur, nous utilisons le Le suspense wrapper et définir se retirer à un div avec le chargement texte. Cela sera affiché à l'utilisateur pendant que nous attendons la réponse de l'API.
  • le ÉpisodesListe sera monté lorsque les données seront disponibles, et les données qui contiendront le épisodes c'est ce que nous y répandons.

Configurer Index.txs

le Page d'accueil composante doit être un enfant de la StoreProvider. Nous devrons le faire dans le indice fichier. Renommer index.js à index.tsx et collez le code suivant:

importer React à partir de 'react'
importer ReactDOM depuis 'react-dom'
import './index.css'
importer {StoreProvider} à partir de './Store'
importer HomePage à partir de './components/HomePage'
ReactDOM.render (
  
      
  ,
  document.getElementById ('root')
)

Nous importons StoreProvider, HomePage, et index.css à partir de leurs fichiers respectifs.
Nous enveloppons le HomePage composante de notre StoreProvider. Cela permet au Page d'accueil composant pour accéder au magasin, comme nous l'avons vu dans la section précédente.

Nous sommes venus de loin. Voyons à quoi ressemble l'application, sans CSS.

App sans CSS (Grand aperçu)

Créer Index.css

Supprimez le code dans le index.css fichier et remplacez-le par ceci:

html {
  taille de police: 14px;
}
corps {
  marge: 0;
  rembourrage: 0;
  taille de police: 10px;
  famille de polices: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: anti-crénelage;
  -moz-osx-font-smoothing: niveaux de gris;
}
.episode-layout {
  affichage: flex;
  flex-wrap: wrap;
  largeur min: 100vh;
}
.episode-box {
  rembourrage: .5rem;
}
.entête {
  affichage: flex;
  justifier-contenu: espace entre;
  fond: blanc;
  bordure inférieure: 1px noir uni;
  rembourrage: .5rem;
  position: collant;
  en haut: 0;
}

Notre application a maintenant une apparence et une convivialité. Voici à quoi cela ressemble avec CSS.

(Grand aperçu)

Nous voyons maintenant que nos épisodes peuvent enfin être récupérés et affichés, car nous avons adopté TypeScript depuis le début. Super, non?

Ajouter la fonction d'épisodes préférés

Ajoutons une fonctionnalité qui ajoute des épisodes préférés et qui la relie à une page distincte. Revenons à notre composant Store et ajoutons quelques lignes de code:

Notez que le code en surbrillance est nouvellement ajouté:

importer React, {useReducer, createContext} de 'react'
importer {IState, IAction} depuis './types/interfaces'
const initialState: IState = {
  épisodes: [],
  favoris: []
}
export const Store = createContext(Etat initial)
const reducer = (état: IState, action: IAction): IState => {
  commutateur (action.type) {
    cas 'FETCH_DATA':
      retourner {... état, épisodes: action.payload}
        cas 'ADD_FAV':
      retour {... état, favoris: [...state.favourites, action.payload] }
        défaut:
      état de retour
  }
}
export const StoreProvider = ({children}: JSX.ElementChildrenAttribute): JSX.Element => {
  const [state, dispatch] = useReducer (réducteur, initialState)
  revenir {enfants}
}

Pour implémenter la fonction «Ajouter un favori» à notre application, le ADD_FAV cas est ajouté. Il retourne un objet qui contient une copie de notre état précédent, ainsi qu'un tableau avec une copie du favori Etat, avec le charge utile.

Nous avons besoin d'une action qui sera appelée chaque fois qu'un utilisateur clique sur le FAV bouton. Ajoutons le code en surbrillance à index.tx:

importer { IAction, IEpisode, Dispatch} à partir de './types/interfaces'
export const fetchDataAction = async (dispatch: Dispatch) => {
  const URL =
    «https://api.tvmaze.com/singlesearch/shows?q=la-casa-de-papel&embed=episodes»

  const data = attente de récupération (URL)
  const dataJSON = attendre data.json ()
  expédition de retour ({
    tapez: 'FETCH_DATA',
    charge utile: dataJSON._embedded.episodes
  })
}
export const toggleFavAction = (répartition: tout, épisode: IEpisode | tout): IAction => {
  laissez dispatchObj = {
    tapez: 'ADD_FAV',
    charge utile: épisode
  }
  envoi de retour (dispatchObj)
}

Nous créons un toggleFavAction fonction qui prend envoi et épisodes comme paramètres, et tout et IEpisode | any que leurs types respectifs, avec IAction comme notre type de fonction. Nous avons un objet dont type est ADD_FAV et cela a épisode comme sa charge utile. Enfin, nous renvoyons et expédions simplement l'objet.

Nous ajouterons quelques extraits supplémentaires à EpisodeList.tsx. Copiez et collez le code en surbrillance:

importer React à partir de 'react'
importer {IEpisode, IProps} depuis '../types/interfaces'
const EpisodesList = (accessoires: IProps): Array => {
    const {episodes, toggleFavAction, favorites, store} = accessoires
  const {state, dispatch} = magasin

    return episodes.map ((episode: IEpisode) => {
    revenir (
      
{`Money
{episode.name}
Seasion: {episode.season} Numéro: {episode.number}
<bouton             type = 'bouton'
onClick = {() => toggleFavAction (état, répartition, épisode)}           >             {favourites.find ((fav: IEpisode) => fav.id === episode.id)               ? «Unfav»               : 'Fav'}
)   }) } exporter la liste des épisodes par défaut

Nous incluons togglefavaction, favoris, et boutique comme accessoires, et nous détruisons Etat, une envoi du magasin. Afin de sélectionner notre épisode préféré, nous incluons le toggleFavAction méthode dans un sur clic événement, et passer le Etat, envoi et épisode accessoires comme arguments de la fonction.

Enfin, nous parcourons le préféré état pour vérifier si fav.id(ID préféré) correspond au episode.id. Si c'est le cas, nous basculons entre les Unfav et Fav texte. Cela permet à l'utilisateur de savoir s'il a favorisé cet épisode ou non.

Nous approchons de la fin. Mais nous avons toujours besoin d'une page où les épisodes préférés peuvent être liés lorsque l'utilisateur choisit parmi les épisodes sur la page d'accueil.

Si vous êtes allé aussi loin, donnez-vous une tape dans le dos.

Composant Favpage

dans le Composants dossier, créez un FavPage.tsx fichier. Copiez et collez-y le code suivant:

importer React, {lazy, Suspense} depuis 'react'
importer l'application depuis '../App'
importer {Store} depuis '../Store'
importer {IEpisodeProps} de '../types/interfaces'
importer {toggleFavAction} à partir de '../Actions'
const EpisodesList = paresseux(() => importation ('./ EpisodesList'))
exporter la fonction par défaut FavPage (): JSX.Element {
  const {state, dispatch} = React.useContext (Store)
  accessoires const: IEpisodeProps = {
    épisodes: state.favourites,
    magasin: {état, expédition},
    toggleFavAction,
    favoris: state.favourites
  }
  revenir (
    
      <Retour de suspense = {
chargement...
}>
) }

Pour créer la logique derrière le choix des épisodes préférés, nous avons écrit un petit code. Nous importons paresseux et Le suspense de React. Nous importons également Boutique, IEpisodeProps, et toggleFavAction à partir de leurs fichiers respectifs.

Nous importons nos ÉpisodesListe composant en utilisant le React.lazy fonctionnalité. Enfin, nous retournons le App composant. À l'intérieur, nous utilisons le Le suspense wrapper et définissez un repli sur un div avec le texte de chargement.

Cela fonctionne de manière similaire à la Page d'accueil composant. Ce composant accédera à la boutique pour obtenir les épisodes préférés de l'utilisateur. Ensuite, la liste des épisodes est transmise au ÉpisodesListe composant.

Ajoutons quelques extraits supplémentaires à la HomePage.tsx fichier.

Inclure le toggleFavAction de ../Actions. Inclure également le toggleFavAction méthode comme accessoires.

importer React, {useContext, useEffect, lazy, Suspense} depuis 'react'
importer l'application depuis '../App'
importer {Store} depuis '../Store'
importer {IEpisodeProps} de '../types/interfaces'
import {fetchDataAction, toggleFavAction} à partir de '../Actions'
const EpisodesList = paresseux(() => importation ('./ EpisodesList'))
  const HomePage = (): JSX.Element => {
  const {state, dispatch} = useContext (Store)
  useEffect (() => {
    state.episodes.length === 0 && fetchDataAction (répartition)
  })
  accessoires const: IEpisodeProps = {
    épisodes: state.episodes,
    magasin: {état, expédition},
        toggleFavAction,
    favoris: state.favourites
    }
  revenir (
    
      <Retour de suspense = {
chargement...
}>
)   } exporter la page d'accueil par défaut

Notre FavPage doit être lié, nous avons donc besoin d'un lien dans notre en-tête App.tsx. Pour ce faire, nous utilisons Reach Router, une bibliothèque similaire à React Router. William Le explique les différences entre Reach Router et React Router.

Dans votre CLI, exécutez npm install @ reach / router @ types / reach__router. Nous installons à la fois la bibliothèque Reach Router et atteindre-routeur les types.

Une fois l'installation réussie, importez Lien de @ portée / routeur.

importer React, {useContext, Fragment} depuis 'react'
importer {Store} à partir de './tsx'
importer {Link} depuis '@ reach / router'
  const App = ({
  les enfants
}: {
  enfants: JSX.Element
   }): JSX.Element => {
      const {state} = useContext (Store)

  
  revenir (
    
      

Money Heist

Choisissez votre épisode préféré

Accueil Favoris: {state.favourites.length}
{enfants} )  } exporter l'application par défaut

Nous détruisons le magasin useContext. Enfin, notre maison aura un Lien et un chemin vers /, tandis que notre préféré a un chemin vers / favoris.

{state.favourites.length} vérifie le nombre d'épisodes dans les états favoris et l'affiche.

Enfin, dans notre index.tsx fichier, nous importons le FavPage et HomePage composants, et les envelopper dans le Routeur.

Copiez le code en surbrillance dans le code existant:

importer React à partir de 'react'
importer ReactDOM depuis 'react-dom'
import './index.css'
importer {StoreProvider} à partir de './Store'
importer {Router, RouteComponentProps} depuis '@ reach / router'
importer HomePage à partir de './components/HomePage'
importer FavPage à partir de './components/FavPage'
const RouterPage = (
  accessoires: {pageComponent: JSX.Element} & RouteComponentProps
) => props.pageComponent
ReactDOM.render (
  
   
      
      <RouterPage pageComponent = {} path = '/' />
      <RouterPage pageComponent = {} path = '/ faves' />
    
  ,
  document.getElementById ('root')
)

Voyons maintenant comment la mise en œuvre ADD_FAV travaux.

Le code "Ajouter un favori" fonctionne (Grand aperçu)

Supprimer la fonctionnalité préférée

Enfin, nous ajouterons la «fonction de suppression d'épisode», de sorte que lorsque vous cliquez sur le bouton, nous basculons entre l'ajout ou la suppression d'un épisode préféré. Nous afficherons le nombre d'épisodes ajoutés ou supprimés dans l'en-tête.

BOUTIQUE

Pour créer la fonctionnalité «Supprimer l'épisode préféré», nous ajouterons un autre étui dans notre boutique. Alors, allez à Store.tsx et ajoutez le code en surbrillance:

importer React, {useReducer, createContext} de 'react'
importer {IState, IAction} depuis './types/interfaces'
const initialState: IState = {
  épisodes: [],
  favoris: []
}
export const Store = createContext(Etat initial)
const reducer = (état: IState, action: IAction): IState => {
  commutateur (action.type) {
    cas 'FETCH_DATA':
      retourner {... état, épisodes: action.payload}
    cas 'ADD_FAV':
      retour {... état, favoris: [...state.favourites, action.payload] }
        cas 'REMOVE_FAV':
      retourner {... état, favoris: action.payload}
        défaut:
      état de retour
  }
}
export const StoreProvider = ({children}: JSX.ElementChildrenAttribute): JSX.Element => {
  const [state, dispatch] = useReducer (réducteur, initialState)
  revenir {enfants}
}

Nous ajoutons encore un autre cas nommé REMOVE_FAV et retourner un objet contenant la copie de notre Etat initial. Également favoris l'état contient la charge utile de l'action.

ACTION

Copiez le code en surbrillance suivant et collez-le action.ts:

importation  {IAction, IEpisode, IState, Dispatch} à partir de './types/interfaces'
export const fetchDataAction = async (dispatch: Dispatch) => {
  const URL =
    «https://api.tvmaze.com/singlesearch/shows?q=la-casa-de-papel&embed=episodes»

  const data = attente de récupération (URL)
  const dataJSON = attendre data.json ()
  expédition de retour ({
    tapez: 'FETCH_DATA',
    charge utile: dataJSON.  _ embedded.episodes
  })
}
// Ajouter IState avec son type
export const toggleFavAction = (état: IState, dispatch: any, episode: IEpisode | any): IAction => {
  const episodeInFav = state.favourites.includes (épisode)
    laissez dispatchObj = {
    tapez: 'ADD_FAV',
    charge utile: épisode
  }
    if (episodeInFav) {
    const favWithoutEpisode = state.favourites.filter (
      (fav: IEpisode) => fav.id! == episode.id
    )
    dispatchObj = {
      tapez: 'REMOVE_FAV',
      charge utile: favWithoutEpisode
    }
    }
  envoi de retour (dispatchObj)
}

Nous importons le Je déclare interface de ./types/interfaces, car nous devons le passer comme type au Etat accessoires dans le toggleFavAction une fonction.

Une episodeInFav est créée pour vérifier si un épisode existe dans le fichier favoris Etat.

Nous filtrons l'état des favoris pour vérifier si un identifiant favori n'est pas égal à un identifiant d'épisode. Ainsi, le dispatchObj est réaffecté un type de REMOVE_FAV et une charge utile de favWithoutEpisode.

Prenons un aperçu du résultat de notre application.

Conclusion

Dans cet article, nous avons vu comment configurer TypeScript dans un projet React et comment migrer un projet de vanilla React vers TypeScript.

Nous avons également créé une application avec TypeScript et React pour voir comment TypeScript est utilisé dans les projets React.
J'espère que vous avez pu apprendre quelques choses.

Veuillez partager vos commentaires et expériences avec TypeScript dans la section commentaires ci-dessous. J'aimerais voir ce que vous proposez!

Le référentiel de prise en charge de cet article est disponible sur GitHub.

Références

  1. «Comment migrer une application React vers TypeScript», Joe Previte
  2. «Pourquoi et comment utiliser TypeScript dans votre application React?», Mahesh Haldar
Smashing Editorial(ks, ra, il, al)