• 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.

throughrequireFunction 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 staticimportDeclaration 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.