0Pricing
TypeScript Academy · Lezione

Transformer personalizzati e generazione del codice

Scriva trasformazioni del compilatore che modifichino l'AST.

Transformer personalizzati e generazione del codice è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.

Cosa sono i transformer?

I transformer di TypeScript sono funzioni che ricevono un nodo AST e restituiscono un nodo, eventualmente modificato. Vengono eseguiti durante la compilazione per generare un output personalizzato.

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

Struttura della factory di un transformer

Una factory di transformer riceve un TransformationContext e restituisce una funzione che trasforma i nodi 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;
  };

Visita con il contesto

ts.visitEachChild (non forEachChild) viene utilizzato all'interno dei transformer perché ricostruisce correttamente i nodi modificati.

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

Creazione di nuovi nodi con ts.factory

L'oggetto ts.factory fornisce metodi per creare ogni tipo di nodo AST.

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

Applicazione dei transformer a un programma

Passi i transformer all'opzione customTransformers di program.emit.

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

Generazione del codice: stampa dei nodi

Utilizzi ts.createPrinter per convertire i nodi AST nuovamente in stringhe di codice sorgente senza eseguire il compilatore completo.

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

Generazione di interi file sorgente

È possibile creare un file sorgente completo da zero utilizzando ts.factory.createSourceFile oppure assemblando un elenco di nodi istruzione.

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

Trasformazione degli import

Un caso d'uso comune consiste nel trasformare i percorsi degli import, ad esempio riscrivendo i percorsi con alias come percorsi relativi al momento dell'emissione.

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
    );
  }
}

Test dei transformer

Testi i transformer applicandoli a un file sorgente di piccole dimensioni e verificando che l'output stampato corrisponda alla stringa prevista.

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

Sistemi di plugin

Alcuni strumenti di build (come ttypescript / ts-patch) consentono di registrare i transformer come plugin in tsconfig, rendendoli trasparenti per il flusso di lavoro di sviluppo.

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

Riepilogo: transformer personalizzati

I transformer consentono di riscrivere il codice TypeScript a livello di AST durante la compilazione. Utilizzi ts.visitEachChild per l'attraversamento ricorsivo, ts.factory per creare nodi e ts.createPrinter per generare il codice sorgente.

Verifica rapida

Quale oggetto utilizza per creare nuovi nodi AST in un transformer?

Cosa ha imparato

I transformer personalizzati modificano l'AST di TypeScript durante la compilazione. Utilizzi ts.visitEachChild per la ricorsione, ts.factory per creare nuovi nodi e program.emit con customTransformers per applicarli.

Domande Frequenti

La lezione «Transformer personalizzati e generazione del codice» è gratuita?

Sì — il testo completo di «Transformer personalizzati e generazione del codice» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.

Cosa imparerò in «Transformer personalizzati e generazione del codice»?

Scriva trasformazioni del compilatore che modifichino l'AST. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Transformer personalizzati e generazione del codice»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?

Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Creazione di un programma TypeScript con l'API
  2. Attraversamento dell'AST con i visitor
  3. Transformer personalizzati e generazione del codice
  4. Creazione di un semplice strumento di linting
← Torna a TypeScript Academy