Promise 类型不存在属性“$auth”答案

【问题标题】：Property '$auth' does not exist on type PromisePromise 类型不存在属性“$auth”
【发布时间】：2021-02-24 20:54:45
【问题描述】：

我刚刚使用 Typescript 设置了一个新的 Nuxt.js 应用程序，但我无法解决一些似乎与 $auth 模块相关的 Typescript 错误。这是我tsconfig.json 中的“类型”设置：

"types": [
  "@types/node",
  "@nuxt/types",
  "@types/nuxtjs__auth",
  "@nuxtjs/axios",
 ]

代码如下：

      async login() {
        try {
          await this.$auth.loginWith('local', {
            data: {
              user: {
                email: this.email,
                password: this.password
              }
            }
          })

          this.$router.push('/dashboard')
        } catch (e) {
          this.error = e.response.data.message
        }
      }

这是错误：

Property '$auth' does not exist on type '{ login(): Promise<void>; }'.

我发现了一些关于将类型添加到 tsconfig.json 的 SO 帖子，我做到了，但它并没有解决这个问题。

我该如何解决这个问题？

编辑：

nuxt.config.js

require('dotenv').config()
const axiosUrl = process.env.AXIOS_BASE_URL;
const port = process.env.NODE_ENV === 'production' ? process.env.PORT : 3333;

export default {
  // Disable server-side rendering (https://go.nuxtjs.dev/ssr-mode)
  ssr: true,

  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    title: 'ollie-frontend',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [
  ],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
  ],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
    '@nuxtjs/google-fonts',
    ['@nuxt/typescript-build', {
      typeCheck: true,
      ignoreNotFoundWarnings: true,
    }],
  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth'
  ],

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
  },

  server: {
    port: port,
  },

  axios: {
    baseURL: axiosUrl
  },

  auth: {
    redirect: {
      login: '/sign_in',
      logout: '/',
    },
    strategies: {
      local: {
        endpoints: {
          login: { url: '/login', method: 'post', propertyName: 'token' },
          register: { url: '/signup', method: 'post' },
          user: { url: '/api/v1/users/me', method: 'get', propertyName: 'user' },
          logout: false
        }
      }
    }
  },

  router: {
    middleware: ['auth']
  },

  typescript: {
    typeCheck: {
      eslint: {
        files: './**/*.{ts,js,vue}'
      }
    }
  },
}

tsconfig.json：

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types",
      "@types/nuxtjs__auth",
      "@nuxtjs/axios",
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

【问题讨论】：

请在 tsconfig 中分享您的 nuxt.config.js 文件和 compilerOptions
你使用的是export default Vue.extend({ ... })还是export default { ... }？
不，nuxt.conf.js 和 tsconfig.js 文件的内容
@BoussadjraBrahim 我已将其添加到帖子中
@NinoFiliu export default { } only，不是 Vue.extend

标签： typescript vue.js nuxt.js

【解决方案1】：

您的默认导出：

export default {
  ssr: true,

  // ...

  typescript: {
    typeCheck: {
      eslint: {
        files: './**/*.{ts,js,vue}'
      }
    }
  },
};

实际上应该用Vue.extend 包裹起来，像这样：

export default Vue.extend({
  ssr: true,

  // ...

  typescript: {
    typeCheck: {
      eslint: {
        files: './**/*.{ts,js,vue}'
      }
    }
  },
});

这应该会导致 TSC 在现在使用对象时看到正确的类型。

（顺便说一句，与您显示的实际 TSC 错误相比，标题非常具有误导性）

【讨论】：