{"id":374,"date":"2020-09-04T12:01:13","date_gmt":"2020-09-04T10:01:13","guid":{"rendered":"http:\/\/www.myblog.nguenkam.com\/?p=374"},"modified":"2021-11-30T12:31:43","modified_gmt":"2021-11-30T11:31:43","slug":"importing-json-modules-in-typescript","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2020\/09\/04\/importing-json-modules-in-typescript\/","title":{"rendered":"Importing JSON Modules \/Files in TypeScript"},"content":{"rendered":"\n

TypeScript 2.9 introduced a new --resolveJsonModule<\/code> compiler option that lets us import JSON modules from within TypeScript modules.<\/p>\n\n\n\n

#Importing JSON Modules via require<\/code> Calls<\/h4>\n\n\n\n

Let’s assume we have a Node application written in TypeScript, and let’s say that we want to import the following JSON file:<\/p>\n\n\n\n

{\n  \"server\": {\n    \"nodePort\": 8080\n  }\n}<\/code><\/pre>\n\n\n\n
In Node, we can use a require<\/code> call to import this JSON file like any other CommonJS module:<\/p>\n\n\n\n
const config = require(\".\/config.json\");\n<\/code><\/pre>\n\n\n\n
The JSON is automatically deserialized into a plain JavaScript object. This allows us to easily access the properties of our config object:<\/p>\n\n\n\n
\"use strict\";\n\nconst express = require(\"express\");\nconst config = require(\".\/config.json\");\n\nconst app = express();\n\napp.listen(config.server.nodePort, () => {\n  console.log(`Listening on port ${config.server.nodePort} ...`);\n});\n<\/code><\/pre>\n\n\n\n
So far, so good!<\/p>\n\n\n\n
<\/div>\n\n\n\n
# Importing JSON Files via Static import<\/code> Declarations<\/h4>\n\n\n\n
Let’s now say we want to use native ECMAScript modules instead of CommonJS modules. This means we’ll have to convert our require<\/code> calls to static import<\/code> declarations:<\/p>\n\n\n\n
\/\/ We no longer need the \"use strict\" directive since\n\/\/ all ECMAScript modules implicitly use strict mode.\n\nimport * as express from \"express\";\nimport * as config from \".\/config.json\";\n\nconst app = express();\n\napp.listen(config.server.nodePort, () => {\n  console.log(`Listening on port ${config.server.nodePort} ...`);\n});<\/code><\/pre>\n\n\n\n
Now, we get a type error in line 2. TypeScript doesn’t let us import a JSON module out of the box, just like that.<\/em><\/strong><\/p>\n\n\n\n
Let’s head over to our tsconfig.json<\/em> file and enable the resolveJsonModule<\/code> option there:<\/p>\n\n\n\n
{\n  \"compilerOptions\": {\n    \"target\": \"es2015\",\n    \"module\": \"commonjs\",\n    \"strict\": true,\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true\n  }\n}\n<\/code><\/pre>\n\n\n\n
With --resolveJsonModule<\/code> enabled, we no longer get a type error in our TypeScript file. Even better, we now get type checking and autocompletion!<\/p>\n\n\n\n
And there you go! This is how to import JSON modules from within TypeScript modules, only one compiler option away.<\/em><\/strong><\/span><\/p>\n\n\n\n
<\/div>\n\n\n\n
Definition type File.<\/h3>\n\n\n\n
Since TypeScript 2.9, we can use the --resolveJsonModule<\/code> compiler flag<\/a> to have TypeScript analyze imported .json<\/code> files and provide correct information regarding their shape obviating the need for a wildcard module declaration and validating the presence of the file. <\/p>\n\n\n\n
However, sometimes, for different reasons it might be,  we still need to define the format of our Objet.  And for that, we can do it in 2 differents ways :<\/p><\/blockquote>\n\n\n\n
1 -Use of “esModuleInterop” compiler fla<\/span><\/h4>\n\n\n\n
{\r\n  \"compilerOptions\": {\r\n    \"target\": \"es2015\",\r\n    \"module\": \"commonjs\",\r\n    \"strict\": true,\r\n    \"moduleResolution\": \"node\",\r\n    \"resolveJsonModule\": true,\n    \"esModuleInterop\"<\/span>: true<\/strong><\/span>,\r\n  }\r\n}<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
2 – Adding extra @Type definitions (typing.d.ts), as followed:<\/span><\/h4>\n\n\n\n
let\u00b4s create a typing.d.ts file, and define the declarations module, for all JSON files. <\/p>\n\n\n\n
declare module \"*.json\" {\n  const value: any;\n  export default value;\n}<\/code><\/pre>\n\n\n\n
That way, we  are stating that all modules that have a specifier ending in .json<\/code> have a single export named<\/em> default<\/code>.<\/p>\n\n\n\n
<\/div>\n\n\n\n
How to use our Object JSON in the application ? <\/em><\/h4>\n\n\n\n
Example: <\/h4>\n\n\n\n
Let\u00b4s say we have a JSON<\/code> file that looks like following:<\/p>\n\n\n\n
{\n \"primaryBright\":    \"#2DC6FB\",\n  \"primaryMain\":      \"#05B4F0\",\n  \"darkGrey\":         \"#333333\",\n  \"lightGrey\":        \"#777777\"\n}<\/code><\/pre>\n\n\n\n
There are several ways you can correctly consume such a module including<\/p>\n\n\n\n
import a from \"a.json\";\n\n\/\/then in the code, you can use it that way:\na.primaryMain<\/code><\/pre>\n\n\n\n
and<\/p>\n\n\n\n
import * as a from \"a.json\";\n\n\/\/then in the code, you can use it that way:\na.default.primaryMain<\/code><\/pre>\n\n\n\n
and<\/p>\n\n\n\n
import {default as a} from \"a.json\";\n\n\/\/then in the code, you can use it that way:\na.primaryMain<\/code><\/pre>\n\n\n\n
and<\/p>\n\n\n\n
import a = require(\"a.json\");\n\n\/\/then in the code, you can use it that way:\na.default.primaryMain<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
<\/p>\n\n\n\n
# Using Dynamic Imports:<\/h4>\n\n\n\n
Some time, we might need to import the file dynamically.  <\/p>\n\n\n\n
For e.g. based on some condition, import file 1<\/p>\n\n\n\n
if (condition){\r\n    \/\/ import file1;\r\n }<\/code><\/pre>\n\n\n\n
And that\u00b4s  how, we will make the import: ( see code below)<\/p>\n\n\n\n
const data_json = import(\"..\/app_data_files\/file1.json\");<\/code><\/pre>\n\n\n\n
Note: Dynamic Import will return a promise. you can either use async\/await or .then to get the json objects<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
TypeScript 2.9 introduced a new –resolveJsonModule compiler option that lets us import JSON modules from within TypeScript modules. #Importing JSON Modules via require Calls Let’s assume we have a Node application written in TypeScript, and let’s say that we want to import the following JSON file: In Node, we can use a require call to import this JSON file like any […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,83],"tags":[81,97,87],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/374"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=374"}],"version-history":[{"count":12,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/374\/revisions"}],"predecessor-version":[{"id":1452,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/374\/revisions\/1452"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}