Adding TypeScript to an existing Vue3 app

[dan-wellman-cs]

Hello, I'm trying to migrate an existing, very large, Vue3 app from JavaScript to TypeScript. It's using Vite and the options API, and is largely .vue SFCs and .js files. I should probably mention that I am extremely new to Vue (but not TypeScript).

I scaffolded out a brand new Vue3 + TypeScript project using npm create vite@latest and then copied the tsconfig, tsconfig.app, and tsconfig.node JSON files from the brand new app to the existing app, and made sure to install what seemed like the required dependencies (@tsconfig/node20, @types/node, @vue/tsconfig, vue-tsc, and of course, typescript)

I also converted the vite.config.js file to vite.config.ts, and the entry file app.js to app.ts.

In one of my components, I changed the script to lang="ts" and the editor (VSCode) is highlighting a few things in the file, but I've not fixed those yet.

Lastly, in addition to the default config from the scaffolded tsconfig.app.json file, I also enabled allowJS and disabled strict mode.

Things largely seem to be working - I can run serve, see my app in the browser, and if I add a console log to the component that I changed to lang="ts", then I do see that log in the browser console.

But VSCode seems very unhappy! I installed the Vue-official extension, but VSCode seems to not like some of my @/... imports. The tsconfig.app.json file does have the paths config for the @ path, and weirdly, some of the imports in my component are not highlighted, but some of them are.

For example, in my component, I am importing a few .js files @/js/store and some other .js files from @/js/modules - both the store and modules folders are at the same level inside src/js and all of them are regular .js files, but all of the files being imported from the modules folder are highlighted in red, while none of the imports from the store folder are highlighted. This may be related to whether module uses regular exports or default exports, but it is not as straight-forward as "regular imports work while default exports don't work" or anything like that.

In some of cases, removing the extension from the import path does remove the highlighting, but sometimes it doesn't. It seems to be that if the import was highlighted and did have a .js extension in the import path, removing the extension removes the highlighting, but if the import was highlighted and did not have a .js extension in the import path, then adding the extension fixes it and removes the highlighting!

Additionally, there are a couple of imports which stubbornly remained highlighted with or without a .js extension in the import path - for these ones, I found that if I remove the @ from the path, and use a relative import instead, that removes the highlighting and in this case the extension does not seem to make any difference - the highlighting is gone both with or without the .js extension.

None of this seems to make much sense. Am I missing some dependency that needs to be installed? Do I need to go through the app and change every single .js file to a .ts file (we were hoping to migrate slowly, one file at a time). Will I need to update around half of the import statements in every single file in the app (there are hundreds!) Can I use @ paths or not?

For reference, here are my config files:

tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

tsconfig.app.js

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "allowJs": true,
    "strict": false,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.node.json

{
  "extends": "@tsconfig/node20/tsconfig.json",
  "include": [
    "vite.config.*",
  ],
  "compilerOptions": {
    "composite": true,
    "noEmit": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"]
  }
}