typescript中如何直接引入json文件

原创

cg错过

修改于 2020-11-23 11:44:22

8.7K0

修改于 2020-11-23 11:44:22

文章被收录于专栏：程序笔记

前言

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

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

这是一个单独的文件, 只是引入一个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文件

其解决方法就是, 在安装完@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"
    ]
  },
  "exclude": [
    "node_modules",
    "logs"
  ]
}

首发来自公众号: 程序员品