Vuestic and Typescript Integration

Question

I'm new to Vue and Vuestic, and I would like to know if it's possible to integrate Typescript into a Vuestic project. If possible, how can I accomplish it?

Created a new project with Vuestic CLI and ran it without any issues:

vuestic testproj

npm install && npm run serve

Then I tried to add Typescript to the project with Vue CLI:

vue add typescript

? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpil ing JSX)? Yes ? Convert all .js files to .ts? Yes ? Allow .js files to be compiled? Yes ? Skip type checking of all declaration files (recommended for apps)? Yes

I get hundreds of errors similar to these:

Cannot find module './App' or its corresponding type declarations.

Property 'AD' does not exist on type '{}'

Cannot find module '../components/admin/AppLayout' or its corresponding type declarations.

...

Any idea on how to add Typescript and solve these issues?

Answer 1

For the can't find module ./App its important to end imports with the proper file ending. example ./App.vue. Vue typescript projects also requires a shims-vue.d.ts file that you can put in src directory. It should contain:

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

I would not recommend using the auto convert all js files to ts files. Do that manually, this way its easier to see where errors are created.