- Importing JSON Modules in TypeScript
- Marius Schulz
- The Nuggets translation Project
- Permanent link to this article: github.com/xitu/gold-m…
- Translator: Hoarfroster
- Proofreader: Zenblo, regonCao
Introduce JSON modules in TypeScript
TypeScript 2.9 introduces a new resolveJsonModule compilation option that lets you import JSON modules inside TypeScript modules.
throughrequire
Function calls import JSON modules
Suppose we have a Node application written in TypeScript, and suppose we want to import the following JSON file:
{
"server": {
"nodePort": 8080}}Copy the code
In Node, we can call require to import this JSON file, just like any other CommonJS module:
const config = require("./config.json");
Copy the code
This JSON file is automatically deserialized into a normal JavaScript object, making it easy to access the properties of the configuration object:
"use strict";
const express = require("express");
const config = require("./config.json");
const app = express();
app.listen(config.server.nodePort, () = > {
console.log(` on port${config.server.nodePort}On the monitor... `);
});
Copy the code
So far, so good!
By using staticimport
Declaration statements import JSON files
Now if we want to use the native ECMAScript module instead of the CommonJS module, we must convert the require call to a static import declaration:
// Because all ECMAScript modules use strict mode by default
// We don't need to declare 'use strict' anymore
import * as express from "express";
import * as config from "./config.json";
const app = express();
app.listen(config.server.nodePort, () = > {
console.log(` on port${config.server.nodePort}On the monitor... `);
});
Copy the code
The program now has a type error in line 2. TypeScript doesn’t allow us to import JSON modules out of the box this way. This is a wise design decision by the TypeScript team: getting large JSON files can consume a lot of memory. That’s why we need to choose to use this feature by enabling the –resolveJsonModule compiler flag:
Making this a conscious choice helps users understand the cost of spending.
Let’s go to the tsconfig.json file and enable this option in it:
{
"compilerOptions": {
"target": "es2015"."module": "commonjs"."strict": true."moduleResolution": "node"."resolveJsonModule": true}}Copy the code
With the –resolveJsonModule declaration, our TypeScript files now have no type errors. Plus, we now have type checking and autocomplete!
If you compile a TypeScript file using the compiler options shown above, you get the following JavaScript output:
"use strict";
Object.defineProperty(exports."__esModule", {value: true});
const express = require("express");
const config = require("./config.json");
const app = express();
app.listen(config.server.nodePort, () = > {
console.log(` on port${config.server.nodePort}On the monitor... `);
});
Copy the code
Note that the output is almost identical to our first method (using require) :
"use strict";
const express = require("express");
const config = require("./config.json");
const app = express();
app.listen(config.server.nodePort, () = > {
console.log(` on port${config.server.nodePort}On the monitor... `);
});
Copy the code
That’s how you import JSON modules into a TypeScript module! This can be enabled simply by setting the resolveJsonModule compiler option to true in the configuration file!
If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.
The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.