Vue3 + TS项目中 '$session'属性类型报错的解决方法

2023-11-02 01:24:58

Vue3 + TypeScript项目中 '$session'属性类型报错的全面解决方案

在Vue3 + TypeScript项目中使用app.config.globalProperties.$session = sessionStorage封装全局的$session时，可能会遇到"Property $session does not exist on type"的报错。这是因为TypeScript需要明确知道$session属性的类型，而这种动态添加的属性无法被自动推断。要解决此问题，需要创建一个声明文件来定义$session的类型。

步骤详解

1. 创建xxx.d.ts文件

在src文件夹下创建一个名为xxx.d.ts的文件，文件名的选择可以与项目相关。

2. 添加声明

在xxx.d.ts文件中添加以下声明：

declare global {
  interface Window {
    $session: Storage;
  }
}

3. 导入xxx.d.ts文件

在main.ts文件中导入xxx.d.ts文件：

/// <reference path="./xxx.d.ts" />

4. 重新编译项目

运行tsc命令重新编译项目，报错信息将消失。

代码示例

为了更清晰地了解解决方案，提供以下代码示例：

// xxx.d.ts
declare global {
  interface Window {
    $session: Storage;
  }
}

// main.ts
/// <reference path="./xxx.d.ts" />
import { createApp } from 'vue';
import { defineComponent } from 'vue';

const app = createApp({
  // ... 其他配置
  components: {
    MyComponent: defineComponent({
      setup() {
        // 现在可以访问 $session 了
        console.log($session);
      },
    }),
  },
});

// 使用 app.config.globalProperties 动态添加 $session
app.config.globalProperties.$session = sessionStorage;

app.mount('#app');