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

Posted 2023-03-13

【中文标题】如何使用对象解构在 TypeScript 中导入 JSON？

【英文标题】：How to import JSON in TypeScript with object destructuring?

【发布时间】：2019-07-21 08:26:04

【问题描述】：

在一个 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

【参考方案1】：

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

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

【讨论】：

我在 tsconfig 中有"resolveJsonModule": true, "esModuleInterop": true。我开始认为这是 Vetur 扩展的问题。在 .ts 文件中对其进行测试，导入与对象解构一起工作，没有任何问题。