Warm tip: This article is reproduced from serverfault.com, please click

其他-在 TypeScript 中导入 JSON 文件

(其他 - Importing JSON file in TypeScript)

发布于 2018-04-24 08:05:47

我有一个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. 但是我收到一个错误:

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

Questioner
Sooraj
Viewed
22
Aluan Haddad 2020-03-14 19:01:58

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

当你编写时(从 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".

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

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