React & TypeScript

Le plus intéressant dans Angular 2 / 3 / 4 / 5, c’est TypeScript (Allez BAM ! Punchline dès le départ !).

Oui bon, j’ai rien contre Angular 2 / 3 / 4 / 5 qui est une façon très compliquée de faire des choses qu’on pourrait faire simplement avec React (BAM ! Seconde punchline !).

Angular est vraiment plein de qualités et est très clairement en tête (EXPLOSIOOOOOOOONS ! MI BLABLA SPLOSIOOOOONS ! Bon ok, ok, j’arrête)

Non, vraiment, en toute honnêteté, j’ai rien contre Angular. C’est un bon choix dans beaucoup de projets.

Mais j’aime bien React aussi (surtout), et aujourd’hui on va voir comment utiliser TypeScript au sein de notre application.

create-react-app

On va lancer un projet from scratch. Habituellement avec ReactJS, on utilise CRA (Create React App), et c’est aussi ce qu’on va faire ici mais en choisissant une version spécifique :

create-react-app my-app --scripts-version=react-scripts-ts

On utilise en fait create-react-app-typescript

On bénéficie de tout ce que CRA a à offrir, mais également d’une configuration prête à l’emploi pour TypeScript.

En terme d’arbo, c’est exactement la même organisation qu’un projet lancé avec CRA, à la différence près que nos composants n’ont plus l’extension .js, mais l’extension tsx.

Jusqu’ici rien d’extraordinaire, on va implémenter naïvement un composant Hello qui prend des props et l’ajouter à notre App.

import * as React from 'react';

const Hello = {name} => (
 <div>Hello {name}</div>
)

export default Hello;

N’oubliez pas de faire un :

yarn 

yarn start

… à la racine du projet.

Si vous jetez un oeil à la console, vous allez vous rendre compte immédiatement qu’il faut pas trop déconner avec TypeScript :

Pour régler le soucis, on doit montrer patte blanche :

import * as React from 'react';

export interface Props {
 name: string;
}

const Hello = ({name}: Props) => (
 <div>Hello {name}</div>
);

export default Hello;

On créé ici une interface qu’on va utiliser pour notre composant Hello. On déclare que name est une chaîne de caractères puis on passe notre interface à Hello.

Mais comme je n’ai pas encore ajouté les props côté App, TypeScript est bien décidé à me le faire payer :

import * as React from 'react';
import './App.css';

import Hello from './Hello';

const logo = require('./logo.svg');

class App extends React.Component {
 render() {
 return (
 <div className="App">
 <div className="App-header">
 <img src={logo} className="App-logo" alt="logo" />
 <h2>Welcome to React</h2>
 </div>

<Hello name="Bob" />

<p className="App-intro">
 To get started, edit <code>src/App.tsx</code> and save to reload.
 </p>
 </div>
 );
 }
}

export default App;

Ca met TypeScript de bonne humeur :

Mais qu’est ce qu’il se passe si je change la valeur de name en collant un nombre ?

Bam ! (EXPLOSIOOOOOOONS!) TypeScript me pète une erreur jusque dans mon IDE (Sublime) ! Pas moyen d’y échapper.

Si jamais on a besoin d’une prop optionnelle, on serait tenté de faire ceci directement sans déclarer le type de age au sein du composant Hello :

<Hello name={'Bob'} age={18}/>

Mais TypeScript lancera une erreur,.

On doit quand même la déclarer sous cette forme côté component :

export interface Props {
 name: string;
 age?: number;
}

Même si age est optionnel, son type est number, donc essayer de passer une string en prop sera considéré comme une erreur pour TS :

On a vu que ça fonctionnait pour les props, mais fondamentalement, on peut également utiliser TypeScript avec nos actions et reducers Redux. La documentation est plutôt claire à ce sujet :

https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

L’intérêt d’utiliser TypeScript avec React

Fondamentalement, on pourrait très bien utiliser les PropTypes, ça nous mettrait des warnings dans la console et on pourrait du coup fixer nos erreurs, sauf qu’avec TypeScript, on met en place en amont un ensemble de règles qui nous empêchent d’avancer tant qu’on ne les a pas fixé.

On ajoute de la rigueur, on est nettement moins sujet aux erreurs stupides que l’on fait pourtant constamment, et le tout est nettement plus lisible pour le commun des mortels.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *