Vue2 Webpack转Vite（TS/JS混编）迁移Pinia遇TS9006错误求助

问题根源 #

你的JS文件（Login.vue）调用Pinia store中定义的login方法时，该方法的参数依赖TS私有接口UserLoginRequestI，而JS文件无法识别TS接口类型，导致TypeScript触发TS9006错误，要求显式类型注解。

具体解决方案 #

方案1：导出TS接口并在JS中用JSDoc标注类型（推荐，保留类型安全）

第一步，在store.ts中导出UserLoginRequestI接口：

import { defineStore } from 'pinia'

// 导出接口，让JS文件可以引用
export interface UserLoginRequestI {
  username: string
  password: string
}

export const useUserStore = defineStore('user', {
  actions: {
    async login(params: UserLoginRequestI) {
      // 登录逻辑实现
    }
  }
})

第二步，在Login.vue的JS代码中，通过JSDoc给调用参数添加类型注解：

import { mapActions } from 'pinia'
import { useUserStore, UserLoginRequestI } from '@/stores/user'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    ...mapActions(useUserStore, ['login']),
    /**
     * @param {UserLoginRequestI} params 登录参数
     */
    async handleLogin() {
      // 给参数添加类型断言
      await this.login(/** @type {UserLoginRequestI} */({
        username: this.username,
        password: this.password
      }))
    }
  }
}

方案2：修改store方法的参数类型为JS兼容的结构（简洁过渡）

如果不想让JS文件导入TS接口，可以直接在login方法中使用字面量类型或类型别名，让TypeScript能通过结构推导类型：

import { defineStore } from 'pinia'

// 用类型别名定义参数结构（或直接写在方法参数里）
type UserLoginRequest = {
  username: string
  password: string
}

export const useUserStore = defineStore('user', {
  actions: {
    // 也可以直接写：async login(params: { username: string; password: string })
    async login(params: UserLoginRequest) {
      // 登录逻辑实现
    }
  }
})

此时JS文件无需额外处理，TypeScript会自动识别参数结构，不会触发TS9006错误。

方案3：临时禁用TS检查（不推荐，仅应急）

如果只是临时过渡需求，可以在报错位置添加// @ts-ignore注释跳过检查：

async handleLogin() {
  // @ts-ignore: TS9006
  await this.login({ username: this.username, password: this.password })
}

注意：该方案会失去TypeScript的类型校验能力，不建议长期使用。

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