TypeScript pour les développeurs front-end

JavaScript est partout, mais ses faiblesses sont connues : erreurs silencieuses, typage faible, bugs découverts en production. TypeScript résout ces problèmes et devient incontournable pour les développeurs front-end sérieux.

TypeScript en bref

TypeScript est un sur-ensemble de JavaScript qui ajoute le typage statique. Tout code JavaScript valide est du TypeScript valide, mais TypeScript permet d'aller plus loin.

• Développé par Microsoft, open source
• Compilé en JavaScript standard
• Adoption massive : React, Vue, Angular le supportent nativement

Pourquoi adopter TypeScript

Détection d'erreurs à la compilation

TypeScript attrape les bugs avant l'exécution :

• Propriétés manquantes
• Types incompatibles
• Fautes de frappe dans les noms de variables
• Appels de fonctions avec mauvais arguments

Autocomplétion intelligente

L'IDE connaît la forme de vos données. Il suggère les propriétés disponibles, les méthodes, les paramètres attendus. Productivité multipliée.

Refactoring sécurisé

Renommer une propriété, changer une signature de fonction : TypeScript vous montre tous les endroits à mettre à jour. Pas de "grep and pray".

Documentation vivante

Les types servent de documentation. Un nouveau développeur comprend la structure des données sans lire de doc externe.

Les bases du typage

Types primitifs

let nom: string = "Alice";
let age: number = 30;
let actif: boolean = true;
let inconnu: null = null;

Tableaux et objets

let nombres: number[] = [1, 2, 3];
let utilisateur: { nom: string; age: number } = {
  nom: "Alice",
  age: 30
};

Interfaces

Pour définir la forme des objets :

interface Utilisateur {
  id: number;
  nom: string;
  email: string;
  age?: number; // optionnel
}

Types et Union

type Statut = "actif" | "inactif" | "suspendu";
type IdOuNom = number | string;

TypeScript avec React

Typage des props

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: "primary" | "secondary";
  disabled?: boolean;
}

function Button({ label, onClick, variant = "primary", disabled }: ButtonProps) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

Typage des états

interface User {
  id: number;
  name: string;
}

const [user, setUser] = useState<User | null>(null);
const [users, setUsers] = useState<User[]>([]);

Typage des événements

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  console.log(e.target.value);
}

function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();
}

Fonctionnalités avancées

Generics

Fonctions et composants réutilisables avec types variables :

function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

const num = firstElement([1, 2, 3]); // type: number
const str = firstElement(["a", "b"]); // type: string

Type guards

Affiner les types conditionnellement :

function isString(value: unknown): value is string {
  return typeof value === "string";
}

function process(value: string | number) {
  if (isString(value)) {
    console.log(value.toUpperCase()); // TS sait que c'est un string
  }
}

Utility types

Types utilitaires fournis par TypeScript :

• Partial<T> : rend toutes les propriétés optionnelles
• Required<T> : rend toutes les propriétés requises
• Pick<T, K> : sélectionne certaines propriétés
• Omit<T, K> : exclut certaines propriétés
• Record<K, V> : objet avec clés K et valeurs V

Migration JavaScript → TypeScript

Stratégie progressive

1. Ajoutez TypeScript au projet (pas besoin de tout convertir)
2. Renommez les fichiers .js en .ts progressivement
3. Commencez par les fichiers utilitaires et types partagés
4. Activez les options strictes graduellement

Configuration tsconfig.json

Pour commencer :

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

Erreurs courantes à éviter

any partout

Utiliser any désactive TypeScript. Préférez unknown si le type est vraiment inconnu, puis affinez avec des type guards.

Types trop larges

string quand vous pourriez avoir "success" | "error". Soyez précis.

Assertions abusives

as Type force le compilateur à vous croire. Utilisez avec parcimonie.

Ressources pour progresser

• Documentation officielle TypeScript
• TypeScript Deep Dive (livre gratuit en ligne)
• Total TypeScript (cours de Matt Pocock)
• Type challenges (exercices interactifs)

Conclusion

TypeScript demande un investissement initial d'apprentissage, mais le retour est rapide : moins de bugs, meilleure maintenabilité, développement plus serein. En 2025, c'est devenu un standard pour les projets front-end professionnels.