javascript - Error TS2339: Property 'default' does not exist on type 'Special[]'

Question

I am writing an app in Angular. I am using json file, by getting data from it in the ts file:

import * as data from '../../special.json';
export class SpecialComponent {
  specials = (data as any).default;
}

And everything is fine. But when I want to add type instead of any:

import * as data from '../../special.json';
export class SpecialComponent {
  specials = (data as Special[]).default;
}

I get an error:

error TS2339: Property 'default' does not exist on type 'Special[]'.

This is my interface on service:

export interface Special {
  category: string;
  name: string;
  description: string;
  type?: string;
  imageUrl?: string;
}

This is my json file:

[
    {
        "category": "xxx",
        "name": "xxx",
        "description": "xxx",
        "type": "xxx",
        "imageUrl": [
            "assets/img/img.jpg",
            "assets/img/img1.jpg"
        ]
    }
]

Answer 1

The error is correct, because there is no default on Special[].

One easy way to do what you are trying to do is:

Put resolveJsonModule and esModuleInterop in tsconfig.json file of project.

"compilerOptions": {
  "resolveJsonModule": true,
  "esModuleInterop": true,
  ....
}

and then import:

import {default as data} from '../../special.json';
export class SpecialComponent {
  specials = data as Special[];
}