方法未作为 TypeScript 编译的一部分附加/检测

Posted 2023-02-16

【中文标题】方法未作为 TypeScript 编译的一部分附加/检测

【英文标题】：Methods not being attached/detected as part of TypeScript compilation

【发布时间】：2022-01-05 21:12:58

【问题描述】：

抱歉，这个问题有点含糊，主要是因为我真的不知道下一步该去哪里。我在这里遵循了本教程 (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/ 和 https://auth0.com/docs/quickstart/spa/vuejs/01-login。

我的 猜测 是 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)

【参考方案1】：

要启用type inference in the single file component，请在组件声明中使用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
  
)

到 Vue 实例上的 declare the types for $auth，在 src/ 中创建一个 .d.ts 文件，内容如下（如果使用 VS Code，请重新启动 IDE 以正确索引该文件）。 $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'
    >
  

【参考方案2】：

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

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