方法不是 attached/detected 作为 TypeScript 编译的一部分

Question

抱歉，这个问题会有点含糊，主要是因为老实说我不知道下一步该去哪里。我按照这里的教程 (https://auth0.com/blog/how-to-make-secure-http-requests-with-vue-and-express/) 进行操作，直到最后一个条目为止一切正常。现在，我收到了这些错误：

ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(44,10):
44:10 Property 'getEventData' does not exist on type '{ name: string; data(): { event: {}; }; created(): void; methods: { getEventData(): Promise<void>; }; }'.
    42 |   },
    43 |   created() {
  > 44 |     this.getEventData(); // NEW - call getEventData() when the instance is created
       |          ^
    45 |   },
    46 | methods: {
    47 |   async getEventData() {
ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(49,36):
49:36 Property '$auth' does not exist on type '{ getEventData(): Promise<void>; }'.
    47 |   async getEventData() {
    48 |     // Get the access token from the auth wrapper
  > 49 |     const accessToken = await this.$auth.getTokenSilently()
       |                                    ^
    50 | 
    51 |     // Use the eventService to call the getEventSingle method
    52 |     EventService.getEventSingle(this.$route.params.id, accessToken)
ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(52,38):
52:38 Property '$route' does not exist on type '{ getEventData(): Promise<void>; }'.
    50 | 
    51 |     // Use the eventService to call the getEventSingle method
  > 52 |     EventService.getEventSingle(this.$route.params.id, accessToken)
       |                                      ^
    53 |     .then(
    54 |       (event => {
    55 |         this.$set(this, "event", event);
ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(55,14):
55:14 Property '$set' does not exist on type '{ getEventData(): Promise<void>; }'.
    53 |     .then(
    54 |       (event => {
  > 55 |         this.$set(this, "event", event);
       |              ^
    56 |       }).bind(this)
    57 |     );
    58 |   }

这是我的 tsconfig.json:

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

我不太熟悉 TypeScript、Javascript 等，我一直在寻找各种方法来解决这个问题 - https://blog.risingstack.com/auth0-vue-typescript-quickstart-docs/ and https://auth0.com/docs/quickstart/spa/vuejs/01-login.

我的 GUESS 是 Vue 对象原型未使用 Auth0 插件进行扩展，这是自编写本教程以来框架发生变化的方式。有什么建议么？如果有帮助，很乐意粘贴更多信息。

谢谢！

非常感谢tony19！这解决了四个错误中的三个 - 新代码如下所示：

import EventService from '../services/EventService.js';
import Vue from 'vue';
          
export default Vue.extend({
  name: 'EventSingle',
  data() {
    // NEW - initialize the event object
    return {
      event: {}
    }
  },
  created() {
    this.getEventData(); // NEW - call getEventData() when the instance is created
  },
  methods: {
    async getEventData() {
      // Get the access token from the auth wrapper
      const accessToken = await this.$auth.getTokenSilently()

      // Use the eventService to call the getEventSingle method
      EventService.getEventSingle(this.$route.params.id, accessToken)
      .then(
        (event => {
          this.$set(this, "event", event);
        }).bind(this)
      );
    }
  }
});

唯一剩下的错误现在在这里：

ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(51,38):
51:38 Property '$auth' does not exist on type 'CombinedVueInstance<Vue, { event: {}; }, { getEventData(): Promise<void>; }, unknown, Readonly<Record<never, any>>>'.
    49 |     async getEventData() {
    50 |       // Get the access token from the auth wrapper
  > 51 |       const accessToken = await this.$auth.getTokenSilently()
       |                                      ^
    52 | 
    53 |       // Use the eventService to call the getEventSingle method
    54 |       EventService.getEventSingle(this.$route.params.id, accessToken)

Answer 1

要在组件声明上启用 type inference in the single file component, use Vue.extend()：

// EventSingle.vue (Vue 2)
import Vue from 'vue';
                    
export default Vue.extend({
  created() {
    this.getEventData(); //  type inference now enabled
  }
})

在 Vue 3 中，使用 defineComponent() 代替：

// EventSingle.vue (Vue 3)
import{ defineComponent } from 'vue';
                    
export default defineComponent({
  created() {
    this.getEventData(); //  type inference now enabled
  }
})

到declare the types for $auth on the Vue instance, create a .d.ts file in src/ with the following contents (and if using VS Code, restart IDE to properly index the file). The $auth property from the plugin only uses a subset of the Auth0Client interface，所以我们在类型扩充中暴露相同的接口子集：

// src/auth0.d.ts
import type Vue from 'vue'
import type { Auth0Client } from '@auth0/auth0-spa-js'

declare module 'vue/types/vue' {
  interface Vue {
    $auth: Pick<Auth0Client,
      | 'loginWithPopup'
      | 'handleRedirectCallback'
      | 'loginWithRedirect'
      | 'getIdTokenClaims'
      | 'getTokenSilently'
      | 'getTokenWithPopup'
      | 'logout'
    >
  }
}

export {}

Answer 2

第一个错误报告清楚地告诉您 getEventData 在 this 上不存在。此外，根据您所遵循的指南，this.getEventData 是为了调用 this.methods.getEventData，因此出现了问题。我认为您所遵循的指南中存在一些错误。

关于其他的错误，tony19回答了。

方法不是 attached/detected 作为 TypeScript 编译的一部分

Methods not being attached/detected as part of TypeScript compilation

javascript

typescript

vue.js

vuejs2