Using Vue.js as Development Dependency in typescript

Question

I'm working on a .net core project that all client-side scripts are written in typescript, I want to use Vue.js inside the Typescript. codes are as below:

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "target": "es5",
    "outDir": "wwwroot/js",
    "moduleResolution": "node",
    "module": "es2015",    
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "compileOnSave": true, 
  "include": [
    "TypeScripts"
  ]
}

my package.json has vue as a DevelopmentDependency.

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "@types/bootstrap": "3.3.36",
    "@types/jquery": "3.3.22",
    "@types/jquery-backstretch": "^2.0.15",
    "@types/jquery-validation-unobtrusive": "^3.2.32",
    "@types/jquery.form": "3.26.30",
    "@types/jquery.validation": "^1.16.4",
    "@types/jstree": "3.3.35",
    "@types/select2": "4.0.42",
    "@types/moment": "2.11.28",
    "vue": "2.5.22",
    "vue-ctk-date-time-picker": "2.0.0",
    "vue-datetime": "^1.0.0-beta.8"
    "del": "^3.0.0",
    "gulp": "4.0.0",
    "gulp-concat": "2.6.1",
    "gulp-cssmin": "0.2.0",
    "gulp-htmlmin": "5.0.1",
    "gulp-sass": "4.0.2",
    "gulp-uglify": "3.0.1",
    "luxon": "^1.9.0",
    "merge-stream": "1.0.1",
  }
}

for all other my dev dependencies I never needed to add an import statement to top of ts files, because I compile ts files inside my /wwwroot/js/ and then bundle them all in one file. so in runtime while I have all the scripts loaded into client's browser, there is no error and everythings works without any problem. but this is not true for vue.js I'm trying to use vuejs in typescript but if I was not add the import then there is many typescript compiler errors. and when I add the import Vue from 'vue' statement. compiler runs without error but this time I have exceptions in chrome console as below:

Uncaught SyntaxError: Unexpected identifier that show as below. .

the part of the for my ts file is also as 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,
...

EDIT: actually If I could somehow say to typescript that do not include the import statements in generated js file, there will be no error, I tested, removed imports from js file, and app work without any exception.

Answer 1

Adding vue's path to typeRoots in tsconfig.json solved the problem. for devDepndencies also I does not need to add Import statement.

"typeRoots": [      
  "node_modules/@types", "node_modules/vue"
]