在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;
}

我正在像这样导入它.

And I'm importing it like this.

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

在文件中，我将颜色primaryMain用作colors.primaryMain.但是我收到一个错误-Property 'primaryMain' does not exist on type 'typeof "*.json"

And in the file, I use the color primaryMain as colors.primaryMain. However I get an error - 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 bad practice for JSON files since TypeScript 2.9 when targeting compatible module formats^{see note})

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

您要说明所有以.json结尾的说明符的模块都有一个名为default的单个导出，该导出的类型为any.

You are stating that all modules that have a specifier ending in .json have a single export named default which is of type any.

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

There are several ways you can 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开始，您可以使用

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屋！