在 Typescript 中导入 Json 文件：终端出错

Question

我是打字稿新手，我有 2 个问题。

一个。我想在 Visual Studio Code (3.6.2) 编辑器中使用以下代码在我的打字稿 (main.ts) 中导入一个简单的 JSON 文件：

import test from "./test.json";
console.log(test.name);

我也试过import * as test from "./test.json";

而 JSON 文件 (test.json) 如下：

{"name": "testing",
"age":25}

但是，当我输入“test.”时，typescript 会给出“name”、“age”的选项作为属性。

tsconfig.json 文件如下：

{
  "compilerOptions": {
    "target": "es5", 
    "module": "commonjs",                     
    "strict": true, 
    "moduleResolution": "node",               
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

此代码抛出以下错误：

Cannot find module './test.json'. Consider using '--resolveJsonModule' to import module with '.json' extension

由于类型定义是针对旧版本的，所以我没有使用它。我的打字稿版本是 3.6.3。上面提到的 3 个文件在同一个文件夹中。

   -testfolder
     - main.ts
     - tsconfig.json
     - test.json

虽然还有一些其他类似的问题，但我在我的代码中找不到问题！我也用 submile text 3 测试过，但它也给出了同样的错误！

b.如果我想从文件扩展名不同（不是.json）的文件中解析json数据，我应该怎么做？

提前感谢您的宝贵时间。

Answer 1

您可以尝试使用此命令启动您的应用

npm run serve --resolveJsonModule

你的错误可能会消失

Answer 2

尼哈尔，

我能够重现您提到的问题。我还能够使用以下 tsconfig.json 解决问题：

{
"compilerOptions": {
  /* Basic Options */
  "target": "es5",
  "module": "commonjs",
  "strict": true,
  "esModuleInterop": true,
  "resolveJsonModule": true
}, 
"files": ["main.ts"]

}

当然，添加的“文件”部分假定您的主文件名为“main.ts”。坦率地说，我不确定为什么这有效而您的原始文件无效，但是当我使用 tsconfig.json 文件时，我会尝试将 typescript 需要知道的所有内容放在一个地方。

Answer 3

尝试使用模块。查看此文档https://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html

// index.ts

import file from "./file.json";

console.log(file);
console.log(file.name);

// json.dt.ts

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

Answer 4

假设您使用 VSCode 并且 所有文件 都在 同一目录 并且 VSCode 是从该目录直接打开的，那么您的 tsconfig完美运行（至少对于 TS 3.6）。