PricingLoginStart free
TypeScript Academy · Lektion

Anpassade transformers och kodgenerering

Skriv kompilatortransformeringar som ändrar AST

Lektion 3 av 413 steg

Anpassade transformers och kodgenerering är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Vad är transformers?

TypeScript-transformers är funktioner som tar emot en AST-nod och returnerar en eventuellt ändrad nod. De körs under kompileringen för att generera anpassade utdata.

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

En transformer factorys form

En transformer factory tar emot en TransformationContext och returnerar en funktion som transformerar SourceFile-noder.

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

Besöka noder med en kontext

ts.visitEachChild (inte forEachChild) används inuti transformers eftersom den återskapar ändrade noder på rätt sätt.

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

Skapa nya noder med ts.factory

Objektet ts.factory tillhandahåller metoder för att skapa alla typer av AST-noder.

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

Tillämpa transformers på ett program

Skicka transformers till alternativet customTransformers i program.emit.

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

Kodgenerering: skriva ut noder

Använd ts.createPrinter för att omvandla AST-noder tillbaka till källkodsträngar utan att köra hela kompilatorn.

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

Generera kompletta källfiler

Det går att skapa en komplett källfil från grunden med ts.factory.createSourceFile eller genom att sätta samman en lista med satsnoder.

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

Transformera importer

Ett vanligt användningsfall är att transformera importsökvägar – till exempel att skriva om aliaserade sökvägar till relativa sökvägar vid emit.

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

Testa transformers

Testa transformers genom att tillämpa dem på en liten källfil och kontrollera att den utskrivna utdata matchar den förväntade strängen.

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

Plugin-system

Vissa byggverktyg (som ttypescript / ts-patch) låter Er registrera transformers som plugins i tsconfig, så att de blir transparenta för utvecklingsflödet.

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

Sammanfattning: anpassade transformers

Transformers låter Er skriva om TypeScript-kod på AST-nivå under kompileringen. Använd ts.visitEachChild för rekursiv traversering, ts.factory för att skapa noder och ts.createPrinter för att generera källkod.

Snabbkontroll

Vilket objekt använder Ni för att skapa nya AST-noder i en transformer?

Besvara frågan i den interaktiva lektionen

Det här har Ni lärt Er

Anpassade transformers ändrar TypeScript-AST:n vid kompilering. Använd ts.visitEachChild för rekursion, ts.factory för att skapa nya noder och program.emit med customTransformers för att tillämpa dem.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
101
Lektioner
352
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Anpassade transformers och kodgenerering” gratis?

Ja – hela texten till ”Anpassade transformers och kodgenerering” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Anpassade transformers och kodgenerering”?

Skriv kompilatortransformeringar som ändrar AST Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?

Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Anpassade transformers och kodgenerering”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?

Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Skapa ett TypeScript-program med API:t
  2. Traversera AST med visitors
  3. Anpassade transformers och kodgenerering
  4. Bygg ett enkelt lintverktyg
← Tillbaka till TypeScript Academy