时间戳

首页 > 解决方案 > 终端中出现“属性不存在”错误，但 Chrome 控制台中没有 - Nuxt/Prismic

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

问题描述

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

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

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

组件/Sidebar.vue:35:20 TS2339 中的错误：类型 '{ fetch(): Promise; 上不存在属性 '$prismic' }'。33 | 常量 = 这个；34 | // TODO : 将 Prismic 调用移动到 actions.ts - this.$store.dispatch('fetchSections') 35 | 等待这个。$prismic.api | ^^^^^^^^ 36 | .getByUID('导航', '类别') 37 | .then(function(document) { 38 | console.log(document)

components/Sidebar.vue:37:24 TS7006 中的错误：参数“document”隐式具有“any”类型。35 | 等待这个。$prismic.api 36 | .getByUID('导航', '类别') 37 | .then(function(document) { | ^^^^^^^^ 38 | console.log(document) 39 | that.heading = document.data.doc_name[0].text 40 | that.sections = document.data .nav

组件/Sidebar.vue:39:18 TS2339 中的错误：类型'{ fetch(): Promise; 上不存在属性'heading' }'。37 | .then(function(document) { 38 | console.log(document) 39 | that.heading = document.data.doc_name[0].text | ^^^^^^^ 40 | that.sections = document.data。导航 41 | }) 42 | }

components/Sidebar.vue:40:18 TS2339 中的错误：类型'{ fetch(): Promise; 上不存在属性'sections' }'。38 | console.log(文档) 39 | that.heading = document.data.doc_name[0].text 40 | that.sections = 文档.data.nav | ^^^^^^^^ 41 | }) 42 | 43 | }

组件/SidebarSection.vue:43:26 TS2339 中的错误：类型 '{ name: string; 上不存在属性 'section' 道具：{部分：{类型：ObjectConstructor；必需：布尔值；}; isCollapsed: { type: BooleanConstructor; }; }; 挂载（）：无效；}'。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 中。

有没有人有什么建议？

编辑：

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

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

找不到模块“~/types/prismic”或其相应的类型声明。

标签： javascripttypescriptvue.jsnuxt.jsprismic.io

解决方案

这个问题好像是用的方式，prismic.d.ts包含在tsconfig.json. 您可以尝试使用includeoption 而不是filesin tsconfig.json，并使用那里的绝对路径prismic.d.ts吗？喜欢：

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

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

推荐阅读