TypeScript Academy · Ders

Özel Dönüştürücüler ve Kod Üretimi

AST'yi değiştiren derleyici dönüşümleri yazın

Özel Dönüştürücüler ve Kod Üretimi, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 4 dersten oluşur.

Dönüştürücüler Nedir?

TypeScript dönüştürücüleri, bir AST düğümü alan ve (muhtemelen değiştirilmiş) bir düğüm döndüren işlevlerdir. Özel çıktı üretmek için derleme sırasında çalışırlar.

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

Dönüştürücü Fabrikasının Biçimi

Bir dönüştürücü fabrikası TransformationContext alır ve SourceFile düğümlerini dönüştüren bir işlev döndürür.

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

Bağlamla Ziyaret Etme

ts.visitEachChild (forEachChild değil), değiştirilmiş düğümleri doğru şekilde yeniden oluşturduğu için dönüştürücülerin içinde kullanılır.

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

ts.factory ile Yeni Düğümler Oluşturma

ts.factory nesnesi, her tür AST düğümünü oluşturmak için işlevler sağlar.

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

Bir Programa Dönüştürücüler Uygulama

Dönüştürücüleri program.emit işlevinin customTransformers seçeneğine aktarın.

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

Kod Üretimi: Düğümleri Yazdırma

Tam derleyiciyi çalıştırmadan AST düğümlerini kaynak kodu dizelerine dönüştürmek için ts.createPrinter kullanın.

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

Tüm Kaynak Dosyalarını Oluşturma

ts.factory.createSourceFile kullanarak veya bir ifade düğümleri listesi oluşturarak sıfırdan eksiksiz bir kaynak dosyası oluşturabilirsiniz.

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

İçe Aktarmaları Dönüştürme

Yaygın bir kullanım alanı, içe aktarma yollarını dönüştürmektir — örneğin, emit sırasında takma adlı yolları göreli yollarla yeniden yazmak.

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

Dönüştürücüleri Sınama

Dönüştürücüleri küçük bir kaynak dosyasına uygulayarak ve yazdırılan çıktının beklenen dizeyle eşleştiğini doğrulayarak sınayın.

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

Eklenti Sistemleri

Bazı derleme araçları (ttypescript / ts-patch gibi), dönüştürücüleri tsconfig içinde eklenti olarak kaydetmenize ve onları geliştirme iş akışına görünmez biçimde dahil etmenize olanak tanır.

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

Özet: Özel Dönüştürücüler

Dönüştürücüler, derleme sırasında TypeScript kodunu AST düzeyinde yeniden yazmanıza olanak tanır. Özyinelemeli dolaşım için ts.visitEachChild, düğüm oluşturmak için ts.factory ve kaynak metni üretmek için ts.createPrinter kullanın.

Hızlı Denetim

Bir dönüştürücüde yeni AST düğümleri oluşturmak için hangi nesneyi kullanırsınız?

Öğrendikleriniz

Özel dönüştürücüler, derleme zamanında TypeScript AST'sini değiştirir. Özyineleme için ts.visitEachChild, yeni düğümler oluşturmak için ts.factory ve bunları uygulamak için customTransformers ile birlikte program.emit kullanın.

Sıkça Sorulan Sorular

“Özel Dönüştürücüler ve Kod Üretimi” dersi ücretsiz mi?

Evet — “Özel Dönüştürücüler ve Kod Üretimi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 4 dersten oluşur.

“Özel Dönüştürücüler ve Kod Üretimi” dersinde ne öğreneceğim?

AST'yi değiştiren derleyici dönüşümleri yazın TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Özel Dönüştürücüler ve Kod Üretimi” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← TypeScript Academy Sayfasına Dön