在 TypeScript 中导入 JSON 文件 [英] Importing JSON file in TypeScript

问题描述

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

I have a JSON file that looks like following:

{

  "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 文件.为此，我将其添加到类型定义中:

I'm trying to import it into a .tsx file. For this I added this to the type definition:

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

我是这样导入的.

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

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

And in the file, I use the color primaryMain as colors.primaryMain. However I get an error:

属性 'primaryMain' 在类型 'typeof "*.json" 上不存在

Property 'primaryMain' does not exist on type 'typeof "*.json"

推荐答案

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

The import form and the module declaration need to agree about the shape of the module, about what it exports.

当您编写时(自 TypeScript 2.9 以来，在针对兼容的模块格式时导入 JSON 的次优做法^{请参阅注释})

When you write (a suboptimal practice for importing JSON since TypeScript 2.9 when targeting compatible module formats^{see note})

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

您声明所有具有以 .json 结尾的说明符的模块都有一个导出 named default.

You are stating that all modules that have a specifier ending in .json have a single export named default.

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

There are several ways you can correctly consume such a module including

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 导出的原因.

The first form is the best and the syntactic sugar it leverages is the very reason JavaScript has default exports.

不过，我提到了其他形式是为了让您了解发生了什么问题.特别注意最后一个.require 为您提供一个表示模块本身的对象，而不是 其导出的绑定.

However I mentioned the other forms to give you a hint about what's going wrong. Pay special attention to the last one. require gives you an object representing the module itself and not its exported bindings.

为什么会出错?因为你写了

So why the error? Because you wrote

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

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

And yet there is no export named primaryMain declared by your "*.json".

所有这些都假设您的模块加载器按照原始声明的建议将 JSON 作为 default 导出提供.

All of this assumes that your module loader is providing the JSON as the default export as suggested by your original declaration.

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

Note: Since TypeScript 2.9, you can use the --resolveJsonModule compiler flag to have TypeScript analyze imported .json files and provide correct information regarding their shape obviating the need for a wildcard module declaration and validating the presence of the file. This is not supported for certain target module formats.

这篇关于在 TypeScript 中导入 JSON 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！