Home > Blockchain >  TypeScript Importing JSON, are their any hidden drawbacks to importing JSON this way
TypeScript Importing JSON, are their any hidden drawbacks to importing JSON this way

Time:02-14

What is the Reason for Adding "resolveJsonModule" to the tsconfig.json Configuration file?


I am currently writing a Node.js Module in TypeScript. I am at a point where I need to parse a JSON file, however; I quickly found, that by default, TypeScript is unable to import a json file using the same method Node.js does with an import (or require) statement.


As a response to the conundrum, I referenced these two sources:

  1. Stack Overflow Question
  2. Hackernoon.com Article
I found that the following configuration will add support for reading a JSON file into my code using the TS/ESM import syntax.
{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true  
  }
}


Why Add "resolveJsonModule" to the tsconfig.json document?

Neither the question or the article mentions why there's a need to have a setting ("resolveJsonModule") to add/remove support for the importing of JSON files via the import keyword and require(...) method. Furthermore, I was unable to conclude why the setting "resolveJsonModule" isn't turned on by default, I don't understand why every project requires me to set "resolveJsonModule" to true.



Reason for Concern

The reason I am asking, is because I am concerned that there may be a drawback to using import/require(...) for importing a JSON file that I am unaware of. I don't know if their is, but I doubt that they added a setting for turning the feature on, and off, just for fun, obviously, programming doesn't work that way.



To put this into question form:

What is the reason for adding the setting "resolveJsonModule" to the tsconfig.json file, why doesn't TypeScript just support the importing of JSON files, via the import keyword, without having a setting for turning it on. Is their a drawback for using "resolveJsonModule"?


CodePudding user response:

Context

Historically, Node has included a specialized JSON loader (unrelated to ECMA standards) to allow importing JSON data only in CommonJS mode.

Standardized importing of anything at all (ES modules) is only a relatively recent phenomenon in ECMAScript. Importing text files containing valid JSON, parsed as native JS data ("importing JSON") is described in a proposal that is still only in stage 3.

However, there has been recent movement in regard to implementation of the above mentioned proposal:


TypeScript

TypeScript is a static type-checker, but also a compiler (technically a transpiler), and transforms your TS source code syntax into a syntax that is valid JavaScript for the runtime environment you have specified in your TSConfig. Because there are different runtime environments with different capabilities, the way that you configure the compiler affects the transformed JavaScript that is emitted. In regard to defaults, the compiler uses an algorithmic logic to determine settings. (I can't summarize that here: you honestly have to read the entire reference in order to understand it.) Because loading of JSON data has been a non-standard, specialized operation until extremely recently, it has not been a default.


Alternatives

All JS runtimes offer alternatives to an import statment for importing of textual JSON data (which can then be parsed using JSON.parse), and none of them require configuring the compiler in the ways that you asked about:

Note: the data parsed from the JSON strings imported using these methods will not participate in the "automatic" type inference capabilities of the compiler module graph because they aren't part of the compilation graph: so they'll be typed as any (or possibly unknown in an extremely strict configuration).

Additionally, because all JSON (JavaScript Object Notation) is valid JS, you can simply prepend the data in your JSON file with export default , and then save the file as data.js instead of data.json, and then import it as a standard module: import {default as data} from './data.js';.


Final notes about inferred types:

I prefer to audit the JSON I'm importing and use my own manually-written types (written either by myself or someone else: imported from a module/declaration file) for the data, rather than relying on the compiler's inferred types from import statements (which I have found to be too narrow on many occasions), by assigning the parsed JSON data to a new variable using a type assertion.

  • Related