解释并解决 Cannot find module ‘@/xxx.ts‘ or its corresponding type declarations.

理解报错：

在 import 语句中，尝试使用别名路径导入某个 ts 文件

Error1

可能原因：

集成开发环境IDE不清楚你使用了别名路径，你无法通过 ctrl+左键 定位到相关文件

解决方法：

在 vite.config.ts 中的 resolve 配置项添加别名配置
配置参考如下

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
  },
  base: "./",
  // ✨ 重要
  resolve: {
    alias: [
      {
        find: "@",
        // import { resolve } from "path"
        replacement: resolve(__dirname, "./src"), 
      },
    ],
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
  },
});

说明：

在 import 语句中寻找所有的 @ 符号并替换为当前项目目录的绝对路径下的 src 目录

Error2

可能原因：

typescript 不能识别你引入文件的类型，你可以通过 ctrl+左键 定位到相关文件，也就是问题为 its corresponding type declarations 出错

解决方法：

在 tsconfig.json 中的 compilerOptions 进行配置
参考配置如下

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "baseUrl": "./",
    // ✨ 重要
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

说明：

vite 知道你引用了一个文件，但 ts 需要知道你引用出来的方法或者变量的类型才能为你做类型提示

Error3

可能原因：

在 tsconfig.json 中进行了 references 配置

解决方法：

将原来的 ts 配置在 reference 的 ts 配置中再次配置一遍
参考如下
tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "types": ["vue/ref-macros", "vue/runtime-dom"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

tsconfig.app.json

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}