Transformadores personalizados y generación de código
Escriba transformaciones del compilador que modifiquen el AST.
Transformadores personalizados y generación de código es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.
¿Qué son los transformadores?
Los transformadores de TypeScript son funciones que reciben un nodo del AST y devuelven un nodo, posiblemente modificado. Se ejecutan durante la compilación para generar una salida personalizada.
import ts from "typescript";
type Transformer = ts.TransformerFactory<ts.SourceFile>;Estructura de una factoría de transformadores
Una factoría de transformadores recibe un TransformationContext y devuelve una función que transforma nodos 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;
};Visitar con contexto
ts.visitEachChild (no forEachChild) se utiliza dentro de los transformadores porque reconstruye correctamente los nodos modificados.
function visit(node: ts.Node): ts.Node {
if (ts.isStringLiteral(node)) {
return ts.factory.createStringLiteral(node.text.toUpperCase());
}
return ts.visitEachChild(node, visit, ctx);
}Crear nodos nuevos con ts.factory
El objeto ts.factory proporciona métodos para crear cualquier tipo de nodo del AST.
const newCall = ts.factory.createCallExpression(
ts.factory.createIdentifier("console.log"),
undefined,
[ts.factory.createStringLiteral("hello")]
);Aplicar transformadores a un programa
Pase los transformadores a la opción customTransformers de program.emit.
program.emit(undefined, undefined, undefined, false, {
before: [myTransformer],
});Generación de código: imprimir nodos
Use ts.createPrinter para convertir los nodos del AST nuevamente en cadenas de código fuente sin ejecutar el compilador completo.
const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
const result = printer.printNode(
ts.EmitHint.Unspecified,
newCall,
sf
);
console.log(result); // console.log("hello")Generar archivos fuente completos
Puede crear un archivo fuente completo desde cero mediante ts.factory.createSourceFile o ensamblando una lista de nodos de instrucciones.
const statements = [
ts.factory.createExpressionStatement(
ts.factory.createCallExpression(
ts.factory.createIdentifier("console.log"),
undefined,
[ts.factory.createStringLiteral("generated!")]
)
),
];Transformar imports
Un caso de uso común es transformar las rutas de importación; por ejemplo, reescribir rutas con alias como rutas relativas durante la emisión.
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
);
}
}Probar transformadores
Pruebe los transformadores aplicándolos a un archivo fuente pequeño y comprobando que la salida impresa coincide con la cadena esperada.
const result = ts.transpileModule("const x = 'hello';", {
compilerOptions: { target: ts.ScriptTarget.ES2020 },
transformers: { before: [myTransformer] },
});
console.log(result.outputText);Sistemas de plugins
Algunas herramientas de compilación, como ttypescript / ts-patch, permiten registrar transformadores como plugins en tsconfig, de modo que sean transparentes para el flujo de trabajo de desarrollo.
// tsconfig.json with ts-patch:
// "plugins": [{ "transform": "./my-transformer.js" }]Resumen: transformadores personalizados
Los transformadores permiten reescribir código TypeScript en el nivel del AST durante la compilación. Use ts.visitEachChild para el recorrido recursivo, ts.factory para crear nodos y ts.createPrinter para generar texto fuente.
Comprobación rápida
¿Qué objeto utiliza para crear nodos nuevos del AST en un transformador?
Lo que ha aprendido
Los transformadores personalizados modifican el AST de TypeScript durante la compilación. Use ts.visitEachChild para recorrerlo recursivamente, ts.factory para crear nodos nuevos y program.emit con customTransformers para aplicarlos.
Preguntas frecuentes
¿La lección «Transformadores personalizados y generación de código» es gratis?
Sí — el texto completo de «Transformadores personalizados y generación de código» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Transformadores personalizados y generación de código»?
Escriba transformaciones del compilador que modifiquen el AST. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar TypeScript Academy?
No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Transformadores personalizados y generación de código»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?
Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Creación de un programa de TypeScript con la API
- Recorrido del AST con visitors
- Transformadores personalizados y generación de código
- Creación de una herramienta de linting sencilla