TypeScript Academy · Pelajaran

Transformer Khusus dan Pembuatan Kode

Tulis transformasi compiler yang mengubah AST.

Transformer Khusus dan Pembuatan Kode adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa Itu Transformer?

Transformer TypeScript adalah fungsi yang menerima simpul AST dan mengembalikan simpul yang mungkin telah diubah. Transformer berjalan selama kompilasi untuk menghasilkan keluaran khusus.

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

Bentuk Transformer Factory

Transformer factory menerima TransformationContext dan mengembalikan fungsi yang mengubah simpul 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;
  };

Mengunjungi dengan Konteks

ts.visitEachChild (bukan forEachChild) digunakan di dalam transformer karena fungsi ini merekonstruksi simpul yang diubah dengan benar.

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

Membuat Simpul Baru dengan ts.factory

Objek ts.factory menyediakan metode untuk membuat setiap jenis simpul AST.

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

Menerapkan Transformer ke Program

Teruskan transformer ke opsi customTransformers milik program.emit.

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

Pembuatan Kode: Mencetak Simpul

Gunakan ts.createPrinter untuk mengonversi simpul AST kembali menjadi string kode sumber tanpa menjalankan kompilator lengkap.

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

Membuat Berkas Sumber Lengkap

Anda dapat membuat berkas sumber lengkap dari awal menggunakan ts.factory.createSourceFile atau dengan menyusun daftar simpul pernyataan.

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

Mengubah Import

Salah satu penggunaan yang umum adalah mengubah jalur import—misalnya, menulis ulang jalur beralias menjadi jalur relatif saat keluaran dibuat.

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

Menguji Transformer

Uji transformer dengan menerapkannya pada berkas sumber kecil, lalu pastikan keluaran yang dicetak cocok dengan string yang diharapkan.

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

Sistem Pengaya

Beberapa alat pembangunan, seperti ttypescript dan ts-patch, memungkinkan Anda mendaftarkan transformer sebagai pengaya dalam tsconfig sehingga keberadaannya tidak terlihat dalam alur kerja pengembangan.

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

Ringkasan: Transformer Khusus

Transformer memungkinkan Anda menulis ulang kode TypeScript pada tingkat AST selama kompilasi. Gunakan ts.visitEachChild untuk penelusuran rekursif, ts.factory untuk membuat simpul, dan ts.createPrinter untuk menghasilkan teks sumber.

Pemeriksaan Singkat

Objek apa yang digunakan untuk membuat simpul AST baru dalam transformer?

Yang Anda Pelajari

Transformer khusus mengubah AST TypeScript pada waktu kompilasi. Gunakan ts.visitEachChild untuk melakukan rekursi, ts.factory untuk membuat simpul baru, dan program.emit bersama customTransformers untuk menerapkannya.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Transformer Khusus dan Pembuatan Kode” gratis?

Ya — teks lengkap “Transformer Khusus dan Pembuatan Kode” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Transformer Khusus dan Pembuatan Kode”?

Tulis transformasi compiler yang mengubah AST. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Transformer Khusus dan Pembuatan Kode” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke TypeScript Academy