typescript - Vue 上不存在 Nuxt $route

Question

嘿嘿，

我有一个奇怪的问题。我有一个带有 Typescript 的 Nuxt 应用程序。在created钩我console.log this.$route。该日志确实有效。以及从路线中读出参数。

但是我在构建应用程序时在控制台中遇到错误：

$route类型上不存在属性SomeClass。

这是我的课：

import Vue from'vue'
import Component from 'vue-class-component'

@Component
export default class SomeClass extends Vue {
  public id!: string

  created() {
    console.log('this:', this)
    this.id = this.$route.params.id
  }
}

工作正常，console.log并用它的参数显示正确的路线。我怎样才能摆脱这个错误？

这是我的 tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/vue-app",
      "element-ui/types"
    ]
  }
}

标签： typescriptvue.jsnuxt.js

Answer 1

好的，感谢@aBiscuit，我明白了。这是 tsconfig 中缺少的类型定义。在“类型”下添加@nuxt/types。

这是我的新的和工作的 tsconfig

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/vue-app",
      "element-ui/types"
    ]
  }
}