终端中的“属性不存在”错误而不是 Chrome 控制台

问题描述

我正在使用 Nuxt 和 Prismic 创建一个产品目录网站。我目前正在从 Prismic 获取导航部分（产品类别）以显示在侧边栏中。

一切似乎都运行良好（内容按预期加载和显示），但是我在运行 npm run dev 的终端窗口中看到以下错误：

组件/Sidebar.vue 中的错误错误：29:14
14:35:49 TS2339：类型 '{ data(): { 上不存在属性 'fetch' 标题：字符串；部分：从不[]; };创建（）：无效；方法： { fetch(): 承诺； }; }'。 27 | },28 |创建（）{ 29 | this.fetch() | ^^^^^ 30 | },31 |方法： { 32 |异步获取（）{

组件/Sidebar.vue 中的错误：35:20 TS2339：属性“$prismic”确实如此类型不存在 '{ fetch(): Promise; }'。 33 | const 那 = 这个; 34 | // Todo : 将 Prismic 调用移动到 actions.ts - this.$store.dispatch('fetchSections') 35 |等待这个。$prismic.api | ^^^^^^^^^ 36 | .getByUID('导航','类别') 37 | .then（功能（文档）{ 38 | console.log(文档)

组件/Sidebar.vue 中的错误：37:24 TS7006：参数“文档” 隐式具有“任何”类型。 35 |等待这个。$prismic.api 36 | .getByUID('导航','类别') 37 | .then（功能（文档）{ | ^^^^^^^^^ 38 |控制台日志（文档） 39 | that.heading = document.data.doc_name[0].text 40 | that.sections = document.data.nav

组件/Sidebar.vue 中的错误：39:18 TS2339：属性“标题”确实如此类型不存在 '{ fetch(): Promise; }'。 37 | .then（功能（文档）{ 38 |控制台日志（文档） 39 | that.heading = document.data.doc_name[0].text | ^^^^^^^^ 40 | that.sections = document.data.nav 41 | }) 42 | }

组件/Sidebar.vue 中的错误：40:18 TS2339：属性“部分”确实如此类型不存在 '{ fetch(): Promise; }'。 38 |控制台日志（文档） 39 | that.heading = document.data.doc_name[0].text 40 | that.sections = document.data.nav | ^^^^^^^^^ 41 | }) 42 | } 43 | }

组件/SidebarSection.vue 中的错误：43:26 TS2339：属性 'section' 不存在于类型 '{ name: string;道具：{ 部分：{ 类型：ObjectConstructor；必需：布尔值； }; isCollapsed：{ 类型：布尔构造函数； }; };安装（）：无效； }'。 41 | },42 |安装（）{ 43 | console.log(this.section.items[0].sub_nav_link_label[0].text) | ^^^^^^^^ 44 | } 45 | } 46 |

尽管事实上我在 Chrome 控制台输出中没有看到任何错误。

这是 export default 中的 Sidebar.vue：

export default {
    data() {
        return {
            heading: "",sections: []
        }
    },created() {
        this.fetch()
    },methods: {
        async fetch() {
            const that = this;
            // Todo : Move Prismic call to actions.ts - this.$store.dispatch('fetchSections')
            await this.$prismic.api
            .getByUID('navigation','categories')
            .then(function(document) {
                console.log(document)
                that.heading = document.data.doc_name[0].text
                that.sections = document.data.nav
            })
        }
    }
}

我能想到的唯一潜在问题是我使用以下声明文件来提供有关 Prismic API 的打字稿类型信息：https://github.com/prismicio/prismic-vue/issues/5#issuecomment-723652806

也许我的链接方式有问题？它位于 types 文件夹中，我在其中引用了它：

"files": [
  "prismic.d.ts"
]

在 tsconfig.json 中。

大家有什么建议吗？

编辑：

我只是尝试从 VSCode 中运行 npm run dev 而不是单独的终端窗口，现在我在整个项目中看到错误，每当我尝试使用 Prismic 类型时。这个可能最能说明问题：

import { PrismicAPI } from '~/types/prismic'

找不到模块 '~/types/prismic' 或其对应的类型声明。

解决方法

这个问题似乎与方式有关，prismic.d.ts 包含在tsconfig.json 中。您可以尝试在 include 中使用 files 选项而不是 tsconfig.json，并在那里使用 prismic.d.ts 的绝对路径吗？喜欢：

{
  "include": ["types/prismic.d.ts"]
}

参考：https://www.typescriptlang.org/tsconfig#include

javascript nuxt.js prismic.io typescript typescript vue.js

终端中的“属性不存在”错误而不是 Chrome 控制台 - Nuxt/Prismic

问题描述

解决方法