3. Les props et TypeScript

Avant de relier notre composant PokemonCard au reste de l’application, nous pourrions ajouter une petite vérification supplémentaire. En effet, la prop que nous attendons en entrée s’appelle pokemon, mais rien ne nous empêche de passer un nombre, une chaîne de caractère, ou un objet quelconque à notre composant.

Ce serai quand même plus sûr de pouvoir vérifier que nous passons seulement des pokémons à notre composant PokemonCard, et rien d’autre. Nous allons ajouter cette vérification grâce à TypeScript, en ajoutant un type à notre propriété d’entrée, dans le composant pokemon-card.ts :

import React, { FunctionComponent } from 'react';
import Pokemon from '../models/pokemon';

type Props = {
  pokemon: Pokemon
};

const PokemonCard: FunctionComponent<Props> = ({pokemon}) => {
  
  return (
    <div>
      Afficher le pokémon : {pokemon.name}
    </div>
  );
}

Pour typer notre propriété d’entrée, nous avons commencer par importer notre entité pokémon à la ligne 2.

Ensuite, de la ligne 4 à 6, nous déclarons un nouveau type pour TypeScript. Ce type se nomme Props, et devra contenir un objet qui est un Pokémon.

Enfin à la ligne 8, on lie notre type Props, à notre prop d’entrée. Pour cela, on utilise la généricité de TypeScript, avec la syntaxe des « <> », et on passe le type attendu à l’intérieur. Puis on récupère la valeur de notre prop pokémon grâce au destructuring d’ES6.

Wahou ! C’est plutôt dense comme syntaxe, et même si nous connaissons tout ces éléments, il vous faudra certainement un peu de temps pour assimiler tout cela. Cependant, pas d’inquiétudes, on finiras par s’habituer, même si tout cela est peu surprenant au début.

Maintenant, il nous reste à relier notre nouveau composant PokemonCard au reste de l’application.

De plus, vous remarquerez que nous n’avons plus l’erreur précédente dans notre éditeur de code.