如何使用对象解构在 TypeScript 中导入 JSON？

Question

在一个 Vue 项目中，我试图在 TypeScript（.vue 文件）中导入一个带有对象解构的 JSON 模块：

import { logo } from '@src/config/branding.json'

但我在 VSCode 中收到错误：Module ''*.json'' has no exported member 'logo'.

如何通过对象解构导入 JSON 对象？

请注意，这可以正常工作：

import branding from '@src/config/branding.json' // branding.logo to get logo

我声明了 JSON 模块：

declare module '*.json' {
    const value: any
    export default value
}

branding.json：

{
  "logo": "https://apiendpointurl.com/logo.svg",
}

tsconfig 有"resolveJsonModule": true, "esModuleInterop": true

Answer 1

如果您使用declare module '*.json' 版本，您指定所有以*.json 结尾的文件都将具有默认的any 导出。

您可以使用 tsconfig 中的"resolveJsonModule": true 选项告诉编译器您希望它解析 json 模块。如果您对磁盘上找到的所有json 文件执行此操作，则declare module '*.json' 将能够以完整类型导入它们。