Use json Data in a typescript project

Let's say that you have some json data that you would like to leverage in your project, could be something like config files. well you can import the module like so

    import('@/mockData/fingerRational.json')

      .then(module => this.fingerRational = (module.default as unknown) as IFingerRational[]);

However you will get an error saying something like

Module '@/mockData/fingerRational.json' was resolved to 'd:/dev/eDoc_Panels_Frontend/trunk/src/mockData/fingerRational.json', but '--resolveJsonModule' is not used.ts(7042)

the solution is simple you have to modify your tsconfig.json file

{

  "compilerOptions": {

    "target": "esnext",

    "module": "esnext",

    "strict": true,

    "jsx": "preserve",

    "importHelpers": true,

    "resolveJsonModule": true, //<----- added for mock data

    "moduleResolution": "node",

    "experimentalDecorators": true,

    "skipLibCheck": true,

    "esModuleInterop": true,

    "allowSyntheticDefaultImports": true,

    "sourceMap": true,

    "baseUrl": ".",

    "types": [

      "webpack-env",

      "jest",

      "webpack",

      "w3c-image-capture"

    ],

    "paths": {

      "@/*": [

        "src/*"

      ]

    },

    "lib": [

      "esnext",

      "dom",

      "dom.iterable",

      "scripthost"

    ]

  },

  "include": [

    "src/**/*.ts",

    "src/**/*.tsx",

    "src/**/*.vue",

    "tests/**/*.ts",

    "tests/**/*.tsx"

  ],

  "exclude": [

    "node_modules"

  ]

}

and voilia all should be well

Typescript IInterface

If you come from c# or Java you are most likely use to a certain naming convention and that is putting a capital I in front of your interface definitions. However now that you are working on a front end project, and using typescript you most likely have come across the following error 

eslint Interface name must not be prefixed with "I"

now this is a bit of a pain in the ass, the easiest thing to do would be to change your ways and not put the I there maybe name your interfaces something like "personInterface" but no, you are one stubborn fuck.

well I have good news for you the eslint rule is basically a convention, most likely implemented to piss off backend developers I assume this because i can not think of any other reason it exists. Thankfully the rule is very simple to deactivate, somewhere in your project, most like at the root there is a eslintrc.js file, open it and add the following 

'@typescript-eslint/interface-name-prefix': 'off'

With that slight modification you can feel free to use I as prefix for your interfaces to your hearts content.