I am currently working on a .net core project where all client-side scripts are written in TypeScript. I have a desire to incorporate Vue.js into the TypeScript codebase. Below are snippets of the necessary configurations:
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"target": "es5",
"outDir": "wwwroot/js",
"moduleResolution": "node",
"module": "es2015",
"typeRoots": [
"node_modules/@types"
]
},
"compileOnSave": true,
"include": [
"TypeScripts"
]
}
In my package.json file, Vue is included as a DevelopmentDependency.
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"@types/bootstrap": "3.3.36",
"@types/jquery": "3.3.22",
...
}
}
While most of my dev dependencies do not require an import statement at the top of TypeScript files due to compilation and bundling, Vue.js behaves differently. In order to utilize Vue.js within TypeScript, adding the import Vue from 'vue' statement is essential. However, this leads to TypeScript compiler errors and runtime exceptions, such as:
Uncaught SyntaxError: Unexpected identifier (as shown here).
The relevant part of my TypeScript file is showcased below:
import Vue from 'vue';
class Exam {
addExamVueApp : Vue;
init() {
this.initVue();
this.initCategoryTree();
}
private initVue() {
this.addExamVueApp = new Vue({
el: '#addExamVueAppRoot',
data: {
page: 1,
...
Upon further testing, it seems that if there was a way to instruct TypeScript not to include import statements in the generated JavaScript file, the errors would disappear. Removing imports from the JS file resulted in the application functioning without any exceptions.