vue.js - Vue 3 + TypeScript 自定义插件在类型 'ComponentPublicInstance' 上不存在

我们正在编写一个自定义插件，并希望在我们的 Vue.JS 3 应用程序中使用它。

我们按照文档建议的方式添加了插件，并且在项目的 src/ 目录中创建了一个 .d.ts 文件。

然而，当我们想运行应用程序，并且想在 App.vue 中调用插件时，会出现以下错误：

TS2339: Property '$casbin' does not exist on type 'ComponentPublicInstance<{}, { permissionsResult: Ref<any>; }, { menuItems: never[]; user: { name: string; imageHash: string; }; }, {}, { getMenuItems(): any; }, EmitsOptions, {}, {}, false, ComponentOptionsBase<...>>'.

我们的插件文件：

import { Authorizer } from 'casbin.js';
import type { App } from 'vue';

export const authorizer = new Authorizer('manual');

export default {
  install(app: App): void {
    // eslint-disable-next-line no-param-reassign
    app.config.globalProperties.$casbin = authorizer;
  },
};

我们的 shims-plugins.d.ts 文件：

import { ComponentCustomProperties } from 'vue';
import Store from './store';
import { authorizer } from './plugins/casbin';

declare module '@vue/runtime-core' {
  // eslint-disable-next-line no-shadow
  interface ComponentCustomProperties {
    $casbin: typeof authorizer;
    $store: typeof Store;
  }
}

tsconfig.json

  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}```


package.json

```{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@types/node": "^15.0.1",
    "@types/qrcode": "^1.4.0",
    "@vue/apollo-composable": "^4.0.0-alpha.12",
    "apollo-boost": "^0.4.9",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link-http": "^1.5.17",
    "axios": "^0.21.1",
    "casbin.js": "^0.3.2",
    "core-js": "^3.6.5",
    "graphql": "^15.5.0",
    "graphql-tag": "^2.11.0",
    "qrcode": "^1.4.4",
    "regenerator-runtime": "^0.13.7",
    "vue": "^3.0.0",
    "vue-apollo": "^3.0.7",
    "vue-authz": "^0.0.1",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^4.22.0",
    "@typescript-eslint/parser": "^4.22.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-airbnb": "^5.0.2",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-vue": "^7.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5",
    "vue-jest": "^5.0.0-0",
    "prettier": "^2.1.2",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.4"
  }
}