TypeScript环境下如何正确导入Vuex store解决类型报错

报错现象 #

在TS项目中导入.js后缀的Vuex store文件时，触发类型报错：

Could not find a declaration file for module '@/store'. '/home/saurav/Website/src/store/index.js' implicitly has an 'any' type.

现有项目结构 #

• main.ts
• store/
  • index.js

问题相关代码 #

store/index.js #

// store/index.js
 
import Vue from "vue";
import { createStore} from "vuex";

const store = createStore<state>({
    state: {
        isOpen: false,
    },
    mutations: {
        toggleSidebar() {
            isOpen = !isOpen;
        }
    }
});

export default store;

main.ts #

// main.ts file
import { createApp } from 'vue'
import App from './App.vue'
import store from '@/store'

const app = createApp(App)
app.mount("#app")
app.use(store);

可行解决方法 #

方法1：全局开启JS文件兼容（改动最小，无需修改原有JS业务代码） #

直接修改项目根目录的tsconfig.json，在compilerOptions中开启JS文件支持：

{
  "compilerOptions": {
    // 保留原有其他配置不变
    "allowJs": true,
    "checkJs": false
  }
}

配置说明：

• allowJs: true：允许TS项目直接导入.js后缀的文件
• checkJs: false：不对JS文件做严格TS类型校验，避免原有JS代码触发类型报错
  如果自定义过tsconfig.json的include字段，需要确保store目录下的.js文件被包含在编译范围内，默认配置"include": ["src/**/*"]无需额外调整。
  配置完成后重启TS服务（VSCode可通过快捷键Ctrl+Shift+P调出命令面板，执行TypeScript: Restart TS Server）即可消除导入报错。

方法2：单独给JS模块补类型声明（适合不想全局开启allowJs的场景） #

如果不想全局放开JS文件导入权限，可以在store目录下新建index.d.ts类型声明文件，为当前store模块单独补类型定义：

import { createStore } from 'vuex'
declare const store: ReturnType<typeof createStore<{
  isOpen: boolean
}>>
export default store

TS会自动识别同目录下同名的.d.ts文件作为对应.js模块的类型声明，不需要额外配置即可消除报错，同时还能保留store的类型提示。 #

必须修正的原有代码问题 #

现有代码存在几个会直接导致运行时错误的写法，无论选哪种配置方案都需要调整：

1. JS文件不支持TS泛型语法：createStore<state>里的<state>是TS专属的泛型写法，在JS环境运行会触发语法错误，直接删除即可。另外代码里多余的import Vue from "vue"在Vue3项目里不需要，也可以删掉。
2. Mutation写法错误：toggleSidebar没有接收state参数，直接访问isOpen会报变量未定义，需要把state作为第一个参数传入，再修改state上的属性。
3. 插件注册顺序错误：Vue3需要先调用app.use(store)注册插件，再执行app.mount("#app")挂载应用，否则组件内部无法拿到store实例。
   修正后的完整代码：

修正后store/index.js #

// store/index.js
import { createStore } from "vuex";

const store = createStore({
    state: {
        isOpen: false,
    },
    mutations: {
        toggleSidebar(state) {
            state.isOpen = !state.isOpen;
        }
    }
});

export default store;

修正后main.ts #

// main.ts file
import { createApp } from 'vue'
import App from './App.vue'
import store from '@/store'

const app = createApp(App)
app.use(store)
app.mount("#app")

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