Home > OS >  Methods not being attached/detected as part of TypeScript compilation
Methods not being attached/detected as part of TypeScript compilation

Time:11-29

Sorry, this question is going to be a bit vague, mostly because I honestly don't know where to go next. I followed this tutorial here (https://auth0.com/blog/how-to-make-secure-http-requests-with-vue-and-express/) and everything worked up to the nearly last entry. Now, I'm getting these errors:

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 |   }

Here's my 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"
  ]
}

I'm not incredibly familiar with TypeScript, Javascript, etc, and I've been poking around at various ways to solve this - https://blog.risingstack.com/auth0-vue-typescript-quickstart-docs/ and https://auth0.com/docs/quickstart/spa/vuejs/01-login.

My GUESS is that the Vue object prototype is not being extended with the Auth0 plug-in, and it's something about the way the frameworks have changed since this tutorial was written. Any suggestions? Happy to paste in more info if it helps.

Thanks!

CodePudding user response:

To enable type inference in the single file component, use Vue.extend() on the component declaration:

// EventSingle.vue (Vue 2)
import Vue from 'vue';
                               
  • Related