ตัวแปลงแบบกำหนดเองและการสร้างโค้ด

ตัวแปลงคืออะไร

import ts from "typescript";
type Transformer = ts.TransformerFactory<ts.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;
  };

การเยี่ยมชมด้วยบริบท

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

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

การใช้ตัวแปลงกับ program

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

การสร้างโค้ด: การพิมพ์โหนด

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

การสร้างไฟล์ต้นฉบับทั้งหมด

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

การแปลงการนำเข้า

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

การทดสอบตัวแปลง

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

ระบบปลั๊กอิน

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

ทบทวน: ตัวแปลงแบบกำหนดเอง

ตรวจสอบความเข้าใจ

สิ่งที่ได้เรียนรู้