如何使用对象解构在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文件，你将能够以完整的类型导入它们。