Challenge 2: Transformer

Solve a task requiring your own transformer.

Code transformation with a transformer

In this challenge you will write your own transformer. Produce new nodes with ts.factory, transform children with ts.visitEachChild, and apply with ts.transform. You will replace specific node kinds (TrueKeyword, NumericLiteral).

Exercise Replace true with false

Create a SourceFile from let a = true; let b = true;. Write a transformer that replaces TrueKeyword nodes with ts.factory.createFalse(). Descend with ts.visitEachChild. Apply with ts.transform and print with ts.createPrinter.

Show example solution

import ts from "typescript";

const sourceText = "let a = true; let b = true;";
const sf = ts.createSourceFile("app.ts", sourceText, ts.ScriptTarget.Latest, true);

const transformer: ts.TransformerFactory<ts.SourceFile> = function(context: ts.TransformationContext) {
  return function visit(node: ts.Node): ts.Node {
    if (node.kind === ts.SyntaxKind.TrueKeyword) {
      return ts.factory.createFalse();
    }
    return ts.visitEachChild(node, visit, context);
  };
};

const result = ts.transform(sf, [transformer]);
const printer = ts.createPrinter();
process.stdout.write(printer.printFile(result.transformed[0] as ts.SourceFile));
result.dispose();

Exercise Replace numbers with 0

Create a SourceFile from let a = 5; let b = 10; let c = 15;. Write a transformer that replaces NumericLiteral nodes with ts.factory.createNumericLiteral("0"). Descend with ts.visitEachChild. Apply with ts.transform and print with ts.createPrinter.

Show example solution

import ts from "typescript";

const sourceText = "let a = 5; let b = 10; let c = 15;";
const sf = ts.createSourceFile("app.ts", sourceText, ts.ScriptTarget.Latest, true);

const transformer: ts.TransformerFactory<ts.SourceFile> = function(context: ts.TransformationContext) {
  return function visit(node: ts.Node): ts.Node {
    if (ts.isNumericLiteral(node)) {
      return ts.factory.createNumericLiteral("0");
    }
    return ts.visitEachChild(node, visit, context);
  };
};

const result = ts.transform(sf, [transformer]);
const printer = ts.createPrinter();
process.stdout.write(printer.printFile(result.transformed[0] as ts.SourceFile));
result.dispose();

Test yourself

Which method is used to transform child nodes in a transformer?
- ts.forEachChild
- ts.mapChildren
- ts.transformChildren
- ts.visitEachChild
Show answer

ts.visitEachChild — ts.visitEachChild transforms child nodes with a visitor and returns a new parent; forEachChild is read-only, and transformChildren and mapChildren do not exist.

Create a false node

if (node.kind === ts.SyntaxKind.TrueKeyword) {
  return ts.factory.____();
}

Show answer

if (node.kind === ts.SyntaxKind.TrueKeyword) {
  return ts.factory.createFalse();
}

Transformer parts

ts.transform

Applies the transformer
ts.factory

Produces nodes
ts.visitEachChild

Transforms children
ts.SyntaxKind

Gives the node kind

Next lesson: Challenge 3: tsconfig

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies