Gestion de la mémoire en TypeScript : comment fonctionne le ramasse-miettes

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Mémoire et ramasse-miettes en TypeScript : que se cache-t-il en coulisses ?

\n\n

Imaginez que vous construisez une maison. Vous achetez des briques, du ciment, des armatures — mais si vous ne nettoyez pas les déchets de construction, le chantier se transforme bientôt en décharge. La même chose se produit dans votre code TypeScript. Vous créez des objets, des tableaux, des fermetures — et si vous ne libérez pas la mémoire à temps, l'application commence à ralentir, puis plante carrément avec l'erreur Out of Memory.

\n\n

Dans cet article, nous allons voir comment fonctionne la gestion de la mémoire en TypeScript et son outil principal — le ramasse-miettes. Vous découvrirez quels mécanismes se cachent derrière la libération de la mémoire, comment éviter les fuites et pourquoi votre code peut « consommer » des mégaoctets même après que vous avez cessé de l'utiliser.

\n\n

C'est parti !

\n\n

Comment TypeScript gère-t-il la mémoire ? Les bases

\n\n

Commençons par un point important : TypeScript n'est pas un langage séparé, mais une surcouche de JavaScript. Cela signifie que la mémoire et le ramasse-miettes en TypeScript fonctionnent exactement de la même manière qu'en JavaScript. TypeScript n'ajoute pas de nouveaux mécanismes de gestion de la mémoire, mais il nous donne des outils (types, interfaces) pour écrire un code plus sûr.

\n\n

En JavaScript, la mémoire est divisée en deux zones principales :

\n\n
    \n
  • La pile (Stack) — stocke les primitives (nombres, chaînes de caractères, valeurs booléennes) et les références vers les objets. Elle est libérée automatiquement à la sortie d'une fonction.
  • \n
  • Le tas (Heap) — stocke les objets, les tableaux, les fonctions. C'est ici que travaille le ramasse-miettes.
  • \n
\n\n

Lorsque vous écrivez :

\n\n
const user = { name: 'Alice', age: 30 };
\n\n

La variable user est stockée dans la pile et contient une référence vers l'objet dans le tas. Tant qu'il y a une référence, l'objet est vivant. Dès que la référence disparaît, l'objet devient un « déchet ».

\n\n

Le ramasse-miettes en TypeScript : comment fonctionne-t-il ?

\n\n

Le ramasse-miettes (Garbage Collector, GC) est un processus automatique qui trouve les objets auxquels il n'y a plus de références et libère la mémoire qu'ils occupent. Les moteurs modernes (V8 dans Chrome, SpiderMonkey dans Firefox) utilisent des algorithmes complexes, mais la base est l'algorithme de marquage et de balayage (Mark-and-Sweep).

\n\n

Comment cela fonctionne :

\n\n
    \n
  1. Le GC commence par les « racines » — les objets globaux, les variables locales dans les fonctions en cours d'exécution.
  2. \n
  3. Il parcourt toutes les références à partir des racines et marque chaque objet atteignable.
  4. \n
  5. Tous les objets non marqués sont considérés comme des déchets et sont supprimés.
  6. \n
\n\n

Cela semble simple, mais en pratique, il y a des nuances. Par exemple, les références circulaires :

\n\n
function createCycle() {\n    const obj1: any = {};\n    const obj2: any = {};\n    obj1.ref = obj2;\n    obj2.ref = obj1;\n    return 'done';\n}
\n\n

Autrefois, de telles structures entraînaient des fuites, mais les ramasse-miettes modernes gèrent très bien les cycles — l'essentiel est que les deux objets soient inaccessibles depuis les racines.

\n\n

Fuites mémoire typiques dans les applications TypeScript

\n\n

Même avec un ramasse-miettes intelligent, on peut « marcher sur un râteau ». Voici les scénarios les plus fréquents qui conduisent à des fuites mémoire en TypeScript :

\n\n

1. Temporisateurs et gestionnaires d'événements oubliés

\n\n

L'une des causes les plus courantes. Vous vous êtes abonné à un événement, mais vous avez oublié de vous désabonner :

\n\n
class TimerComponent {\n    private intervalId: number;\n\n    start() {\n        this.intervalId = window.setInterval(() => {\n            console.log('Tick');\n        }, 1000);\n    }\n\n    // Vous avez oublié d'appeler stop() — le temporisateur vivra éternellement !\n}
\n\n

Solution : nettoyez toujours les temporisateurs et désabonnez-vous des événements dans la méthode dispose ou ngOnDestroy (pour Angular).

\n\n

2. Fermetures qui retiennent des références

\n\n

Les fermetures sont un outil puissant, mais elles peuvent accidentellement retenir d'énormes objets :

\n\n
function createHeavyClosure() {\n    const hugeData = new Array(1000                

Blogs

Book Recommendations