Utilisation de TypeScript avec les composants React et KendoReact

KendoReact est une bibliothèque de composants d’interface utilisateur riche en fonctionnalités écrite avec TypeScript. En utilisant le DatePicker comme exemple, nous verrons comment TS peut simplifier le développement.

TypeScript (TS) a pris d’assaut le monde du développement Web, et de plus en plus de développeurs et d’entreprises l’adoptent chaque année. Il offre des avantages très utiles par rapport à JavaScript, tels qu’il crée un code plus maintenable, offre plus de confiance lors des refactorisations de code et aide à détecter de nombreux bogues avant même qu’une application ne s’exécute.

Dans cet article, nous explorerons les avantages de l’utilisation de TypeScript avec React et les avantages que les développeurs peuvent attendre des bibliothèques écrites avec TypeScript lors de la création d’applications React. Nous utiliserons le Bibliothèque d’interface utilisateur KendoReact comme exemple d’une telle bibliothèque. Si vous connaissez TypeScript, vous pouvez passer directement à Configuration du projet et voyez la différence dans l’utilisation de composants développés avec TypeScript.

Pourquoi devrions-nous utiliser TypeScript ?

JavaScript (JS) est un langage dynamique qui permet aux développeurs de créer des variables et d’attribuer librement différents types de valeurs. Par exemple, en JavaScript, nous pouvons créer une variable avec une chaîne et lui affecter ultérieurement un objet et vice versa, sans aucune restriction.

let val = 'Hello World'

val = {
  message: 'Hello World'
}

Disons que nous voulons vérifier quel est le caractère à la position 3. Nous pourrions le faire en utilisant la méthode de chaîne appelée charAt.

val.charAt(3) 

Cela fonctionnera si le val est une chaîne. Cependant, si c’est un objet, nous obtiendrions une erreur qui val.charAt n’est pas une fonction.

let val = 'Hello World'

val.charAt(3) 

val = {
  message: 'Hello World'
}

val.charAt(3) 

TypeScript nous aide à éviter de tels problèmes avec le typage statique. Nous pouvons spécifier explicitement un type de variable ou laisser TypeScript le déduire.

let val: string = 'Hello world'; 

Maintenant, TypeScript sait que le val variable est de type chaîne. On pourrait même sauter le : string part, et TypeScript saura toujours que val ne devrait jamais être qu’une chaîne en raison de l’inférence de type. Pour cette raison, si nous essayions d’attribuer une valeur d’un type différent, le compilateur TypeScript renverrait une erreur.

Au lieu de cela, nous aurions besoin d’indiquer explicitement à TypeScript qu’un objet peut être affecté au val variable.

type Value = string | {
  message: string
}

let val: Value = 'Hello world';

val.charAt(3)

val = {
  message: 'Hello World'
}

Après avoir précisé que le val la variable peut être soit de type string ou object qui a un message propriété, nous pouvons assigner un objet à la val variable. Cependant, si nous essayons d’appeler val.charAt après avoir assigné un objet, le compilateur TypeScript renverra à nouveau une erreur.

C’est ainsi que TypeScript avec React peut vous aider à éviter et à détecter de nombreux bogues dès le début. Le compilateur TypeScript s’arrêtera si le code n’a pas de sens logique ou syntaxique. Nous ne pouvons pas accéder au charAt méthode sur un objet, car les objets n’ont pas une telle méthode – les chaînes en ont. Explorons d’autres avantages que TypeScript offre, mais d’abord, configurons un nouveau projet.

Configuration du projet

Si vous souhaitez suivre ce tutoriel, vous pouvez rapidement échafauder un nouveau projet React en utilisant Vite en exécutant la commande ci-dessous :

$ npm create vite@latest kendo-react-components --template react-ts

Une fois le projet échafaudé, emménagez-y et installez toutes les dépendances.

$ cd kendo-react-components && npm install

Si vous n’avez jamais entendu parler de Vite auparavant, j’ai écrit un article à ce sujet—Qu’est-ce que Vite : le guide des outils de projet modernes et ultra-rapides.

Nous devons également installer quelques packages spécifiques à KendoReact.

$ npm install --save @progress/kendo-react-dateinputs @progress/kendo-react-intl @progress/kendo-licensing @progress/kendo-theme-default

Si vous souhaitez en savoir plus sur les thèmes de KendoReact, consultez le Construire un système de conception avec Kendo UI article.

Enfin, nous devons importer le thème KendoReact Default que nous venons d’installer dans le App composant et mettre à jour le App.css dossier.

src/App.tsx

import "@progress/kendo-theme-default/dist/all.css";
import "./App.css";

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

src/App.css

.App {
  text-align: center;
  max-width: 30rem;
  margin: 4rem; auto;
}

Voilà pour la configuration. Nous pouvons maintenant démarrer le serveur de développement en exécutant npm run dev.

Vous pouvez trouver des exemples de code complets pour cet article dans ce référentiel GitHub et un StackBlitz interactif ci-dessous.

KendoReact DatePicker avec TypeScript

Comme mentionné précédemment, l’utilisation de TypeScript avec React offre des avantages qui ne sont pas disponibles lors de l’utilisation de JavaScript vanille. De bons exemples sont les indications de type et les suggestions de saisie semi-automatique pour les composants. KendoReact est une bibliothèque de composants d’interface utilisateur riche en fonctionnalités écrite en TypeScript, et nous utiliserons son Réagir DatePicker composant pour démontrer comment TypeScript peut simplifier le développement.

Conseils de saisie et saisie semi-automatique

Chaque fois que nous utilisons un composant de KendoReact et que nous souhaitons leur transmettre des accessoires, nous recevrons des suggestions pertinentes. L’image ci-dessous montre les suggestions pour le Composant KendoReact DatePicker.

Grâce à TypeScript, nous avons les accessoires disponibles à portée de main, ce qui réduit considérablement le temps de lecture de la documentation.

De plus, des suggestions pertinentes sont fournies même si votre projet n’utilise pas TypeScript, mais uniquement JavaScript, car les éditeurs de code peuvent récupérer les types des composants qui les fournissent. Malheureusement, il y a des limites à ce que les éditeurs peuvent faire.

Par exemple, disons que nous avons créé un composant wrapper autour du composant DatePicker de KendoReact avec des configurations par défaut qui doivent être appliquées partout dans notre projet.

import { DatePicker } from "@progress/kendo-react-dateinputs";

const MyDatePicker = props => {
  return <DatePicker format="MM-dd-yyyy" {...props} />;
};

export default MyDatePicker;

L’image ci-dessous montre le type de suggestions fournies par Visual Studio Code pour notre composant wrapper DatePicker.

Comme vous pouvez le voir, toutes les suggestions d’accessoires pertinentes pour le DatePicker composant ont disparu. L’éditeur ne sait pas que MyDatePicker le composant accepte exactement les mêmes accessoires que DatePicker. C’est là que TypeScript entre en jeu.

src/components/MyDatePicker.tsx

import { DatePicker, DatePickerProps } from "@progress/kendo-react-dateinputs";

export type MyDatePickerProps = DatePickerProps & {};

const MyDatePicker = (props: MyDatePickerProps) => {
  return <DatePicker format="MM-dd-yyyy" {...props} />;
};

export default MyDatePicker;

Lorsque vous utilisez TypeScript avec React, nous pouvons spécifier le type d’accessoires qu’un composant accepte. De plus, nous pouvons même importer des types d’autres bibliothèques.

Dans l’extrait de code ci-dessus, nous précisons que le props l’objet doit correspondre à DatePickerProps type, qui est importé du @progress/kendo-react-dateinputs forfait.

Importons et rendons le MyDatePicker composant dans le App.tsx dossier.

src/App.tsx

import "@progress/kendo-theme-default/dist/all.css";
import "./App.css";
import MyDatePicker from "./components/MyDatePicker";

function App() {
  return (
    <div className="App">
      <MyDatePicker  />
    </div>
  );
}

export default App;

Essayez d’ajouter des accessoires. Vous devriez voir que les suggestions de saisie semi-automatique pertinentes sont de retour !

Attraper les fautes de frappe accidentelles avec TypeScript

Un autre avantage de l’utilisation de TypeScript est que si nous essayons de transmettre un accessoire qui n’a pas été spécifié, TypeScript nous en informera. C’est particulièrement utile pour traiter les fautes de frappe.

La DatePicker le composant accepte un accessoire appelé format, qui permet de configurer dans quel format une date doit être affichée. Mais et si au lieu de formaton tape formt?

Eh bien, un projet JavaScript fonctionnerait, et nous aurions besoin de comprendre pourquoi le DatePicker Le composant n’affiche pas la date dans le format attendu. Dans un projet TypeScript, nous verrons immédiatement un message d’erreur.

Nous pouvons immédiatement agir et corriger l’erreur grâce à un message d’erreur utile. Il en va de même si nous essayons de passer une valeur du mauvais type. Par exemple, le format prop est facultatif, mais s’il est passé, il doit s’agir d’une chaîne. Si nous passons un type différent, TypeScript nous en informera, comme indiqué dans l’image ci-dessous.

C’est encore une autre façon dont TypeScript peut nous faire gagner beaucoup de temps.

Comment étendre les accessoires acceptables

Puisque nous avons un composant wrapper, nous ne sommes pas limités aux types fournis par KendoReact uniquement. Disons qu’on aimerait MyDatePicker composant pour accepter un prop de message d’erreur et l’afficher sous le DatePicker composant. Nous pouvons modifier le MyDatePickerProps tapez et croisez le DatePickerProps taper avec le nôtre.

src/components/MyDatePicker.tsx

import { DatePicker, DatePickerProps } from "@progress/kendo-react-dateinputs";

export type MyDatePickerProps = DatePickerProps & {
  errorMessage?: string;
};

const MyDatePicker = (props: MyDatePickerProps) => {
  const { errorMessage, ...datePickerProps } = props;
  return (
    <>
      <DatePicker format="MM-dd-yyyy" {...datePickerProps} />
      {errorMessage ? (
        <p
          style={{ color: "red", margin: "0.5rem 0", display: "inline-block" }}
        >
          {errorMessage}
        </p>
      ) : null}
    </>
  );
};

export default MyDatePicker;

Outre les accessoires définis dans la bibliothèque KendoReact, MyDatePicker le composant accepte maintenant également le errorMessage soutenir.

src/App.tsx

import "@progress/kendo-theme-default/dist/all.css";
import "./App.css";
import MyDatePicker from "./components/MyDatePicker";

function App() {
  return (
    <div className="App">
      <MyDatePicker format="dd-MM-yyyy" errorMessage="Please enter the date" />
    </div>
  );
}

export default App;

L’image ci-dessous montre à quoi devrait ressembler le composant.

Ce n’est pas tout pour les accessoires et comment TypeScript peut les aider. Disons que nous avons décidé de supprimer le errorMessage accessoire de l’emballage DatePicker composant et remplacez-le par un error objet à la place. TypeScript mettrait en évidence chaque fichier où MyDatePicker est utilisé et reçoit le errorMessage soutenir.

Les types servent de contrat d’API, et s’il est rompu quelque part, le compilateur de TypeScript nous tiendra informés. Ceci est extrêmement utile, en particulier lorsque nous devons refactoriser beaucoup de code à divers endroits, car nous ne pourrons pas compiler le projet tant que tous les types ne correspondent pas.

Cette situation peut également se produire si un composant tiers subit une modification avec rupture et que certains de ses accessoires sont renommés. En raison de la différence de types entre les versions, TypeScript se plaindrait que les accessoires passés au composant mis à niveau sont désormais incorrects. C’est encore une autre façon dont TypeScript peut empêcher le code d’expédition qui est cassé.

Sommaire

TypeScript est un outil puissant qui peut empêcher de nombreux bogues d’atteindre la production, car ils sont détectés au moment de la compilation plutôt qu’au moment de l’exécution. Les conseils de type, la saisie semi-automatique pertinente avec des suggestions et des messages d’erreur dans un IDE rendent le processus de développement beaucoup plus facile et plus rapide et aident à garder la base de code plus maintenable et plus simple à refactoriser. De plus, TypeScript se combine très bien avec React et les développeurs peuvent en profiter pleinement en utilisant des bibliothèques tierces écrites avec TypeScript, telles que la bibliothèque d’interface utilisateur KendoReact.