background

Taking advantage of the heat wave of VUe3, I tried to build a project framework with vue3+ TS + Vite2. However, when I imported files such as.vue/.ts/.js, I always got an error saying that I could not find relevant modules or declaration files. Copy error information again and again, online search, TS official website, or technical website to look through, there is no a good solution to the induction, so I come to where the induction

Take a look at these haunting screenshots

Although the error did not affect the operation of the whole project, but as a rigorous program yuan, of course, can not bear to see these red waves in their own project through the streets, so I insisted on finding a solution, finally let me find a solution.

Knock on the blackboard and get to the point

1. Lack of relevant declaration documents

In the ts project, the.ts file cannot recognize the.vue file, and the.vue file cannot recognize the.ts file. In this case, the.d.ts file is needed to fill the hole.

Start with Figure 1: the module “./ app.vue “or its corresponding type declaration could not be found

The easiest solution to be found on the Internet is the problem in Figure 1. There are generally two solutions:

Solution a:

declare module '*.vue' {
  import { defineComponent } from 'vue'
  const Component: ReturnType<typeof defineComponent>
  export default Component
}
Copy the code

Scheme 2:

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
Copy the code

A SAO operation down, only plan 1 is suitable for VUE3 + TS + VITE2 collocation project. For scheme 2, although the path of importing the. Vue file does not report an error, the imported component will report an error with the type declaration problem when it is used, as shown in the figure:Vue (createApp) {Vue (createApp) {Vue (createApp) {Vue (createApp) {Vue (createApp) {Vue (createApp);According to the grapevine, plan 2 is applicable to THE VUE2 project. I didn't check whether it is.

I have a couple of pictures left

'An import path cannot end with a '.ts' extension'

'Cannot find module 'http/api/index' or its corresponding type declarations'

The module "HTTP/jSRsasign.js" or its corresponding type declaration could not be found

These files are custom.ts/.js files, so you need to write the related.d.ts declaration file

declare module 'http/index.ts';
declare module 'router/index.ts';
declare module 'http/api/index.ts';
Copy the code

If you don’t want to declare each.ts file, you can declare the global ts file as follows:

declare module '*.ts'
Copy the code

2, related declaration file file reference path suffix unified:

Whether a file referenced in a. Vue file is suffixed is directly related to whether a. Ts file is suffixed.

‘An import path cannot end with a ‘. Ts’ extension’

// shim.d.ts
declare module 'http/index';

/ /. Vue file
import axios from 'http/index.ts'
Copy the code

‘Cannot find module ‘HTTP/API /index’ or its corresponding type declarations’

// shim.d.ts
declare module 'http/index.ts';

/ /. Vue file
import axios from 'http/index'
Copy the code

3. The project configuration file must be well handled

Ts declaration file is written, not all is well, I just stepped on such a pit: the declaration file is confirmed without error, the report is still haunting. After digging, I found that the problem was that the.d.ts file was placed in a different path from the tsconfig.json file containing the includes matching list, so the.d.ts file did not take effect