typescript中如何直接引入json文件

cg错过

前言

这是以前的笔记, 通过例举问题的方式来寻求解决方法

这里记录一个奇怪的问题, 如代码图片

这是一个单独的文件, 只是引入一个 json 文件, 使用 typescript 编写, 发现 require 关键字出错

然而使用命令 tsc jsonTest-1.ts 却能构建出 js 文件, 然后也能够运行, 如构建出来的 jsonTest-1.js 内容如下

var serverConfig = require('../doJSON/serverConfig.json');
console.log(serverConfig);

同样也可以运行

这里主要能 tsc 构建的原因是我安装了包 @types/node , 如 package.json 文件内容如下

{
  "name": "jsontest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "@types/node": "^10.12.11"
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  "author": "",
  "license": "ISC"
}

然后运行 npm install 来安装依赖

之后就可以编译, 但问题就是会显示报错

这个问题一直没有解决, 然后我找到另一个方法来导入 json 文件

官网
stack overflow

其解决方法就是, 在安装完 @types/node 模块之后, 在 node_modules/@type/node/ 文件夹下存在一个 index.d.ts 文件, 在 index.d.ts 文件的末尾添加如下代码

declare module "*.json" {
    const jsonValue: any;
    export default jsonValue;
}

然后就可以在此项目的 ts 文件中导入 json 文件了

如代码

import * as serverConfigJson from "./serverConfig.json";
console.log(serverConfigJson)

这样, 再使用命令 tsc jsonTest.ts 来构建成 js 文件, 之后就可以运行了

update-1

发现现在引入 json 文件不需要像上面那样去做, 只需要在 tsconfig.json 中增加一个编译选项就好了如增加

"resolveJsonModule": true,

即可

现在我使用的完整的 tsconfig.json 内容如下

{
  "compileOnSave": true,
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": false,
    "watch": false,
    "newLine": "crlf",
    "resolveJsonModule": true,
    "typeRoots": [
      "node_modules/@types"