Currently, I am in the process of migrating JS files to Typescript with the objective of being able to utilize both JS and Typescript classes within Vue. While I understand that I can convert Vue scripts into Typescript, I prefer not to do so at this moment.
The issue arises within a file named component.vue:
this.exceptionHandler = app.resolve('ExceptionHandler');
Upon checking the browser's console, I encounter this error message (the compilation is successful):
"TypeError: Cannot call a class as a function"
The definition of ExceptionHandler exists in a TypeScript file with the extension .ts.
Hence, my question is: Is there a way to first transpile the TS code to JS ES6, then merge the code, and finally use Babel to compile it all to ES5?
Within the TS configuration, I have specified these options:
"lib": ["es7", "es6", "es5", "dom"],
"types": ["reflect-metadata"],
"module": "commonjs",
"target": "es6",
Moreover, in the Webpack 4 configuration:
{
test: /\.ts(x?)$/,
loader: 'babel-loader?presets[]=es2015!ts-loader',
exclude: [
"node_modules",
"vendor",
"app",
"public"
]
},
When using just ts-loader, the code functions correctly, however, the compiled JS code version turns out to be ES6 rather than ES5.