0Pricing
TypeScript Academy · Leçon

Transformateurs personnalisés et génération de code

Écrivez des transformations du compilateur qui modifient l’AST

Transformateurs personnalisés et génération de code est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

Que sont les transformateurs ?

Les transformateurs TypeScript sont des fonctions qui reçoivent un nœud AST et renvoient un nœud éventuellement modifié. Ils s’exécutent pendant la compilation pour générer une sortie personnalisée.

import ts from "typescript";
type Transformer = ts.TransformerFactory<ts.SourceFile>;

Structure d’une fabrique de transformateurs

Une fabrique de transformateurs reçoit un TransformationContext et renvoie une fonction qui transforme les nœuds SourceFile.

const myTransformer: ts.TransformerFactory<ts.SourceFile> =
  (ctx) => (sf) => {
    function visit(node: ts.Node): ts.Node {
      // Modify node here
      return ts.visitEachChild(node, visit, ctx);
    }
    return ts.visitNode(sf, visit) as ts.SourceFile;
  };

Visite avec un contexte

ts.visitEachChild (et non forEachChild) est utilisé dans les transformateurs, car il reconstruit correctement les nœuds modifiés.

function visit(node: ts.Node): ts.Node {
  if (ts.isStringLiteral(node)) {
    return ts.factory.createStringLiteral(node.text.toUpperCase());
  }
  return ts.visitEachChild(node, visit, ctx);
}

Création de nouveaux nœuds avec ts.factory

L’objet ts.factory fournit des méthodes pour créer chaque type de nœud AST.

const newCall = ts.factory.createCallExpression(
  ts.factory.createIdentifier("console.log"),
  undefined,
  [ts.factory.createStringLiteral("hello")]
);

Application de transformateurs à un programme

Passez les transformateurs à l’option customTransformers de program.emit.

program.emit(undefined, undefined, undefined, false, {
  before: [myTransformer],
});

Génération de code : impression des nœuds

Utilisez ts.createPrinter pour reconvertir les nœuds AST en chaînes de code source sans exécuter le compilateur complet.

const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
const result = printer.printNode(
  ts.EmitHint.Unspecified,
  newCall,
  sf
);
console.log(result); // console.log("hello")

Génération de fichiers source complets

Vous pouvez créer un fichier source complet à partir de rien avec ts.factory.createSourceFile ou en assemblant une liste de nœuds d’instructions.

const statements = [
  ts.factory.createExpressionStatement(
    ts.factory.createCallExpression(
      ts.factory.createIdentifier("console.log"),
      undefined,
      [ts.factory.createStringLiteral("generated!")]
    )
  ),
];

Transformation des importations

Un cas d’utilisation courant consiste à transformer les chemins d’importation — par exemple, en réécrivant les chemins avec alias en chemins relatifs au moment de la génération.

if (ts.isImportDeclaration(node)) {
  const spec = node.moduleSpecifier as ts.StringLiteral;
  if (spec.text.startsWith("@app/")) {
    return ts.factory.updateImportDeclaration(
      node, node.modifiers, node.importClause,
      ts.factory.createStringLiteral(spec.text.replace("@app/", "../")),
      node.assertClause
    );
  }
}

Mise à l’épreuve des transformateurs

Vérifiez les transformateurs en les appliquant à un petit fichier source et en vous assurant que la sortie imprimée correspond à la chaîne attendue.

const result = ts.transpileModule("const x = 'hello';", {
  compilerOptions: { target: ts.ScriptTarget.ES2020 },
  transformers: { before: [myTransformer] },
});
console.log(result.outputText);

Systèmes d’extensions

Certains outils de construction (comme ttypescript / ts-patch) vous permettent d’enregistrer des transformateurs comme extensions dans tsconfig, ce qui les rend transparents dans le flux de développement.

// tsconfig.json with ts-patch:
// "plugins": [{ "transform": "./my-transformer.js" }]

Récapitulatif : transformateurs personnalisés

Les transformateurs vous permettent de réécrire du code TypeScript au niveau de l’AST pendant la compilation. Utilisez ts.visitEachChild pour le parcours récursif, ts.factory pour créer des nœuds et ts.createPrinter pour générer le texte source.

Vérification rapide

Quel objet utilisez-vous pour créer de nouveaux nœuds AST dans un transformateur ?

Ce que vous avez appris

Les transformateurs personnalisés modifient l’AST TypeScript au moment de la compilation. Utilisez ts.visitEachChild pour la récursion, ts.factory pour créer de nouveaux nœuds et program.emit avec customTransformers pour les appliquer.

Questions Fréquemment Posées

La leçon « Transformateurs personnalisés et génération de code » est-elle gratuite ?

Oui — le texte complet de « Transformateurs personnalisés et génération de code » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Transformateurs personnalisés et génération de code » ?

Écrivez des transformations du compilateur qui modifient l’AST Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Transformateurs personnalisés et génération de code » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Créer un programme TypeScript avec l’API
  2. Parcourir l’AST avec des visiteurs
  3. Transformateurs personnalisés et génération de code
  4. Créer un outil simple d’analyse statique
← Retour à TypeScript Academy