Importing json file in TypeScript

Question

I have a JSON file that looks like following          primaryBright        2DC6FB      primaryMain          05B4F0      primaryDarker        04A1D7      primaryDarkest       048FBE       secondaryBright      4CD2C0      secondaryMain        00BFA5      secondaryDarker      009884      secondaryDarkest     007F6E       tertiaryMain         FA555A      tertiaryDarker       F93C42      tertiaryDarkest      F9232A       darkGrey             333333      lightGrey            777777      I m trying to import it into a  tsx file  For this I added this to the type definition   declare module    json      const value  any    export default value      And I m importing it like this    import colors   require     colors json     And in the file  I use the color primaryMain as colors primaryMain  However I get an error      Property  primaryMain  does not exist on type  typeof    json

User · Answer

With TypeScript 2 9   you can simply import JSON files with typesafety and intellisense like this   import colorsJson from     colors json      This import style requires  esModuleInterop   see  side notes  console log colorsJson primaryBright     Make sure to add these settings in the compilerOptions section of your tsconfig json  documentation     resolveJsonModule   true   esModuleInterop   true    Side notes    Typescript 2 9 0 has a bug with this JSON feature  it was fixed with 2 9 2 The esModuleInterop is only necessary for the default import of the colorsJson  If you leave it set to false then you have to import it with import   as colorsJson from     colors json

User · Answer

Another way to go  const data    key  string   any    require    data json      This was you still can define json type is you want and don t have to use wildcard   For example  custom type json   interface User     firstName  string    lastName  string    birthday  Date    const user  User   require    user json

User · Answer

The import form and the module declaration need to agree about the shape of the module  about what it exports   When you write  a suboptimal practice for importing JSON since TypeScript 2 9 when targeting compatible module formatssee note   declare module    json      const value  any    export default value      You are stating that all modules that have a specifier ending in  json have a single export named default   There are several ways you can correctly consume such a module including  import a from  a json   a primaryMain   and  import   as a from  a json   a default primaryMain   and  import  default as a  from  a json   a primaryMain   and  import a   require  a json    a default primaryMain   The first form is the best and the syntactic sugar it leverages is the very reason JavaScript has default exports   However I mentioned the other forms to give you a hint about what s going wrong  Pay special attention to the last one  require gives you an object representing the module itself and not its exported bindings   So why the error  Because you wrote  import a   require  a json    a primaryMain   And yet there is no export named primaryMain declared by your    json    All of this assumes that your module loader is providing the JSON as the default export as suggested by your original declaration   Note  Since TypeScript 2 9  you can use the --resolveJsonModule compiler flag to have TypeScript analyze imported  json files and provide correct information regarding their shape obviating the need for a wildcard module declaration and validating the presence of the file  This is not supported for certain target module formats

User · Answer

It s easy to use typescript version 2 9   So you can easily import JSON files as  kentor decribed   But if you need to use older versions   You can access JSON files in more TypeScript way  First  make sure your new typings d ts location is the same as with the include property in your tsconfig json file   If you don t have an include property in your tsconfig json file  Then your folder structure should be like that   - app ts   node modules  - package json - tsconfig json - typings d ts   But if you have an include property in your tsconfig json          compilerOptions                 exclude                      node modules                spec ts          include                      src                 Then your typings d ts should be in the src directory as described in include property    node modules  - package json - tsconfig json - src      - app ts     - typings d ts   As In many of the response  You can define a global declaration for all your JSON files   declare module    json        const value  any      export default value      but I prefer a more typed version of this  For instance  let s say you have configuration file config json like that          address    127 0 0 1        port      8080     Then we can declare a specific type for it   declare module  config json        export const address  string      export const port  number      It s easy to import in your typescript files   import   as Config from  config json    export class SomeClass       public someMethod  void           console log Config address           console log Config port             But in compilation phase  you should copy JSON files to your dist folder manually  I just add a script property to my package json configuration          name       some project        scripts              build    rm -rf dist  amp  amp  tsc  amp  amp  cp src config json dist

User · Answer

In your TS Definition file  e g  typings d ts   you can add this line    declare module    json    const value  any  export default value      Then add this in your typescript  ts  file -  import   as data from    colors json   const word     lt any gt data  name

User · Answer

Enable  quot resolveJsonModule quot   true in tsconfig json file and implement as below code  it s work for me  const config   require    config json

User · Answer

Often in Node js applications a  json is needed  With TypeScript 2 9  --resolveJsonModule allows for importing  extracting types from and generating  json files   Example     x000D   x000D     tsconfig json x000D   x000D    x000D       compilerOptions     x000D           module    commonjs   x000D           resolveJsonModule   true  x000D           esModuleInterop   true x000D        x000D    x000D   x000D      ts x000D   x000D  import settings from    settings json   x000D   x000D  settings debug     true      OK x000D  settings dry     2      Error  Operator       cannot be applied boolean and number x000D   x000D   x000D     settings json x000D   x000D    x000D       repo    TypeScript   x000D       dry   false  x000D       debug   false x000D    x000D   x000D   x000D   by  https   www typescriptlang org docs handbook release-notes typescript-2-9 html

[json] Importing json file in TypeScript

Examples related to json

Examples related to typescript