在TypeScript中无法访问vue-cookies的问题求助

问题根源 #

在Vue3+TypeScript环境下，vue-cookies默认没有添加到Vue组件实例的类型声明中，所以TS会抛出Property '$cookies' does not exist on type 'CreateComponentPublicInstance<{}>'（属性'$cookies'不存在于类型'CreateComponentPublicInstance<{}>'上）的错误。

解决步骤 #

1. 确保使用Vue3兼容版本的vue-cookies
   如果当前安装的是适配Vue2的旧版本，先升级到Vue3兼容版：

npm install vue-cookies@next --save
# 或使用yarn
yarn add vue-cookies@next

2. 添加类型声明文件
   在项目src目录下创建vue-cookies.d.ts文件，写入以下内容：

import VueCookies from 'vue-cookies';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $cookies: typeof VueCookies;
  }
}

declare global {
  interface Window {
    $cookies: typeof VueCookies;
  }
}

3. 修正组件中的用法
   你原代码存在语法错误（多了一个右括号），且Vue3不再支持Vue.cookie这种全局访问方式，正确写法如下：

export default defineComponent({
  // ...其他配置项
  methods:{
    likePokemon(name: string){
      // 设置cookie
      this.$cookies.set("username", "test");
      // 获取cookie
      const username = this.$cookies.get("username");
      // 也可通过window访问
      // const token = window.$cookies.get('access_token');
    },
    // ...其他方法
  }
})

4. 检查tsconfig配置（可选）
   确保tsconfig.json的include字段包含了新增的声明文件：

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

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