Как импортировать JSON в TypeScript с деструктуризацией объекта?

Question

В проекте Vue я пытаюсь импортировать модуль JSON с деструктуризацией объекта в TypeScript (файл .vue):

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.

Вы можете использовать опцию "resolveJsonModule": true в tsconfig, чтобы сообщить компиляторуВы хотите, чтобы это разрешило модули json.Если вы сделаете это declare module '*.json' для всех json файлов, найденных на диске, и вы сможете импортировать их с полным набором.