Vue 3、TypeScript与Pinia兼容问题：模块找不到错误

一、解决“Cannot find 'pinia'”报错 #

• 确认Pinia已安装，执行对应命令完成安装：

  # npm
  npm install pinia
  # yarn
  yarn add pinia
  # pnpm
  pnpm add pinia
  

• 在项目入口文件（如main.ts）中正确注册Pinia实例：

  import { createApp } from 'vue'
  import { createPinia } from 'pinia'
  import App from './App.vue'
  
  const app = createApp(App)
  app.use(createPinia()) // 必须挂载Pinia才能全局使用
  app.mount('#app')
  

• 若已安装注册仍报错，重启VS Code的TypeScript服务：按Ctrl+Shift+P（Windows）/Cmd+Shift+P（Mac），输入TypeScript: Restart TS Server执行。

二、解决“Cannot find Module @/stores/todoList”报错 #

• 检查文件路径：确认src/stores/todoList.ts文件存在，文件名拼写（含大小写）与导入语句完全一致（TypeScript对文件名大小写敏感）。
• 配置TypeScript路径别名：在tsconfig.json的compilerOptions中添加路径映射：

  {
    "compilerOptions": {
      "baseUrl": ".", // 根目录设为项目根路径
      "paths": {
        "@/*": ["src/*"] // 让@指向src文件夹
      },
      // 保留原有其他配置...
    }
  }
  

• Vite项目额外配置：在vite.config.ts中配置Vite识别别名：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import path from 'path'
  
  export default defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    }
  })
  

• 配置完成后，重启VS Code或TypeScript服务使配置生效。

额外优化：为Store添加TypeScript类型约束 #

为贴合TypeScript规范，建议给Store的状态和方法参数补充类型：

interface Todo {
  item: string;
  id: number;
  completed: boolean;
}

import { defineStore } from 'pinia'

export const useTodoListStore = defineStore("todoList", {
  state: () => ({
    todoList: [] as Todo[],
    id: 0
  }),
  actions: {
    addTodo(item: string) {
      this.todoList.push({ item, id: this.id++, completed: false })
    },
    deleteTodo(itemId: number) {
      this.todoList = this.todoList.filter((object) => object.id !== itemId)
    },
    toggleCompleted(idToFind: number) {
      const todo = this.todoList.find((obj) => obj.id === idToFind)
      if (todo) {
        todo.completed = !todo.completed
      }
    }
  }
})

内容的提问来源于stack exchange，提问作者Dustin