0Pricing
TypeScript Academy · Lekcja

Niestandardowe transformatory i generowanie kodu

Pisz transformacje kompilatora, które modyfikują AST.

Niestandardowe transformatory i generowanie kodu to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Czym są transformery

Transformery TypeScriptu to funkcje, które otrzymują węzeł AST i zwracają węzeł, który może być zmodyfikowany. Są uruchamiane podczas kompilacji w celu wygenerowania niestandardowego wyniku.

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

Struktura fabryki transformera

Fabryka transformera przyjmuje TransformationContext i zwraca funkcję, która przekształca węzły 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;
  };

Odwiedzanie z użyciem kontekstu

ts.visitEachChild (a nie forEachChild) jest używane wewnątrz transformerów, ponieważ prawidłowo rekonstruuje zmodyfikowane węzły.

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

Tworzenie nowych węzłów za pomocą ts.factory

Obiekt ts.factory udostępnia metody do tworzenia każdego rodzaju węzła AST.

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

Stosowanie transformerów do programu

Przekaż transformery do opcji customTransformers funkcji program.emit.

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

Generowanie kodu: drukowanie węzłów

Użyj ts.createPrinter, aby przekształcić węzły AST z powrotem w ciągi znaków zawierające kod źródłowy, bez uruchamiania pełnego kompilatora.

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

Generowanie całych plików źródłowych

Możesz utworzyć kompletny plik źródłowy od podstaw za pomocą ts.factory.createSourceFile albo składając listę węzłów instrukcji.

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

Przekształcanie importów

Częstym przypadkiem użycia jest przekształcanie ścieżek importu — na przykład zamiana ścieżek z aliasami na ścieżki względne podczas generowania wyniku.

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

Testowanie transformerów

Testuj transformery, stosując je do małego pliku źródłowego i sprawdzając, czy wydrukowany wynik odpowiada oczekiwanemu ciągowi znaków.

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

Systemy wtyczek

Niektóre narzędzia do budowania (takie jak ttypescript / ts-patch) pozwalają rejestrować transformery jako wtyczki w tsconfig, dzięki czemu stają się one niewidoczne dla procesu pracy deweloperskiej.

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

Podsumowanie: niestandardowe transformery

Transformery pozwalają przepisywać kod TypeScriptu na poziomie AST podczas kompilacji. Używaj ts.visitEachChild do rekurencyjnego przechodzenia po drzewie, ts.factory do tworzenia węzłów, a ts.createPrinter do generowania tekstu źródłowego.

Szybkie sprawdzenie

Jakiego obiektu używa się do tworzenia nowych węzłów AST w transformerze?

Czego się Państwo nauczyli

Niestandardowe transformery modyfikują AST TypeScriptu podczas kompilacji. Używaj ts.visitEachChild do rekurencji, ts.factory do tworzenia nowych węzłów oraz program.emit z opcją customTransformers do ich stosowania.

Często zadawane pytania

Czy lekcja „Niestandardowe transformatory i generowanie kodu” jest bezpłatna?

Tak — pełny tekst „Niestandardowe transformatory i generowanie kodu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Niestandardowe transformatory i generowanie kodu”?

Pisz transformacje kompilatora, które modyfikują AST. Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Niestandardowe transformatory i generowanie kodu”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Tworzenie programu TypeScript za pomocą API
  2. Przechodzenie po AST za pomocą odwiedzających
  3. Niestandardowe transformatory i generowanie kodu
  4. Budowanie prostego narzędzia do lintowania
← Powrót do TypeScript Academy