Dans React with TypeScript, nous pouvons utiliser deux approches principales pour créer des composants : les composants fonctionnels et de classe. Les deux approches permettent de travailler avec des accessoires et des états, mais utilisent des paradigmes légèrement différents. TypeScript améliore encore la sécurité du développement en fournissant un typage statique, qui nous permet de définir avec précision la forme des accessoires et l'état.

Ci-dessous, nous examinerons des exemples de différents composants, utilisant des interfaces pour définir des types, afin de garantir la cohérence et la lisibilité du code.

F-1. Composant fonctionnel sans accessoires ni état

Dans ce cas, un composant fonctionnel simple qui n'utilise ni accessoires ni état ressemble à ceci :

import React from 'react';

const FunctionalComponent: React.FC = () => {
  return 
Hello, DEV.to!
;
};

Ce composant affiche uniquement du texte statique.

F-2. Composant fonctionnel avec accessoires

Lorsque nous voulons transmettre des données via des accessoires, nous utilisons des interfaces pour définir la forme de ces données :

import React from 'react';

interface IMyProps {
  name: string;
}

const FunctionalComponentWithProps: React.FC = ({ name }) => {
  return 
Hello, {name}!
;
};

Ici, IMyProps contient le nom utilisé pour afficher le message d'accueil personnalisé.

F-3. Composant fonctionnel avec état

Lors de l'utilisation de l'état dans des composants fonctionnels, nous utilisons le hook useState de React :

import React, { useState } from 'react';

const FunctionalComponentWithState: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

Ce composant utilise l'état local pour suivre les compteurs.

F-4. Un composant fonctionnel avec des accessoires et un état

En combinant les accessoires et l'état, nous pouvons avoir des composants flexibles qui reçoivent des données via des accessoires et manipulent l'état en interne :

import React, { useState } from 'react';

interface IMyProps {
  initialCount: number;
}

const FunctionalComponentWithPropsAndState: React.FC = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

Ce composant utilise initialCount comme accessoire et un état interne pour le suivi dynamique des compteurs.

K-1. Composant de classe sans accessoires ni état

Un composant de classe sans accessoires ni état dans React ressemble à ceci :

import React from 'react';

class ClassComponent extends React.Component {
  render() {
    return 
Hello, DEV.to!
;
  }
}

Il s'agit d'un composant de classe simple qui affiche du texte statique.

K-2. Composant de classe avec accessoires

Lorsqu'un composant de classe reçoit des props, nous les définissons à l'aide de l'interface :

import React from 'react';

interface IMyProps {
  name: string;
}

class ClassComponentWithProps extends React.Component {
  render() {
    return 
Hello, {this.props.name}!
;
  }
}

Comme pour le composant fonctionnel, nous utilisons ici des accessoires pour afficher des données personnalisées.

K-3. Composant de classe avec état

Pour les composants de classe avec état, nous définissons l'état à l'intérieur du constructeur :

• Parenthèses vides dans le constructeur

Si vous n'utilisez pas de props, vous pouvez simplement laisser les parenthèses vides dans le constructeur :

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor() {
    super({});
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

• Spécifiez explicitement {} comme type pour les accessoires

Si vous souhaitez être explicite sur les accessoires, vous pouvez spécifier {} comme type :

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor(props: {}) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

-> Dans les deux cas, TypeScript et React fonctionneront correctement. Si votre composant n'utilise pas d'accessoires, vous pouvez simplement utiliser des parenthèses vides dans le constructeur, mais assurez-vous de passer {} dans le super appel pour éviter les erreurs d'initialisation.

Ce composant utilise l'état pour suivre les modifications du compteur.

K-4. Un composant de classe avec des accessoires et un état

Pour les composants de classe qui utilisent à la fois des accessoires et un état, nous pouvons combiner les deux concepts :

import React from 'react';

interface IMyProps {
  initialCount: number;
}

interface IMyState {
  count: number;
}

class ClassComponentWithPropsAndState extends React.Component {
  constructor(props: IMyProps) {
    super(props);
    this.state = {
      count: props.initialCount
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

Ce composant reçoit un compteur initial via des accessoires et manipule ensuite l'état en interne.

L'utilisation d'interfaces dans TypeScript apporte une meilleure saisie et une lisibilité du code plus facile, en particulier lorsque vous travaillez avec des structures de données plus complexes. Avec ces exemples de base, vous disposez d'une base pour écrire des composants fonctionnels et de classe avec React et TypeScript.