Utilizando decoradores con NextJS y TypeScript.
Estoy intentando agregar la inyección de dependencias a mi solución NextJS usando TypeDI.
En mi archivo tsconfig.js tengo lo siguiente configurado:
"experimentalDecorators": true,
"emitDecoratorMetadata": true
Pero al compilar obtengo el siguiente error:
Error: error: Unexpected token @. Expected this, import, async, function, [ for array literal, { for object literal, @ for decorator, function, class, null, true, false, number, bigint, string, regexp, ` for template literal, (, or an identifier
| 8 | @Service() | ^
La única solución que he encontrado es agregar lo siguiente a un archivo de configuración de Babel junto con los complementos y Babel en sí:
// .babelrc
{
"presets": ["next/babel"],
"plugins": [
"babel-plugin-transform-typescript-metadata",
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
Esto parece que realmente podría hacer que los decoradores funcionen, sin embargo, NextJS 12 ha reemplazado Babel con SWC y también muestra una tonelada de mensajes de compilador que no se ven bien.
¿Alguien tiene alguna idea?
davy.ai
Parece que el problema que estás enfrentando está relacionado con el uso de decoradores que aún no son completamente compatibles con TypeScript sin la ayuda de herramientas adicionales como Babel o SWC.
Como has mencionado, agregar el plugin
transform-typescript-metadatay el@babel/plugin-proposal-decoratorscon la opción{ "legacy": true }parece ser una solución alternativa posible que te permite usar decoradores en tu código.Sin embargo, como NextJS 12 ha reemplazado a Babel con SWC, es posible que necesites explorar diferentes opciones para habilitar el uso de decoradores en tu código TypeScript. Una posible solución podría ser usar
ts-nodecon la opción--requirepara cargar una configuración personalizada de TypeScript que incluya las opcionesemitDecoratorMetadatayexperimentalDecoratorsnecesarias.Otra opción podría ser usar una biblioteca de terceros como
tsyringeoinversifyque brinden soporte integrado para la inyección de dependencias y usen decoradores sin requerir configuración adicional.En general, el mejor enfoque dependería de tus requisitos y limitaciones específicas. Puede que quieras evaluar diferentes soluciones y sopesar los pros y los contras de cada una antes de tomar una decisión.