在TypeScript中导入json文件

苏拉杰:

我有一个如下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'

阿鲁安·哈达德(Aluan Haddad):

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

编写时(自TypeScript 2.9导入JSON时,针对兼容模块格式的一种次佳实践,请参见note

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文件,并提供有关其形状的正确信息,从而避免了通配符模块声明的需要并验证了文件的存在。某些目标模块格式不支持此功能。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章