How to import JSON in TypeScript with object destructuring?

Question

In a Vue project, I am trying to import a JSON module with object destructuring in TypeScript (.vue file):

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

but I get the error in VSCode: Module ''*.json'' has no exported member 'logo'.

How do I import a JSON object with object destructuring?

Note that this works fine:

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

I have JSON modules declared:

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

branding.json:

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

tsconfig has "resolveJsonModule": true, "esModuleInterop": true

Answer 1

If you use the declare module '*.json' version you are specifying that all files ending in *.json will have a default any export.

You can use the "resolveJsonModule": true option in tsconfig to tell compiler you want it to resolve json modules. If you do this the declare module '*.json' for all json files that are found on disk and you will be able to import them with full typings.