Les meilleures pratiques TypeScript

Introduction

JavaScript est le langage incontournable du web, utilisé aussi bien côté client (navigateur) que côté serveur (avec Node.js). Mais sa flexibilité a un revers : il ne détecte certaines erreurs qu’au moment de l’exécution, ce qui peut provoquer des bugs difficiles à anticiper, surtout sur des projets complexes.

C’est pour répondre à ces limites que Microsoft a créé TypeScript. Il s’agit d’une surcouche de JavaScript qui ajoute un typage statique et des outils de vérification à la compilation, tout en restant 100 % compatible avec JavaScript. En clair, tout code JavaScript valide est aussi du TypeScript.

L’objectif de TypeScript est simple : rendre le développement plus sûr, plus clair et plus maintenable, en détectant les erreurs avant même de lancer le programme. Il facilite également la collaboration entre développeurs en servant de documentation implicite grâce aux types.

Aujourd’hui, TypeScript est utilisé massivement dans les projets modernes, que ce soit pour des applications front-end (React, Vue, Angular) ou back-end (Node.js, NestJS).

Dans cet article, nous allons explorer plusieurs bonnes pratiques pour tirer pleinement parti de TypeScript dans vos projets.

Utilisez des types explicites

Même si TypeScript est capable d’inférer les types, les déclarer explicitement améliore la lisibilité du code et réduit les risques d’erreurs lors de refactorisations.

function add(a: number, b: number): number {
  return a + b;
}

Préférez type plutôt qu’interface pour les objets simples

Les type sont plus flexibles pour combiner ou modifier des structures grâce aux opérateurs & (intersection) et | (union). Utilisez interface surtout lorsque vous travaillez avec des classes ou des objets extensibles.

Évitez le type any

Le type any désactive la vérification de type et annule les bénéfices de TypeScript. Utilisez-le seulement en dernier recours, ou préférez unknown pour plus de sécurité lorsque le type exact n’est pas encore connu.

Activez les options strictes

Dans tsconfig.json, activez les options strictes comme strict, noImplicitAny et strictNullChecks. Cela vous aidera à détecter davantage d’erreurs à la compilation et à améliorer la fiabilité globale du code.

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

Utilisez les types utilitaires intégrés

TypeScript fournit des types utilitaires comme Partial<T>, Pick<T, K>, Record<K, T>, etc. Ces helpers vous permettent de manipuler et de transformer facilement vos structures de données sans tout réécrire.

Exemple concret : TypeScript avec React et Node.js

Prenons un exemple simple d'application : un formulaire React qui envoie des données à une API Node.js.

Côté React

type UserFormProps = {
  onSubmit: (data: { name: string; email: string }) => void;
};

function UserForm({ onSubmit }: UserFormProps) {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit({ name, email }); // Erreur détectée si un champ est manquant ou mal typé
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <button type="submit">Envoyer</button>
    </form>
  );
}

Côté Node.js

import express, { Request, Response } from 'express';
const app = express();
app.use(express.json());

type User = {
  name: string;
  email: string;
};

app.post('/users', (req: Request<{}, {}, User>, res: Response) => {
  const { name, email } = req.body; // Erreur détectée si une propriété est absente ou de mauvais type
  res.json({ message: `Utilisateur ${name} ajouté avec succès !` });
});

app.listen(3000, () => console.log('Serveur démarré sur le port 3000'));

Dans cet exemple, le typage statique garantit que les données envoyées depuis React correspondent exactement à ce que le serveur Node.js attend. Si un champ est oublié ou mal typé, l’erreur est détectée immédiatement à la compilation, avant même le lancement de l’application.

Conclusion

En adoptant TypeScript et en appliquant ces bonnes pratiques, vous réduisez les risques de bugs, améliorez la lisibilité du code et facilitez la maintenance à long terme. Que ce soit avec React, Node.js ou tout autre environnement JavaScript, TypeScript est un allié précieux pour écrire du code fiable et évolutif.