在 TypeScript 中导入 JSON 文件

Question

我有一个 JSON 文件，如下所示：

 {

  "primaryBright":    "#2DC6FB",
  "primaryMain":      "#05B4F0",
  "primaryDarker":    "#04A1D7",
  "primaryDarkest":   "#048FBE",

  "secondaryBright":  "#4CD2C0",
  "secondaryMain":    "#00BFA5",
  "secondaryDarker":  "#009884",
  "secondaryDarkest": "#007F6E",

  "tertiaryMain":     "#FA555A",
  "tertiaryDarker":   "#F93C42",
  "tertiaryDarkest":  "#F9232A",

  "darkGrey":         "#333333",
  "lightGrey":        "#777777"
}

我正在尝试将其导入到 .tsx 文件中。为此，我将其添加到类型定义中：

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

我正在像这样导入它。

import colors = require('../colors.json')

在文件中，我使用颜色 primaryMain 作为 colors.primaryMain 。但是我收到一个错误：

类型’typeof“*.json”上不存在属性’primaryMain’

原文由 Sooraj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

导入表单和模块声明需要就模块的形状、导出的内容达成一致。

当您编写时（从 TypeScript 2.9 开始，在针对兼容模块格式时导入 JSON 的次优做法，请参阅注释）

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

您是说所有具有以 .json 结尾的说明符的模块都有一个 名为 default 的导出。

有几种方法可以正确使用这样的模块，包括

import a from "a.json";
a.primaryMain

和

import * as a from "a.json";
a.default.primaryMain

和

import {default as a} from "a.json";
a.primaryMain

和

import a = require("a.json");
a.default.primaryMain

第一种形式是最好的，它利用的语法糖正是 JavaScript 具有 default 导出的原因。

但是，我提到了其他形式，以提示您出了什么问题。特别注意最后一个。 require 给你一个代表模块本身的对象，而 不是 它的导出绑定。

那么为什么会出错呢？因为你写

import a = require("a.json");
a.primaryMain

然而，没有名为 primaryMain 的导出由您的 "*.json" --- 声明。

所有这一切都假定您的模块加载器将 JSON 提供为 default 导出，如您的原始声明所建议的那样。

注意： 从 TypeScript 2.9 开始，您可以使用 --resolveJsonModule 编译器标志 让 TypeScript 分析导入的 .json 文件并提供有关其形状的正确信息，从而无需通配符模块声明并验证文件的存在。某些目标模块格式不支持此功能。

原文由 Aluan Haddad 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

就我而言，我需要更改 tsconfig.node.json ：

 {
  "compilerOptions": {
    ...
    "resolveJsonModule": true
  },
  "include": [..., "colors.json"]
}

并像这样导入：

 import * as colors from './colors.json'

或者像这样：

 import colors from './colors.json'

与 “esModuleInterop”：真

原文由 Andrey Ptashinskiy 发布，翻译遵循 CC BY-SA 4.0 许可协议