终端中出现“属性不存在”错误，但 Chrome 控制台中没有 - Nuxt/Prismic答案

【问题标题】：'Property does not exist' errors in terminal but not Chrome console - Nuxt/Prismic终端中出现“属性不存在”错误，但 Chrome 控制台中没有 - Nuxt/Prismic
【发布时间】：2021-04-05 08:07:57
【问题描述】：

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

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

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

组件/Sidebar.vue:35:20 TS2339 中的错误：属性 '$prismic' 确实 '{ fetch(): Promise; 类型上不存在}'。 33 |常量 = 这个； 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 中的错误：属性 'sections' 确实 '{ 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 中的错误：属性 '{ name: string; 类型上不存在'section'道具：{部分：{ 类型：对象构造器；必需：布尔值； }; 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' 或其对应的类型声明。

【问题讨论】：

标签： javascript typescript vue.js nuxt.js prismic.io

【解决方案1】：

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

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

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

【讨论】：