如何使用对象解构在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模块。如果您对磁盘上找到的所有declare module '*.json'文件进行json操作，则可以输入完整的文件。