Les 5 erreurs courantes des débutants en TypeScript (et comment les éviter)

TypeScript est un outil puissant qui rend le développement JavaScript plus sûr et plus maintenable grâce à son système de typage statique. Cependant, les débutants tombent souvent dans des pièges qui peuvent compliquer leur code ou annuler les bénéfices de TypeScript. Dans cet article, nous allons explorer 5 erreurs fréquentes et voir comment les éviter avec des exemples concrets.

1. Utiliser any à tout va

Le problème :

L’utilisation abusive de any contourne le typage statique de TypeScript, ce qui revient à coder en JavaScript classique. Cela peut masquer des erreurs et rendre votre code difficile à maintenir.

Exemple d'erreur :

function addition(a: any, b: any) {
  return a + b; // Peut produire un comportement inattendu
}

console.log(addition("1", 2)); // Résultat : "12"

La solution :

Utilisez des types explicites ou des types génériques lorsque c’est nécessaire.

Exemple corrigé :

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

console.log(addition(1, 2)); // Résultat : 3

2. Typage incorrect des objets

Le problème :

Beaucoup de débutants oublient de définir correctement les structures des objets ou utilisent un typage trop permissif.

Exemple d'erreur :

const utilisateur: object = { nom: "Alice", age: 25 };
// Erreur si on tente utilisateur.nom, car TypeScript ne connaît pas les propriétés de l'objet.

La solution :

Définissez des interfaces ou des types pour décrire précisément vos objets.

Exemple corrigé :

interface Utilisateur {
  nom: string;
  age: number;
}

const utilisateur: Utilisateur = { nom: "Alice", age: 25 };
console.log(utilisateur.nom); // Résultat : "Alice"

3. Surutiliser des types complexes

Le problème :

Essayer de combiner trop de types ou d’ajouter des contraintes inutiles peut rendre le code illisible et difficile à maintenir.

Exemple d'erreur :

type Compte = { id: number; email: string } | { id: number; username: string };

const utilisateur: Compte = { id: 1, email: "[email protected]", username: "test" };
// Erreur potentielle : le type ne sait pas quelle propriété utiliser.

La solution :

Simplifiez les types complexes ou utilisez des discriminants pour clarifier vos intentions.

Exemple corrigé avec un discriminant :

type EmailCompte = { type: "email"; id: number; email: string };
type UsernameCompte = { type: "username"; id: number; username: string };

type Compte = EmailCompte | UsernameCompte;

const utilisateur: Compte = { type: "email", id: 1, email: "[email protected]" };

4. Ignorer les options de configuration TypeScript

Le problème :

Beaucoup de développeurs débutants ne prennent pas le temps de configurer correctement tsconfig.json, ce qui peut entraîner des erreurs cachées.

Exemple courant : Un projet sans les options strictes activées :

{
  "compilerOptions": {
    "strict": false}
}

Cela permet des comportements imprécis, comme ne pas vérifier si les propriétés existent.

La solution :

Activez les options strictes pour tirer pleinement parti de TypeScript.

Configuration recommandée :

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

5. Confondre types et interfaces

Le problème :

Les débutants ont du mal à choisir entre type et interface. Bien que similaires, ces deux approches ont des cas d’utilisation spécifiques.

Exemple d'erreur :

type Utilisateur = { nom: string };
type Admin = Utilisateur & { permissions: string[] };

interface Utilisateur { nom: string }
interface Admin extends Utilisateur { permissions: string[] }

// Ces deux approches sont mélangées sans raison.

La solution :

• Utilisez interface pour les objets ou quand l’héritage est requis.
• Utilisez type pour des combinaisons complexes ou des unions.

Exemple corrigé :

interface Utilisateur {
  nom: string;
}

interface Admin extends Utilisateur {
  permissions: string[];
}

const admin: Admin = { nom: "Alice", permissions: ["read", "write"] };

Bonus : Configurer un projet React/Next.js avec TypeScript

Étape 1 : Créer un projet

Pour React :

npx create-react-app mon-projet --template typescript

Pour Next.js :

npx create-next-app@latest mon-projet --typescript

Étape 2 : Vérifier tsconfig.json

Next.js génère automatiquement un fichier tsconfig.json avec des options adaptées. Assurez-vous que les options suivantes sont activées :

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/utils/*": ["utils/*"]
    }
  }
}

Étape 3 : Ajouter des types globaux

Pour éviter de répéter les mêmes types, créez un fichier types/global.d.ts :

declare module "*.css";
declare module "*.png";

Étape 4 : Utiliser les props typées

Typage pour un composant React :

interface Props {
  titre: string;
  age?: number; // Optionnel
}

const MonComposant: React.FC<Props> = ({ titre, age }) => (
  <div>
    <h1>{titre}</h1>
    {age && <p>Âge : {age}</p>}
  </div>
);

Conclusion

TypeScript est un outil formidable, mais comme tout outil, il nécessite un apprentissage pour éviter les erreurs courantes. En suivant ces conseils, vous éviterez des pièges fréquents et profiterez pleinement de la puissance de TypeScript. Alors, prêt à écrire du code plus sûr ?